CSS.导航菜单
1、参考网址:HTML+CSS实战(一)——导航条菜单的制作 - CSDN博客.html(http://blog.csdn.net/mqy1023/article/details/50890594)
2、效果:
ZC:一直想不通,箭头所指的那个一条颜色是哪里来的,刚开始以为是 背景,后来发现不对... 后来 才发现 原来是 ".nav"的"border-bottom"里面 设置的
3、代码:(UTF-8编码)
<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:80px; background:#efefef; margin-left:1px;} .nav li a.on, .nav li a:hover{background:#F60;color:#fff; } </style> </head> <body> <ul class="nav"> <li><a href="#">首 页</a></li> <li><a class="on" href="#">关于我们</a></li> <li><a href="#">产品展示</a></li> <li><a href="#">售后服务</a></li> <li><a href="#">联系我们</a></li> </ul> </body> </html>
4、
5、