ul设计导航栏
如何在js文件header中添加ul导航条，需要实现的效果图：
以下是我写的代码，但没有实现上面的效果，请教如何解决？
<ul class="type" id="type"> <li data-type="dot">Dot</li> <li data-type="column" class="selected">Column</li> </ul>
得到的效果，哪位大侠有兴趣解决这个问题？谢谢~
寒青浏览 1852回答 2
2回答
-
李晓健
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"/> <title>xxxxxx</title> <style> *{ margin: 0; padding: 0; } body{ background-color: #000; padding: 20px; } .type{ width: 180px; border-radius: 5px; border: 1px solid #fff; overflow: hidden; } .type li{ list-style: none; width: 50%; float: left; text-align: center; background-color: #000; color: #fff; } .type .selected{ background-color: #fff; color: #000; } </style> </head> <body> <ul class="type" id="type"> <li data-type="dot">Dot</li> <li data-type="column" class="selected">Column</li> </ul> </body> </html>
随时随地看视频慕课网APP
相关分类
Html5
JavaScript
Node.js