CSS学习笔记六：写原生导航栏

2022-11-16 11:58:39

　　因为刚开始学习CSS时，只了解了一些基本样式，然后就跑去学习bootstrap。bootstrap是个不错的东西，挺好玩，起码让你写界面写的轻轻松松，几行引入代码，再来个复制粘贴就解决了，而且bootstrap在菜鸟教程中有拖拉拽就能做成界面，这就好比写myeclipes 的图形界面，贼儿溜方便。但现在得空了，我想还是要好好学习下如何修建导航栏出来，从最基本的属性出发，一点一点构建原生导航栏。本次写的是侧拉导航栏和下拉导航栏，这两样在网站都比较常见。

　　1、确定你所要写导航栏有几种类型，一般情况下会有几种属性【首页、精品区、折扣区、限时区】，导航栏都是用来区分类型，让人快速找到自己想要的。比如我写的关于零食，就列了一下几种分类【鲜果杂志、缤纷闲时、乐趣妙享】等三类。然后就开始再HTML中写上你需要的类型。

　　首先需要有个大容器将整个导航栏装入，然后开始分块，用ul来将属性一个一个装入，部分有下拉的元素就要添加一个容器块给它存储，按照不同级别写CSS。

 <div class="container">

         <ul class="list">

             <li><a href="">目录</a>

             </li>

             <li>

                 <a href="">鲜果杂志</a>

                 <div class="down">

                     <a href="">apple</a>

                     <a href="">orange</a>

                     <a href="">watermelen</a>

                     <a href="">pear</a>

                 </div>

             </li>

             <li>

                 <a href="">缤纷闲时</a>

                 <div class="down">

                     <a href="">tudou</a>

                     <a href="">huasheng</a>

                 </div>

             </li>

             <li>

                 <a href="">乐趣妙享</a>

                 <div class="down">

                     <a href="">doudou</a>

                 </div>

             </li>

         </ul>

     </div>

　　2、进入编写CSS属性值，作为一个横向的侧拉导航栏，那么它所有的元素便是要竖着摆放，这就要求它的高度height要大，要能够给每一行的类型一个固定值，然后它的总容器高度就是每一行的总和。

 .container{

     margin-left: 100px;

     margin-top:100px;

     width: 100px;

     height: 160px;

 /*    background-color:  #222; */

     background-image: url(2.jpg);

 }

 .container .list{

     margin: 0 auto;

     height: 40px;

 }

 .list li{

     position: relative;

 }

 .list li>a{

     padding: 20px 5px;

     line-height: 40px;

     font-size: 16px;

     color: #aaa;

 }

　　可以看到我给每一行设置了40PX，然后总的高度我给设置了160PX，li>a 是指在 li 下的 a都要遵照这个样式拜访。

　　3、设置一个属性下拉或者下拉，事实上侧拉或者下拉过程是将本来隐藏的块经由事件触发然后然后显示出来，从displace:none变成displace:block的过程；可以看到 .list li .down 中的属性与 .list li:hover .down 中的区别　

 .list li:hover .down{

     display: block;

 }

 .list li .down{

     position: absolute;

     left: 100px;

     top: 0px;

     width: 400px;

     background:url(2.jpg) no-repeat 5px 5px;

     display: none;

 }

 .list li .down>a{

     color: #aaa;

     font-size: 14px;

     line-height: 40px;

     padding-left: 30px;

 /*    width: 400px;*/

     display: inline-grid;

 }

 .list li .down a:hover{

     color: #222;

 }

