因为刚开始学习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

　　

CSS学习笔记六：写原生导航栏的更多相关文章

  1. Android学习笔记- Fragment实例 底部导航栏的实现

    1.要实现的效果图以及工程目录结构: 先看看效果图吧: 接着看看我们的工程的目录结构: 2.实现流程: Step 1:写下底部选项的一些资源文件 我们从图上可以看到,我们底部的每一项点击的时候都有不同 ...

  2. CSS学习笔记（5）--导航ul，li浮动问题

    为什么只给li设置浮动,没有给ul设置浮动,ul后的元素div也会跟着浮动?   添加评论 分享   默认排序按时间排序 3 个回答   张思远 程序员 2 人赞同 代码是不是这样的啊?<ul& ...

  3. CSS学习笔记-04 a标签-导航练习

    个人练习,各位大神勿笑  .. <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

  4. Bootstrap学习笔记（4）--导航栏

    相关类: nav, nav-pills, nav-tags, nav-stacked ul里使用,导航格胶囊,方片外观,堆叠外观 navbar, navbar-header, navbar-brand ...

  5. 04 uni-app框架学习：禁用顶部原生导航栏

    1.在pages.json中配置 比如要首页禁用 就在首页这个选项里 加上这几句代码 2.效果如下

  6. java之jvm学习笔记六-十二(实践写自己的安全管理器)(jar包的代码认证和签名) (实践对jar包的代码签名) (策略文件)(策略和保护域) (访问控制器) (访问控制器的栈校验机制) (jvm基本结构)

    java之jvm学习笔记六(实践写自己的安全管理器) 安全管理器SecurityManager里设计的内容实在是非常的庞大,它的核心方法就是checkPerssiom这个方法里又调用 AccessCo ...

  7. CSS学习笔记

    CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...

  8. CSS学习笔记之基本介绍

    1.简介 层叠样式表(Cascading Style Sheets,CSS)允许我们把样式设置存储在文件中,从而将内容与表现分离 当同一个 HTML 元素被不只一个样式定义时,最终的样式确定顺序如下( ...

  9. css学习笔记四

    广州天气变冷了,css学习笔记还是要总结. 总结: 1:几米页面静态页面主要是一列结构头部banner图,mainbody部分放文字内容和图书图片,底部是页面的版权信息 2:腾讯软件中心静态页面制作( ...

随机推荐

  1. unity 实现流光效果

    1.通过一些简单效果可以让我们更好的去理解shader,具体都在代码注释中: Shader "Unlit/MoveLightImage" { Properties { //主纹理 ...

  2. (NO.00001)iOS游戏SpeedBoy Lite成形记(十二)

    如果选手能在加速的时候屁股产生推进器效果就跟好了,仿佛选手腾云驾雾的感觉.我们可以用Cocos2D中的CCMotionStreak类来轻松实现.下面在Player.h接口文件添加以下代码: @prop ...

  3. 【翻译】Sencha Ext JS 5发布

    原文:Announcing Sencha Ext JS 5 简介 我代表Sencha和整个Ext JS团队,很自豪的宣布,在今天,Sencha Ext JS 5发布了.Ext JS 5已经迈出了一大步 ...

  4. 对Linux0.11 中 进程0 和 进程1分析

    1. 背景 进程的创建过程无疑是最重要的操作系统处理过程之一,很多书和教材上说的最多的还是一些原理的部分,忽略了很多细节.比如,子进程复制父进程所拥有的资源,或者子进程和父进程共享相同的物理页面,拥有 ...

  5. 2014新年福利，居然有人将Ext JS 4.1的文档翻译了

    原文:http://damoqiongqiu.iteye.com/blog/1998022

  6. Weka 算法大全

    关联规则挖掘 (一)  Apriori (二)  FilteredAssociator (三)  FPGrowth (四)  GeneralizedSequentislPatterns (五)  Pr ...

  7. 【网站建设】Linux上安装MySQL - 12条命令搞定MySql

    从零开始安装mysql数据库 : 按照该顺序执行 :  a. 查看是否安装有mysql:yum list installed mysql*, 如果有先卸载掉, 然后在进行安装; b. 安装mysql客 ...

  8. Zeromq自连接错误

    Zeromq自连接错误(金庆的专栏)Zeromq消息中间件开发的服务器和客户端不必按顺序启动,客户端可以在服务器开启之前启动.这是Zmq特别好用的一大特性.利用该特性,网游各功能服务器可以任意重启,实 ...

  9. 实现去哪儿来回机票选择的view

    最近有个控件是实现和去哪儿和阿里旅行的app的选择日历效果,反编译没有效果的情况下我自己实现了个,大致的原理是: 上面是产品需要实现的效果,我看了下不就是一个ListView+gridView就能实现 ...

  10. 【14】-java的单例设计模式详解

    预加载模式 代码: public class Singleton { private volatile static Singleton singleton = new Singleton(); pr ...