标签：
此笔记纯属本人脑残笔记，阅读困难不理解属正常现象，初学者尽量不要阅读，否则轻则口吐白沫重则走火入魔，切记切记
先晒效果图：
效果要求类似于b站的顶部导航（。。原谅我老是拿b站做例子:) ）
然后是代码
下面逐条分析这一堆东西
HTML部分主要是这个：
1 <div class="topbar"> 2 <div class="topbody"> 3 <a class="title" href="">标题</a> 4 <ul class="toplist"> 5 <li><a href="">项目1</a></li> 6 <li><a href="">项目2</a></li> 7 <li><a href="">项目3</a></li> 8 <li><a href="">项目4</a></li> 9 </ul> 10 </div> 11 </div> 12
CSS:
1 *{ 2 margin: 0px; 3 padding:0px; 4 } 5 .topbody{ 6 width:900px; 7 margin: 0 auto; 8 } 9 .topbar{ 10 width:100%; 11 background-color: #000; 12 display: inline-block; 13 } 14 15 .topbar li{ 16 float:left; 17 } 18 .toplist{ 19 display: inline-block; 20 list-style-type:none; 21 } 22 .toplist a{ 23 color:#FFF; 24 text-decoration: none; 25 } 26 .title,.toplist a{ 27 display:block; 28 29 display: block; 30 float: left; 31 } 32 .toplist a{ 33 padding:15px 20px 15px 20px; 34 } 35 .title{ 36 color:#FFF; 37 text-decoration: none; 38 padding:15px 30px 15px 30px; 39 }
顶栏主要被一个class为topbar的div包围，然后里面嵌套了一个topbody是因为下一步要设宽度。还有一个a设为标题。最坑爹的是顶栏项目必须用ul包围，F12了很多网站都是这样写的，具体为什么我也不知道，莫非是能让浏览器更好的渲染页面？用ul更坑爹的是处理那几个样式，要知道ul默认是带点的。。所以需要把这个点去掉。。百度了一阵终于知道了把list-style-type设成none就可以了
关于上文提及的topbody：这里topbody作为主层主要起到一个固定宽度的作用，防止显示区域一大了里面的项目就跟着跑那种情况。css用了margin居中法并且指定了一个宽度
1 .topbody{ 2 width:900px; 3 margin: 0 auto; 4 }
关于项目的处理需要注意把topbar里的所有元素（这里的a和li）都display:block并且float:left，display:block是为了设padding时会起作用，float:left是向左浮动。然后基本所有用过float:left这个东西的都会出现父容器撑不开的情况（高度为0），这时用display: inline-block;这条就可以撑开了
此笔记纯属本人脑残笔记，阅读困难不理解属正常现象，初学者尽量不要阅读，否则轻则口吐白沫重则走火入魔，切记切记
标签：
原文地址：http://www.cnblogs.com/techmoe/p/4276090.html
