最近开始忙着开自己的个人博客了，自己的前端确实是渣渣。没办法，一步步来，从慕课网上慢慢学着先。

首先带来的是一个导航栏的设计：

垂直导航栏的设计：

直接上代码：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>导航菜单</title>

 <style>

     *{margin:0; padding:0; font-size:14px;}

     ul{list-style:none;width:100px;}

     a{text-decoration:none;line-height:30px;width:100px;background-color:#ccc;margin-bottom:1px;text-indent:10px;display:block;}

     a:hover{background-color:#F30;color:#FFFS;}

 </style>

 </head>

 <body>

 <ul class="nav">

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

     <li><a href="#">新闻快讯</a></li>

     <li><a href="#">产品展示</a></li>

     <li><a href="#">售后服务</a></li>

     <li><a href="#">联系我们</a></li>

   </ul>

 </body>

 </html>

在这里搭建菜单使用的是无序列表，即使用的是ul加上li两个标签实现的。

<ul class="nav">

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

<li><a href="#">新闻快讯</a></li>

<li><a href="#">产品展示</a></li>

<li><a href="#">售后服务</a></li>

<li><a href="#">联系我们</a></li>

</ul>

上面的代码没有使用css的时候还是非常丑的，在这里给添加上css样式：

 <style>

 *{margin:; padding:; font-size:14px;}

 ul{list-style:none;width:100px;}

 a{text-decoration:none;line-height:30px;width:100px;background-color:#ccc;margin-bottom:1px;text-indent:10px;display:block;}

 a:hover{background-color:#F30;color:#FFFS;}

 </style>

这里解释一下CSS的作用和由来：

首先是第二行的一个样式清空和字体预设。首先是接受了扫盲的教育——》margin是表示盒子模型中的外边距，padding是表示盒子模型的内边距。font-size是对文本字体的一个预设。

第三行首先list-style是将默认样式前边的那个点给去掉了，默认样式和老师说起来一样，有点想书的一个目录，看起来有时候确实不咋的哈。导航栏的目录暂时预设为100px。

第四行是将a标签设置为一个块，将它自己的display属性更改为block（块属性），目的是后边对a标签添加悬浮样式的一个方便。第一个是清空超链接的下划线默认样式，height是a标签的高度，同时bottom给了一个像素的目的是将这一块的背景给分开，给读者一个不是连在一块的感觉。在这里使用了text-indent属性而不是padding-left的属性是因为，当使用了padding-left的时候，整体的盒子是向右边扩展了像素的，需要后边自己手动调整，很是麻烦。但是通过text-indent进行一个定位，就不存在这个问题，效果一样。

第五行就是给自己的a标签添加一个悬浮效果了，当鼠标移上去的时候，目录的背景和字体同时改变自己的颜色的特效。

慕课网课程链接：（点击这里）：http://www.imooc.com/video/42/0

水平导航栏

想想刚刚看完垂直导航栏，那么水平导航栏的原理也是差不多咯，答案是确实的！

来来来，先上代码：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>导航菜单</title>

 <style>

     *{margin:; padding:; font-size:14px;}

     ul{list-style:none;}

     li{float:left;}

     a{text-decoration:none;line-height:30px;width:100px;background-color:#ccc;margin-bottom:1px;text-align:center;display:block;}

     a:hover{background-color:#F30;color:#FFFS;}

 </style>

 </head>

 <body>

 <ul class="nav">

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

     <li><a href="#">新闻快讯</a></li>

     <li><a href="#">产品展示</a></li>

     <li><a href="#">售后服务</a></li>

     <li><a href="#">联系我们</a></li>

   </ul>

 </body>

 </html>

水平导航栏

两个代码的区别在那里呢？这个是完完全全由css样式来决定的，让我们看看这次的css有那些不同：

 <style>

     *{margin:; padding:; font-size:14px;}

     ul{list-style:none;}

     li{float:left;}

     a{text-decoration:none;line-height:30px;width:100px;background-color:#ccc;margin-bottom:1px;text-align:center;display:block;}

     a:hover{background-color:#F30;color:#FFFS;}

 </style>

首先变化的是将ul中的100px像素的宽度限制给取消了，这样子给了目录浮动的横向空间。

然后是给我们的li的标签添加了一个左浮动的效果。

当然，打开浏览器一看，这个时候已经是水平导航栏了，确实是挺快的！

不过还是有些小问题的，我们将以前的字体左移动效果给去掉了，然后给添加上居中的效果（text-align:center）这样子就变得好看多了，棒棒哒

慕课网视频链接：（点击这里）http://www.imooc.com/video/66/0

说完垂直目录和水平目录，好像目录的事情就到此为止了。的确，一般这两种目录就够用了，还有其他的一些特殊的目录我们也都是通过调整它的css样式来实现的。

当然，下边我们谈论的一个主题是如何给自己的博客导航栏添加一个背景，先上图吧，给大家看看一个效果。（点击这里）：http://www.zhangjie.site/demo/demo1.html

那么我先将源代码贴出来咯，给大家看看。

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>导航菜单</title>

 <style type="text/css">

 *{margin:0; padding:0; font-size:14px;}

 a{color:#333;text-decoration:none}

 .nav{list-style:none; height:30px; border-bottom:10px solid #F60; margin-top:20px; padding-left:50px;}

 .nav li{float:left}

 .nav li a{display:block; height:30px;text-align:center; line-height:30px; width:120px; background:url(http://img.mukewang.com/53846438000168f901200060.jpg); margin-left:1px;}

 .nav li a.on, .nav li a:hover{ background-position:0 -30px; color:#fff;}

 </style>

 </head>

 <body>

 <ul class="nav">

     <li><a class="on" href="#">首　　页</a></li>

     <li><a href="#">新闻快讯</a></li>

     <li><a href="#">产品展示</a></li>

     <li><a href="#">售后服务</a></li>

     <li><a href="#">联系我们</a></li>

   </ul>

 </body>

 </html>

首先讲解一下原理：在这里采用的方式是给自己的网页进行一个贴图效果，一张圆角矩形的图片，上边是背景色白色，下边是聚焦后的橘黄色，通过上下平移的方式来实现不同背景的效果。

那么我们开始分析html代码。首先看看，html是完全相同的，都只是css样式发生了改变。贴上css看看

 <style type="text/css">

 *{margin:0; padding:0; font-size:14px;}

 a{color:#333;text-decoration:none}

 .nav{list-style:none; height:30px; border-bottom:10px solid #F60; margin-top:20px; padding-left:50px;}

 .nav li{float:left}

 .nav li a{display:block; height:30px;text-align:center; line-height:30px; width:120px; background:url(http://img.mukewang.com/53846438000168f901200060.jpg); margin-left:1px;}

 .nav li a.on, .nav li a:hover{ background-position:0 -30px; color:#fff;}

 </style>

表示自己最开始也是没有弄懂，没有写出相同的效果，只能直接贴上教程的源码给大家一同来讨论了。

我们可以看见，默认格式是一样的，改变的第一个是将目录进行了一个向下的平移20px，这样子可以使得目录和那根橘黄色的线条（ border-bottom:10px solid #F60;第四行的线条）融合一块。然后就是上贴图了：第六行代码中是直接的将line height和width给固定去了，为的就是将显示的范围固定。在第七行代码中，将聚焦后的效果写出来了：

（background-position:0 -30px;背景向上平移了30个像素）

这样子，其中使用了一个on，可以给自己的首页添加一个默认选中的效果，同时当鼠标滑动到其他目录上的时候也会有一个变色的效果。

（纠正上边的一个错误，就是html中要给自己的首页项添加上一个on的class属性，并非是一点都不用改变的哈）

那么现在我们的贴图效果就已经是实现了！

慕课网视频链接：（点击这里）http://www.imooc.com/video/67

说完给导航栏贴图，这里在讲一个向上平移导航栏的默认选中效果。上图：点击这里：http://www.zhangjie.site/demo/demo2.html

那么如何实现呢？

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>导航菜单</title>

 <style type="text/css">

 *{margin:0; padding:0; font-size:14px;}

 a{color:#333;text-decoration:none}

 .nav{list-style:none; height:30px; border-bottom:10px solid #F60; margin-top:20px; padding-left:50px;}

 .nav li{float:left}

 .nav li a{display:block; height:30px;text-align:center; line-height:30px; width:120px; margin-left:1px;}

 .nav li a.on, .nav li a:hover{ background-color:#f60; color:#fff;height:70px;margin-top:-30px;line-height:70px;}

 </style>

 </head>

 <body>

 <ul class="nav">

     <li><a class="on" href="#">首　　页</a></li>

     <li><a href="#">新闻快讯</a></li>

     <li><a href="#">产品展示</a></li>

     <li><a href="#">售后服务</a></li>

     <li><a href="#">联系我们</a></li>

   </ul>

 </body>

 </html>

实现代码

那么这里的css就是先去掉先前贴图效果，然后给选中效果加上向上平移属性，当然，这个时候有点小问题，所以又有一个margin-top有40px的效果。最后给文章一个居中就好了，也就是这个代码：

 <style type="text/css">

 *{margin:0; padding:0; font-size:14px;}

 a{color:#333;text-decoration:none}

 .nav{list-style:none; height:30px; border-bottom:10px solid #F60; margin-top:20px; padding-left:50px;}

 .nav li{float:left}

 .nav li a{display:block; height:30px;text-align:center; line-height:30px; width:120px; margin-left:1px;}

 .nav li a.on, .nav li a:hover{ background-color:#f60; color:#fff;height:70px;margin-top:-30px;line-height:70px;}

 </style>

代码见第七行，效果完美实现。

慕课网视频：点击这里http://www.imooc.com/video/68

目录栏通过javascript产生水平移动的效果：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>导航菜单</title>

<style type="text/css">

* { margin: 0; padding: 0; font-size: 14px; }

a { color: #333; text-decoration: none }

ul { list-style: none; height: 30px; border-bottom: 5px solid #F60; margin-top: 20px; padding-left: 50px; }

ul li { float: left }

ul li a { display: block; height: 30px; text-align: center; line-height: 30px; width:120px; background: #efefef; margin-left: 1px; }

a.on, a:hover { background: #F60; color: #fff; }

</style>

<script>

window.onload=function(){

    var aA=document.getElementsByTagName('a');

    for(var i=0; i<aA.length; i++){

        aA[i].onmouseover=function(){

            var This=this;

            clearInterval(This.time);

            This.time=setInterval(function(){

                    This.style.width=This.offsetWidth+8+"px";

                    if(This.offsetWidth>=160)

                    clearInterval(This.time);

                },30)

        }

        aA[i].onmouseout=function(){

                clearInterval(this.time);

                var This=this;

                this.time=setInterval(function(){

                    This.style.width=This.offsetWidth-8+"px";

                    if(This.offsetWidth<=120){

                        This.style.width='120px';

                        clearInterval(This.time);

                    }

                },30)

        }

    }

}

</script>

</head>

<body>

<ul>

    <li><a class="on" href="#">首　　页</a></li>

    <li><a href="#">新闻快讯</a></li>

<li><a href="#">产品展示</a></li>

    <li><a href="#">售后服务</a></li>

    <li><a href="#">联系我们</a></li>

</ul>

</body>

</html>

效果展示图：点击这里：http://www.zhangjie.site/demo/demo3.html

慕课网链接：点击这里：http://www.imooc.com/video/93

关于CSS样式的那些事_导航条菜单讲解的更多相关文章

  1. amazeui学习笔记--css（常用组件10）--导航条Topbar

    amazeui学习笔记--css(常用组件10)--导航条Topbar 一.总结 1. 导航条:就是页面最顶端的导航条:在容器上添加 .am-topbar class,然后按照示例组织所需内容.< ...

  2. css制作漂亮彩带导航条菜单

    点击这里查看效果:http://keleyi.com/keleyi/phtml/divcss/17.htm 效果图: 以下是源代码: <!DOCTYPE html PUBLIC "-/ ...

  3. Jetpack Compose学习(7)——MD样式架构组件Scaffold及导航底部菜单

    Jetpack Compose学习(7)--MD样式架构组件Scaffold及导航底部菜单 | Stars-One的杂货小窝 Compose给我们提供了一个Material Design样式的首页组件 ...

  4. 利用js和JQuery定义一个导航条菜单

    利用js和JQuery定义一个导航条 效果: 一.html代码: <div class="Maintenance"> <div class="Title ...

  5. 一、HTML和CSS基础--网页布局--实践--导航条菜单的制作

    案例一:导航菜单的制作 垂直菜单

  6. 强制改变css样式优先级

    .list{ left:20px!important; } css !important作用是提高指定CSS样式规则的应用优先权. !important是CSS1就定义的语法,作用是提高指定样式规则的 ...

  7. Bootstrap每天必学之导航条

    http://www.jb51.net/article/75534.htm Bootstrap每天必学之导航条,本文向大家讲解了多种多样的导航条,以及导航条中元素的实现方法,感兴趣的小伙伴们可以参考一 ...

  8. 玩转Bootstrap（基础） -- （6.导航条基础）

    1.导航条样例 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" ...

  9. bootstrap导航条组件

    一.导航条模板(官方文档) <nav class="navbar navbar-default"> <div class="container-flui ...

随机推荐

  1. vultr新用户注册享受50美元优惠码，长期有效

    vultr vps服务器,我用了三年多,购买了几十台vps,性价比非常高. 近期,vutlr推出了最新优惠码DOMORE长期有效,新用户注册账号时候,可在付款方式界面输入这个优惠码,享受50美元余额, ...

  2. 目标检测中proposal的意义

    在目标检测中,从很早就有候选区域的说法,也是在2008年可能就有人使用这个方法,在2014年的卷积神经网络解决目标检测问题的文章中,这个候选框方法大放异彩,先前的目标检测方法主要集中在使用滑动窗口的方 ...

  3. [JS]省市区数据及方法调用

    调用方法: function GetProvinceByid(id) { if (id == null || id == undefined || id == "") return ...

  4. win8 or win7安装ubuntu双系统

    安装双系统的效果 现在使用win和linux双系统,整个环境相当方便好用,比如在Linux系统上,仍能访问NTFS(win的文件系统格式)中的文件和文档,当然win下的一些像matlab.vs等是不能 ...

  5. mysql 查看数据库中所有表的记录数

    use information_schema; SELECT DISTINCT t.table_name, t.engine '表引擎', t.table_rowsFROM TABLES tWHERE ...

  6. Ubuntu14.04安装PHP5

    因为任务需要在Ubuntu14.04的server版本下安装PHP5,所以总结一下   使用root进行安装  要么在前面加上sudo进行安装. apt-get install php5-cgi ap ...

  7. XTU 1249 Rolling Variance

    $2016$长城信息杯中国大学生程序设计竞赛中南邀请赛$G$题 前缀和. 把公式化开来,会发现只要求一段区间的和以及一段区间的平方和就可以了. #pragma comment(linker, &quo ...

  8. EasyUI DataGrid 添加 Footer

    做后台管理界面时,EasyUI 的 DataGrid 经常会被用到,有时候一些总的统计数据不合适放在数据表格里,需要单独显示,这时候就可以放在Footer中显示而不必另外布局. 该怎么给 DataGr ...

  9. 【锋利的Jquery】读书笔记一

    封面镇楼: 读这本书应该是7月份,二周读完,经典的好书,一直没怎么复习.so....温故而知新下. 一.jquery的风格 链式风格 <div class="box"> ...

  10. 关于MongoDB数据库中文件唯一性的问题

    ※重要※——介绍一下我的环境:MongoDB的“win32-x86_64-2008plus-ssl-3.0.5”,MongoVUE版本是1.6.9,VS2010,dll是1.10版本. MongoDB ...