详解一级导航的制作
发布时间:2017-01-10 14:23:32 作者:Samcc 我要评论
本文主要分享了简单导航栏的制作方法。具有一定的参考价值,下面跟着小编一起来看下吧
今天分享一下简单导航栏的制作方法:
第一步:引入css样式表,新建一个id为nav的层,使用<ul>、<li>、<a>标签来制作完成效果。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/yiji.css"/> </head> <body> <div id="nav"> <ul> <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> </div> </body> </html>
第二步设置CSS样式:
1.设置nav的属性
#nav{ width: 500px; height: 50px; border: 1px solid red; }
展示效果如下所示:
2.清除<ul>标签前面自带的点
#nav ul{ list-style: none; }
3.设置<ul>下包含的<a>标签的属性
#nav ul li a{ width: 98px; height: 50px; float: left; border: 1px solid red; text-align: center; line-height: 50px; text-decoration: none; }
4.设置鼠标滑过效果
#nav ul li a:hover{ background-color: #ABCDEF; }
最终效果:
完整HTML代码部分:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/yiji.css"/> </head> <body> <div id="nav"> <ul> <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> </div> </body> </html>
完成CSS样式代码部分:
*{ margin: 0; padding: 0; } #nav{ width: 500px; height: 50px; border: 1px solid red; margin: 30px; } #nav ul{ list-style: none; } #nav ul li a{ width: 98px; height: 50px; float: left; border: 1px solid red; text-align: center; line-height: 50px; text-decoration: none; } #nav ul li a:hover{ background-color: #ABCDEF; }
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!
相关文章
- 这篇文章主要为大家详细介绍了css制作黑色经典导航下拉菜单的相关代码,大气简单,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2016-03-15
- 这篇文章主要介绍了基于CSS制作天蓝色导航菜单 ,效果非常清新,时尚大方,为网站增添亮点,感兴趣的小伙伴们可以参考一下2016-03-08
- 本篇文章给大家分享基于html和CSS3制作简单侧边导航栏,效果简单大方,需要的朋友可以从参考下2016-02-25
- 这篇文章主要介绍了基于CSS3制作立体效果导航菜单的相关资料,需要的朋友可以参考下2016-01-12
- 本篇文章给大家分享基于html和CSS3制作酷炫的导航栏,效果非常美观,需要的朋友可以从参考下2015-09-23
- 这篇文章主要为大家介绍了基于css3的属性transition制作菜单导航效果,可实现鼠标滑过菜单项动态改变背景滑块的功能,基于css3的属性transition实现,非常具有实用价值,需要的2015-09-01
- 这篇文章主要介绍了使用CSS3制作响应式导航菜单的方法,这种菜单在移动端的网页制作中也经常能够用到,需要的朋友可以参考下2015-07-12
- 本文介绍了使用css3制作动感导航条示例,纯CSS没有使用JS,没有图片的导航条。用到了CSS3的Transition、box-shadow、linear-gradient2014-01-26
- 无需任何JS代码即可实现菜单项的鼠标悬停动态效果,高贵典雅,不可多得2013-07-17
CSS3+jQuery制作的鼠标滑过带有动态效果的一级导航菜单
虽然只是一个一级导航菜单,但是可以通过JS代码控制鼠标滑过菜单时的动态展示效果2013-06-24
最新评论