因为刚开始学习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. HEVC，VP9，x264性能对比

    Dan Grois等人在论文<Performance Comparison of H.265/MPEG-HEVC, VP9, andH.264/MPEG-AVC Encoders>中,比较 ...

  2. [信号处理技术]关于EMD的产生

    通俗易懂,有助于理解EMD和HHT,就原封不动的搬过来了. 原文链接:关于EMD的产生 自傅里叶变换与频谱分析技术产生,人们得以从另外一个角度观察时域信号,信号里各个点的密集程度,得以确定性地度量.之 ...

  3. 跨平台移动APP开发进阶(一)mui开发注意事项

    mui开发注意事项 Mui HTML5开发框架 mui是一个高性能的HTML5开发框架,从UI到效率,都在极力追求原生体验:这个框架自身有一些规则,刚接触的同学不很熟悉,特总结本文:想了解mui更详细 ...

  4. cas 单点登录(SSO)之一: jasig cas-server 安装

    cas 单点登录(SSO)实验之一: jasig cas-server 安装 参考文章: http://my.oschina.net/indestiny/blog/200768#comments ht ...

  5. 反对抄袭　正解spring的@Autowired　不要相信网上的错误版本

    首先,最重要的, @Autowired的就是用来来消除 set ,get方法． 有些介绍,如著名的马士兵,说要在set方法上进行注入．我当时就看不明白了,既然只取消了一个GET,这个@Autowire ...

  6. AndFix使用感想

    AndFix已经使用了一段时间了,但是到AndFix上看了一下,最近2个月都没有更新代码了,有141个issues和3个pull request没人处理,其实AndFix的Contributors就俩 ...

  7. ARM linux常用汇编语法

    汇编语言每行的语法:     lable: instruction  ; comment 段操作: .section           格式: .section 段名 [标志］     ［标志］可以 ...

  8. Linux - test测试标志的意思总结

    测试的标志 代表意义 1. 关於某个档名的『文件类型』判断,如 test -e filename 表示存在否 -e 该『档名』是否存在?(常用) -f 该『档名』是否存在且为文件(file)?(常用) ...

  9. PS 滤镜——Skewing

    %%%% Skewing clc; clear all; close all; addpath('E:\PhotoShop Algortihm\Image Processing\PS Algorith ...

  10. Mybatis源码之CallableStatementHandler

    /** * @author Clinton Begin */ public class CallableStatementHandler extends BaseStatementHandler { ...