上一篇
下一篇
div+css新手实例：横向导航菜单
日期:2009-07-12作者:woniu
上次发了个新闻列表的实例，它只是个框架结构，很简单，想好看还要修饰，但是很实用，大部分的网页都会用到，一些变换绚丽的效果也是以此为基础的。今天再发另外一个网页的重要元素的实例：横线导航菜单的实例。通常这类菜单都用的是ul、li标签来实现的，通过css来强制改变他们的排列方向和元素之间的间隔。达到我们想要的效果。
HTML代码
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
Xhtml代码：
Example Source Code
<div id="nav">
<ul>
<li><a href="http://www.woaicss.com/">Home</a></li>
<li><a href="http://www.woaicss.com/">Div+CSS</a></li>
<li><a href="http://www.woaicss.com/">hack</a></li>
<li><a href="http://www.woaicss.com/">photoshop </a></li>
<li><a href="http://www.woaicss.com/">javascript</a></li>
<li><a href="http://www.woaicss.com/">Web标准</a></li>
<li><a href="http://www.woaicss.com/">XHTML教程</a></li>
</ul>
</div>
说明：我们在css代码的命名规范中说过，一般导航名称用nav,所以我们外层用一个id为nav的层。ul，li无序列表默认的是竖着排列的，可通过css（display:inline）使其横向排列。
css代码：
Example Source Code
#nav {
height: 30px;
width: 100%;
background-color: #c00;
}
#nav ul {
margin: 0 0 0 30px;
padding: 0px;
font-size: 12px;
color: #FFF;
line-height: 30px;
white-space: nowrap;
}
#nav li {
list-style-type: none;
display: inline;
}
#nav li a {
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
padding: 7px 10px;
color: #FFF;
}
#nav li a:hover {
color: #ff0;
background-color: #f00;
}
这个导航很简单，但它是其它导航菜单的雏形，也是基础。
HTML代码[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
Xhtml代码：
Example Source Code <div id="nav">
<ul>
<li><a href="http://www.woaicss.com/">Home</a></li>
<li><a href="http://www.woaicss.com/">Div+CSS</a></li>
<li><a href="http://www.woaicss.com/">hack</a></li>
<li><a href="http://www.woaicss.com/">photoshop </a></li>
<li><a href="http://www.woaicss.com/">javascript</a></li>
<li><a href="http://www.woaicss.com/">Web标准</a></li>
<li><a href="http://www.woaicss.com/">XHTML教程</a></li>
</ul>
</div>
说明：我们在css代码的命名规范中说过，一般导航名称用nav,所以我们外层用一个id为nav的层。ul，li无序列表默认的是竖着排列的，可通过css（display:inline）使其横向排列。
css代码：
Example Source Code #nav {
height: 30px;
width: 100%;
background-color: #c00;
}
#nav ul {
margin: 0 0 0 30px;
padding: 0px;
font-size: 12px;
color: #FFF;
line-height: 30px;
white-space: nowrap;
}
#nav li {
list-style-type: none;
display: inline;
}
#nav li a {
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
padding: 7px 10px;
color: #FFF;
}
#nav li a:hover {
color: #ff0;
background-color: #f00;
}
这个导航很简单，但它是其它导航菜单的雏形，也是基础。
[本日志由 woniu 于 2009-07-12 08:50 PM 编辑]
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags: div菜单导航css导航实例新手实例
相关日志:
文章来自: 本站原创引用通告: 查看所有引用 | 我要引用此文章Tags: div菜单导航css导航实例新手实例相关日志:
评论: 0 | 引用: 0 | 查看次数: -
发表评论