css+html导航栏实例

来源：互联网发布：mac系统入门教程编辑：程序博客网时间：2024/06/10 22:03

.html代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title>导航菜单的制作</title><link rel="stylesheet" type="text/css" href="css/style.css"/></head><body><div id="banner"><ul><li><a href="http://www.baidu.com" target="-blank">home</a></li><li> <a href="">link</a></li><li> <a href="">product</a></li><li> <a href="">phone</a></li><li> <a href="">cat</a></li><li> <a href="">about</a></li></ul></div></body></html>

.css代码如下：

#banner{width:750px;margin:0 auto}#banner{height:30px;background:#ab0;}ul{list-style:none/*去掉前面的点*/}ul li{float:left;/*水平显示*/width:100px;text-align:center;border-right:2px solid #aba;padding-top:5px;height:25px;}a{text-decoration:none;}a:link{color:green;}a:visited{color:red;}a:hover{color:yellow;}

效果如下：

0 0