天书笔记：HTML+CSS实现顶部导航栏

浏览数：36 / 时间：2015年06月09日

此笔记纯属本人脑残笔记，阅读困难不理解属正常现象，初学者尽量不要阅读，否则轻则口吐白沫重则走火入魔，切记切记

先晒效果图：

技术分享

效果要求类似于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;这条就可以撑开了

此笔记纯属本人脑残笔记，阅读困难不理解属正常现象，初学者尽量不要阅读，否则轻则口吐白沫重则走火入魔，切记切记

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

天书笔记：HTML+CSS实现顶部导航栏