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

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

先晒效果图:

技术分享

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

 

 

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

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