列表导航栏实例（01）

380071587

浏览: 467223 次
性别:
来自: 上海

最近访客更多访客>>

libian339

u012363178

billowliu2

月亮不懂夜的黑

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

【步骤1】无样式

一、效果

二、HTML

<!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" />
    <title>列表与导航栏</title>
</head>
<body>
    <ul>
        <li><a href="#">home</a></li>
        <li><a href="#">about us</a></li>
        <li><a href="#">products</a></li>
        <li><a href="#">services</a></li>
        <li><a href="#">contact</a></li>
    </ul>
</body>
</html>

【步骤2】基本样式

一、效果

二、HTML

<!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" />
    <title>列表与导航栏</title>
    <link href="css/navigation.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <ul>
        <li><a href="#">home</a></li>
        <li><a href="#">about us</a></li>
        <li><a href="#">products</a></li>
        <li><a href="#">services</a></li>
        <li><a href="#">contact</a></li>
    </ul>
</body>
</html>

三、CSS

*{
    margin:0; 
    padding:0;
    }
body{
    font:11px Verdana, Geneva, sans-serif; 
    background:#666;
    }
ul{
    list-style:none;
    }

【步骤3】横向导航条

一、效果

二、HTML

<ul id="nav">
    <li><a href="#">home</a></li>
    <li><a href="#">about us</a></li>
    <li><a href="#">products</a></li>
    <li><a href="#">services</a></li>
    <li><a href="#">contact</a></li>
</ul>

三、CSS

#nav
{
margin-top: 50px;
overflow: hidden;
height: 1%;
background: url(../images/nav-bg.png) repeat-x;
text-transform: capitalize;
}
#nav li
{
float: left;
background: url(../images/line.gif) no-repeat center right;
padding-right: 1px;
}
#nav li a
{
display: block;
height: 30px;
line-height: 30px;
padding: 0 20px;
color: black;
text-decoration: none;
}
#nav li a:hover
{
background: url(../images/nav-bg.png) repeat-x left bottom;
color: white;
}

【说明】

margin-top: 50px;

导航条与页面顶端距离50px;

overflow: hidden;
内容会被修剪，并且其余内容是不可见的

height: 1%;
高度是父元素的1%，父元素未设置高度值时，不起作用，实际高度由内部元素a决定。在这里，与overflow: hidden;联用，消除IE低版本的某些bug吧。

background: url(../images/line.gif) no-repeat center right;

竖线分隔图片右侧居中

padding-right: 1px;

右侧内部填充1px，这是给竖线分隔图片留下的位置

background: url(../images/nav-bg.png) repeat-x left bottom;

left bottom相当于0 -30px

【技术要点】

列表导航栏的大小由三层标签决定，最里层标签是a，高度是30px，宽度=20px+文字宽度+20px；第二层是li，宽度=a的宽度+1px，高度30px是由a决定的；最外一层是<ul id="nav">宽度100%，高度30px是由li决定的。

【附图】

line.gif

nav-bg.png

分享到：

打造自己的reset.css | 良好的XHTML规则

2012-09-01 12:23
浏览 188
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论