css-横向导航 

<!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" />
<link rel="stylesheet" href="demo.css"  type="text/css"/>
<title>横向导航</title>
</head>

<body>

<ul id="nav">
    <li ><a href="#" id="current">导航1</a></li>
    <li><a href="#">导航2</a></li>
    <li><a href="#">导航3</a></li>
    <li><a href="#">导航4</a></li>
    <li><a href="#">导航5</a></li>
</ul>
</body>
</html>

css

#nav{
padding-left:0px;
    
    list-style:none;/*去掉ul前面的样式，默认为黑点*/
    float:left;/*向左浮动，那么nav将不会占据一样*/
    height:26px;
    border-bottom:2px solid #00FF00;/*设置nav的底框的样式*/
}
#nav li{
    float:left;/*li元素浮动向右排成一行*/
    
    
}
#nav li a{
    
    color:#666666;/*设置a颜色*/
    display:block;/*让a以块的形式显示，这个很重要*/
    margin-left:2px;/*左边距为2px为了让每个a元素之间有空隙*/
    width:97px;/*设置宽度*/
    height:22px;/*设置高度*/
    text-align:center;/*设置文本对齐方式为居住*/
    background-color:#CCCCCC;/*设置背景颜色*/
    padding-top:4px;/*上内边距为4为了显示的好看点*/
}
#nav li a:hover{
    background-color:#333333;/*设置鼠标放在a时的背景颜色*/
    color:#FF0000;/*字体颜色*/
}
#nav li a#current{
    background-color:#00FF00;/*id为current的背景颜色*/
    color:#FFFFFF;/*字体颜色*/
}

posted on 2011-08-07 21:05  帘  阅读(2041)  评论(0)  编辑  收藏  举报

导航