因为刚开始学习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. 9.3、Libgdx手势检测

    (官网:www.libgdx.cn) 触摸屏在输入的基础上增加了手势检测,比如两个手指实现缩放,单击或双击屏幕,长按屏幕等. Libgdx提供了GestureDetector来帮助你检测以下手势: t ...

  2. SpriteBuilder改变布局后App运行出错代码排查

    原来整个关卡场景放在GameScene.ccb中,后来觉得移到专门的Level.ccb比较好. 移动过后编译运行,只要移动Player的胳膊发射子弹时,Xcode报错: g due to Chipmu ...

  3. ISLR系列：(4.2)模型选择 Ridge Regression & the Lasso

    Linear Model Selection and Regularization 此博文是 An Introduction to Statistical Learning with Applicat ...

  4. android动画介绍--Animation 实现loading动画效果

    Animation的使用方法并不难.这里简单的介绍一下使用方法. 先看效果图: 效果还是不错的吧. 下面来看看使用方法. 动画效果是通过Animation来实现的,一共有四种,分别为: AlphaAn ...

  5. android使用ViewPager实现欢迎引导页

    android使用ViewPager实现欢迎引导页 大多数APP第一次启动的时候,都会有一个引导界面,左右滑动,到最后一张,用户点击才再次进入主界面.当第二次启动的时候,则直接进入主界面. 这种效果一 ...

  6. Erlang Rebar 使用指南之三：Rebar和OTP程序约定和命令

    Erlang Rebar 使用指南之三:Rebar和OTP程序约定和命令 全文目录: https://github.com/rebar/rebar/wiki 本章位置: https://github. ...

  7. Android实训案例(一)——计算器的运算逻辑

    Android实训案例(一)--计算器的运算逻辑 应一个朋友的邀请,叫我写一个计算器,开始觉得,就一个计算器嘛,很简单的,但是写着写着发现自己写出来的逻辑真不严谨,于是搜索了一下,看到mk(没有打广告 ...

  8. iOS9 ReplayKit录制视频

    猴子原创,欢迎转载.转载请注明: 转载自Cocos2Der-CSDN,谢谢! 原文地址: http://blog.csdn.net/cocos2der/article/details/50260873 ...

  9. 关于NSString和NSMutableString的相关用法和基本介绍

    Objective-C 中核心处理字符串的类是 NSString 与 NSMutableString ,这两个类最大的区别就是NSString 创建赋值以后该字符串的内容与长度不能在动态的更改,除非重 ...

  10. 关于MySQL 5.6.24 解压缩版重启电脑后，无法启动的问题

    最近的项目需要用到mysql,想起以前安装过,就得应该没啥问题.也不知道是软件更新换代的问题,还是版权问题,网上找的msi版本的mysql都很难安装,一开始要安装.NET,我忍了,然后又要安装Visu ...