　　4、下拉导航栏跟侧拉导航栏的区别在于前者将隐藏的东西放在下面，而后者的是将隐藏块放在旁边。上面为下拉导航栏的宽高，下面为侧拉导航栏。

 .nav_body li .nav_list{

     width: 90px;

     height: 90px;

     background:url(2.jpg) no-repeat 5px 5px;

     position: relative;

     left: 55px;

     display: none;

 }

 .list li .down{

     position: absolute;

     left: 100px;

     top: 0px;

     width: 400px;

     background:url(2.jpg) no-repeat 5px 5px;

     display: none；

导航栏完成效果图

最后附加炸弹一枚

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="UTF-8">

     <title>侧向导航栏</title>

     <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">

     </script>

     <script type="text/javascript" src="hello.js"></script>

     <link rel="stylesheet" type="text/css" href="hello.css">

 </head>

 <body>

     <div class="container">

         <ul class="list">

             <li><a href="">目录</a>

             </li>

             <li>

                 <a href="">鲜果杂志</a>

                 <div class="down">

                     <a href="">apple</a>

                     <a href="">orange</a>

                     <a href="">watermelen</a>

                     <a href="">pear</a>

                 </div>

             </li>

             <li>

                 <a href="">缤纷闲时</a>

                 <div class="down">

                     <a href="">tudou</a>

                     <a href="">huasheng</a>

                 </div>

             </li>

             <li>

                 <a href="">乐趣妙享</a>

                 <div class="down">

                     <a href="">doudou</a>

                 </div>

             </li>

         </ul>

     </div>

     <div class="nav">

         <ul class="nav_body">

             <li>

                 <a href="">首页</a>

             </li>

             <li>

                 <a href="">鲜果杂志</a>

                 <div class="nav_list">

                     <a href="">apple</a>

                     <a href="">orange</a>

                     <a href="">watermelen</a>

                     <a href="">pear</a>

                 </div>

             </li>

             <li>

                 <a href="">缤纷闲时</a>

                 <div class="nav_list">

                     <a href="">tudou</a>

                     <a href="">huasheng</a>

                     <a href="">digua</a>

                     <a href="">sweet</a>

                 </div>

             </li>

             <li>

                 <a href="">乐趣妙享</a>

                 <div class="nav_list">

                     <a href="">doudou</a>

                     <a href="">minner</a>

                     <a href="">cucumber</a>

                     <a href="">tomato</a>

                 </div>

             </li>

         </ul>

     </div>

 </body>

 </html>

炸弹1-1

 *{

     margin: 0;

     padding: 0;

 }

 li{

     list-style: none;

 }

 a{

     text-decoration: none;

 }

 .nav{

     margin-top: 50px;

     width: 100%;

     height: 40px;

     background-image: url(2.jpg);

 }

 .nav .nav_body{

     margin: 0 auto;

     height: 40px;

 }

 .nav_body li{

     display: inline-block;

     vertical-align:top;

     /*replace float left*/

 }

 .nav_body li>a{

     margin-left:50px;

     padding: 0 10px;

     line-height: 40px;

     font-size: 16px;

     color: #aaa;

 }

 .nav_body li:hover >a{

     color: #222;

 }

 .nav_body li .nav_list{

     width: 90px;

     height: 90px;

     background:url(2.jpg) no-repeat 5px 5px;

     position: relative;

     left: 55px;

     display: none;

 }

 .nav_body li:hover .nav_list{

     display: block;

     transition: transfrom 2s ease-in;

 }

 .nav_body li .nav_list >a{

     padding: 10px 5px;

     color: #aaa;

     line-height:40px

     font-size:14px; 

 }

 .nav_body li .nav_list >a:hover{

     color: #222;

 }

 .container{

     margin-left: 100px;

     margin-top:100px;

     width: 100px;

     height: 160px;

 /*    background-color:  #222; */

     background-image: url(2.jpg);

 }

 .container .list{

     margin: 0 auto;

     height: 40px;

 }

 .list li{

     position: relative;

 }

 .list li>a{

     padding: 20px 5px;

     line-height: 40px;

     font-size: 16px;

     color: #aaa;

 }

 .list li:hover >a{

     color: #222;

 }

 .list li:hover .down{

     display: block;

 }

 .list li .down{

     position: absolute;

     left: 100px;

     top: 0px;

     width: 400px;

     background:url(2.jpg) no-repeat 5px 5px;

     display: none;

 }

 .list li .down>a{

     color: #aaa;

     font-size: 14px;

     line-height: 40px;

     padding-left: 30px;

 /*    width: 400px;*/

     display: inline-grid;

 }

 .list li .down a:hover{

     color: #222;

 }

炸弹1-2

码农公寓

相关文章