关于CSS样式的那些事_导航条菜单讲解
最近开始忙着开自己的个人博客了,自己的前端确实是渣渣。没办法,一步步来,从慕课网上慢慢学着先。
首先带来的是一个导航栏的设计:
垂直导航栏的设计:
直接上代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>导航菜单</title> 6 <style> 7 *{margin:0; padding:0; font-size:14px;} 8 ul{list-style:none;width:100px;} 9 a{text-decoration:none;line-height:30px;width:100px;background-color:#ccc;margin-bottom:1px;text-indent:10px;display:block;} 10 a:hover{background-color:#F30;color:#FFFS;} 11 </style> 12 </head> 13 <body> 14 15 <ul class="nav"> 16 <li><a href="#">首 页</a></li> 17 <li><a href="#">新闻快讯</a></li> 18 <li><a href="#">产品展示</a></li> 19 <li><a href="#">售后服务</a></li> 20 <li><a href="#">联系我们</a></li> 21 </ul> 22 23 </body> 24 </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样式:
1 <style> 2 *{margin:0; padding:0; font-size:14px;} 3 ul{list-style:none;width:100px;} 4 a{text-decoration:none;line-height:30px;width:100px;background-color:#ccc;margin-bottom:1px;text-indent:10px;display:block;} 5 a:hover{background-color:#F30;color:#FFFS;} 6 </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
水平导航栏
想想刚刚看完垂直导航栏,那么水平导航栏的原理也是差不多咯,答案是确实的!
来来来,先上代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>导航菜单</title> 6 <style> 7 *{margin:0; padding:0; font-size:14px;} 8 ul{list-style:none;} 9 li{float:left;} 10 a{text-decoration:none;line-height:30px;width:100px;background-color:#ccc;margin-bottom:1px;text-align:center;display:block;} 11 a:hover{background-color:#F30;color:#FFFS;} 12 </style> 13 </head> 14 <body> 15 16 <ul class="nav"> 17 <li><a href="#">首 页</a></li> 18 <li><a href="#">新闻快讯</a></li> 19 <li><a href="#">产品展示</a></li> 20 <li><a href="#">售后服务</a></li> 21 <li><a href="#">联系我们</a></li> 22 </ul> 23 24 </body> 25 </html>
两个代码的区别在那里呢?这个是完完全全由css样式来决定的,让我们看看这次的css有那些不同:
1 <style> 2 *{margin:0; padding:0; font-size:14px;} 3 ul{list-style:none;} 4 li{float:left;} 5 a{text-decoration:none;line-height:30px;width:100px;background-color:#ccc;margin-bottom:1px;text-align:center;display:block;} 6 a:hover{background-color:#F30;color:#FFFS;} 7 </style>
首先变化的是将ul中的100px像素的宽度限制给取消了,这样子给了目录浮动的横向空间。
然后是给我们的li的标签添加了一个左浮动的效果。
当然,打开浏览器一看,这个时候已经是水平导航栏了,确实是挺快的!
不过还是有些小问题的,我们将以前的字体左移动效果给去掉了,然后给添加上居中的效果(text-align:center)这样子就变得好看多了,棒棒哒
慕课网视频链接:(点击这里)http://www.imooc.com/video/66/0
说完垂直目录和水平目录,好像目录的事情就到此为止了。的确,一般这两种目录就够用了,还有其他的一些特殊的目录我们也都是通过调整它的css样式来实现的。
当然,下边我们谈论的一个主题是如何给自己的博客导航栏添加一个背景,先上图吧,给大家看看一个效果。(点击这里):http://www.zhangjie.site/demo/demo1.html
那么我先将源代码贴出来咯,给大家看看。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>导航菜单</title> 6 <style type="text/css"> 7 *{margin:0; padding:0; font-size:14px;} 8 a{color:#333;text-decoration:none} 9 .nav{list-style:none; height:30px; border-bottom:10px solid #F60; margin-top:20px; padding-left:50px;} 10 .nav li{float:left} 11 .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;} 12 .nav li a.on, .nav li a:hover{ background-position:0 -30px; color:#fff;} 13 </style> 14 15 </head> 16 <body> 17 18 <ul class="nav"> 19 <li><a class="on" href="#">首 页</a></li> 20 <li><a href="#">新闻快讯</a></li> 21 <li><a href="#">产品展示</a></li> 22 <li><a href="#">售后服务</a></li> 23 <li><a href="#">联系我们</a></li> 24 </ul> 25 26 </body> 27 </html>
首先讲解一下原理:在这里采用的方式是给自己的网页进行一个贴图效果,一张圆角矩形的图片,上边是背景色白色,下边是聚焦后的橘黄色,通过上下平移的方式来实现不同背景的效果。
那么我们开始分析html代码。首先看看,html是完全相同的,都只是css样式发生了改变。贴上css看看
1 <style type="text/css"> 2 *{margin:0; padding:0; font-size:14px;} 3 a{color:#333;text-decoration:none} 4 .nav{list-style:none; height:30px; border-bottom:10px solid #F60; margin-top:20px; padding-left:50px;} 5 .nav li{float:left} 6 .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;} 7 .nav li a.on, .nav li a:hover{ background-position:0 -30px; color:#fff;} 8 </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
那么如何实现呢?
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>导航菜单</title> 6 <style type="text/css"> 7 *{margin:0; padding:0; font-size:14px;} 8 a{color:#333;text-decoration:none} 9 .nav{list-style:none; height:30px; border-bottom:10px solid #F60; margin-top:20px; padding-left:50px;} 10 .nav li{float:left} 11 .nav li a{display:block; height:30px;text-align:center; line-height:30px; width:120px; margin-left:1px;} 12 .nav li a.on, .nav li a:hover{ background-color:#f60; color:#fff;height:70px;margin-top:-30px;line-height:70px;} 13 </style> 14 15 </head> 16 <body> 17 18 <ul class="nav"> 19 <li><a class="on" href="#">首 页</a></li> 20 <li><a href="#">新闻快讯</a></li> 21 <li><a href="#">产品展示</a></li> 22 <li><a href="#">售后服务</a></li> 23 <li><a href="#">联系我们</a></li> 24 </ul> 25 26 </body> 27 </html>
那么这里的css就是先去掉先前贴图效果,然后给选中效果加上向上平移属性,当然,这个时候有点小问题,所以又有一个margin-top有40px的效果。最后给文章一个居中就好了,也就是这个代码:
1 <style type="text/css"> 2 *{margin:0; padding:0; font-size:14px;} 3 a{color:#333;text-decoration:none} 4 .nav{list-style:none; height:30px; border-bottom:10px solid #F60; margin-top:20px; padding-left:50px;} 5 .nav li{float:left} 6 .nav li a{display:block; height:30px;text-align:center; line-height:30px; width:120px; margin-left:1px;} 7 .nav li a.on, .nav li a:hover{ background-color:#f60; color:#fff;height:70px;margin-top:-30px;line-height:70px;} 8 </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