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

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

先晒效果图：

效果要求类似于b站的顶部导航（。。原谅我老是拿b站做例子:) ）

然后是代码

下面逐条分析这一堆东西

HTML部分主要是这个：

 <div class="topbar">
     <div class="topbody">
     <a class="title" href="">标题</a>
     <ul class="toplist">
         <li><a href="">项目1</a></li>
         <li><a href="">项目2</a></li>
         <li><a href="">项目3</a></li>
         <li><a href="">项目4</a></li>
     </ul>
     </div>
 </div>

CSS:

 *{
     margin: 0px;
     padding:0px;
 }
 .topbody{
     width:900px;
     margin: 0 auto;
 }
 .topbar{
     width:100%;
     background-color: #000;
     display: inline-block;
 }

 .topbar li{
     float:left;
 }
 .toplist{
     display: inline-block;
     list-style-type:none;
 }
 .toplist a{
     color:#FFF;
     text-decoration: none;
 }
 .title,.toplist a{
     display:block;

     display: block;
     float: left;
 }
 .toplist a{
     padding:15px 20px 15px 20px;
 }
 .title{
     color:#FFF;
     text-decoration: none;
     padding:15px 30px 15px 30px;
 }

顶栏主要被一个class为topbar的div包围，然后里面嵌套了一个topbody是因为下一步要设宽度。还有一个a设为标题。最坑爹的是顶栏项目必须用ul包围，F12了很多网站都是这样写的，具体为什么我也不知道，莫非是能让浏览器更好的渲染页面？用ul更坑爹的是处理那几个样式，要知道ul默认是带点的。。所以需要把这个点去掉。。百度了一阵终于知道了把list-style-type设成none就可以了

关于上文提及的topbody：这里topbody作为主层主要起到一个固定宽度的作用，防止显示区域一大了里面的项目就跟着跑那种情况。css用了margin居中法并且指定了一个宽度

 .topbody{
     width:900px;
     margin: 0 auto;
 }

关于项目的处理需要注意把topbar里的所有元素（这里的a和li）都display:block并且float:left，display:block是为了设padding时会起作用，float:left是向左浮动。然后基本所有用过float:left这个东西的都会出现父容器撑不开的情况（高度为0），这时用display: inline-block;这条就可以撑开了

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

巴特西

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

最新文章

热门文章