导航栏,又名菜单栏,国内几乎每个网站都有导航栏,导航栏基本上已经成为了网站不可缺少的一部分了东西了。导航栏也是网站的眼睛部位,想看什么栏目,可以直接在导航栏里面查找。
效果图展示:
说明:其中主要是以ul/li标签和鼠标监听hover。有鼠标放上去更换颜色和盒子的背景颜色,有点击后的效果,和鼠标放上去的效果
演示图例:
代码演示:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } ul{ width: 960px; height: 40px; background-color: green; margin: 100px auto; } ul li{ list-style: none; /*list-style: none;去掉小圆点*/ width: 120px; height: 40px; float: left; background-color: purple; text-align: center; /*水平居中*/ line-height: 40px; /*上下居中*/ } ul li a{ width: 120px; height: 40px; display: inline-block; /*display: inline-block;转换模式,原来是行内元素*/ } ul li a:link{ color:white; text-decoration: none; background-color: pink; } ul li a:hover{ color:red; background-color: #cccccc; } ul li a:active{ color: yellow; } </style> </head> <body> <!--ul>(li>a)*8--> <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> <li><a href="#">我是导航</a></li> <li><a href="#">我是导航</a></li> <li><a href="#">我是导航</a></li> </ul> </body> </html>
以上代码可以直接复制使用,注意删除注释内容;
本文来自:www.zbck123.com宗九尘原文