关于CSS样式的那些事_导航条菜单讲解
2015-11-07 23:23
543 查看
最近开始忙着开自己的个人博客了,自己的前端确实是渣渣。没办法,一步步来,从慕课网上慢慢学着先。
首先带来的是一个导航栏的设计:
垂直导航栏的设计:
直接上代码:
实现代码
那么这里的css就是先去掉先前贴图效果,然后给选中效果加上向上平移属性,当然,这个时候有点小问题,所以又有一个margin-top有40px的效果。最后给文章一个居中就好了,也就是这个代码:
代码见第七行,效果完美实现。
慕课网视频:点击这里http://www.imooc.com/video/68
目录栏通过javascript产生水平移动的效果:
效果展示图:点击这里:http://www.zhangjie.site/demo/demo3.html
慕课网链接:点击这里:http://www.imooc.com/video/93
首先带来的是一个导航栏的设计:
垂直导航栏的设计:
直接上代码:
<!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 属性 overflow 深入理解学习笔记
- CSS盒子模型
- 关于html中CSS的小结
- 手机css3动画与animate动画流畅度比较
- CSS学习笔记之<meta标签>
- CSS学习笔记之<z-index属性>
- CSS学习笔记之<!important>
- base.css
- Html+Css__HTML元素的ID和Name属性的区别
- 顶部标题栏(四)自定义ActionBar风格和样式
- CSS+DIV兼容性问题
- 【回顾整理】HTML+CSS个的两个实战项目
- CSS3入门之转换
- recyclerview设置布局样式
- CSS3绘制不规则图形的一些方法示例
- CSS样式--实际开发总结
- CSS样式--实际开发总结
- [转]css样式加载顺序及覆盖顺序深入理解
- 7个你可能不认识的css单位
- css input[type=file] 样式美化,input上传按钮美化