用CSS创建导航菜单的两个例子

2009-12-16 01:38| 发布者: admin| 查看: 29| 评论: 0|原作者: 小寳寳

　　原创教程，转载请注明出处：情缘科技
用CSS创建导航菜单的两个例子
　　现在使用CSS+XHTML制作网页，通常网页需要导航，导航通常有两种：水平和垂直。
　　1.垂直导航的例子：(单击此处浏览演示效果)
　　(1)CSS文件：(保存为vertical.css)
h1, h2
{
font: normal 200%/100% Garamond, "宋体", serif;
margin-bottom: 0px;
color: #630;
background: transparent;
}

h2
{
font-size: 150%;
}

#header
{
padding: 5px;
border-bottom: #ccc 1px solid;
}

#main
{
margin-left: 210px;
padding: 5px;
}

#footer
{
clear: both;
padding: 5px;
border-top: #ccc 1px solid;
}

#navigation
{
float: left;
width: 200px;
padding: 5px;
}

#navigation ul
{
margin-left: 0;
padding-left: 0;
list-style-type: none;
font-family: 宋体
}

#navigation a, li#current
{
display: block;
width: 180px;
text-decoration: none;
padding: 5px;
border-bottom: #fff solid 1px;
background-color: #630;
color: #fff;
}

#navigation a:hover, #navigation a:active, #navigation a:focus, li#current
{
background-color: #c90;
color: #000;
}

　　(2)完整的HTML文件：(保存为vertical.htm)
PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Vertical Navigation

首页

声明：1) 本站不保证所提供软件或教程的完整性和安全性。2) 请在使用前查毒,下载相应阅读器。4) 转载本站提供的资源请勿删除本说明文件。5) 本站提供的程序均为网上搜集，如果该程序涉及或侵害到您的版权请立即写信通知我们。6) 本站提供软件只可供研究使用，请在下载24小时内删除, 切勿用于商业用途，由此引起一切后果与本站无关。本站提供服务项目为您建站网上商城英汉翻译广告投放程序开发素材出售注：推荐使用：WinRAR V3.0以上版本解压本站软件解压密码：www.ninedns.com 情缘科技: http://www.ninedns.com论坛: http://www.ninedns.com/bbs

　　2.水平导航的例子：(单击此处浏览演示效果)
　　(1)CSS文件：(保存为horizontal.css)
h1, h2
{
font: normal 200%/100% Garamond, "宋体", serif;
margin-bottom: 0px;
color: #630;
background: transparent;
}

h2
{
font-size: 150%;
}

#header
{
padding: 5px;
border-bottom: #ccc 1px solid;
}

#main
{
margin-left: 210px;
padding: 5px;
}

#footer
{
clear: both;
padding: 5px;
border-top: #ccc 1px solid;
}

#navigation
{
float: left;
width: 200px;
padding: 5px;
}

#navigation ul
{
margin-left: 0;
padding-left: 0;
list-style-type: none;
font-family: 宋体
}

#navigation a, li#current
{
display: block;
width: 180px;
text-decoration: none;
padding: 5px;
border-bottom: #fff solid 1px;
background-color: #630;
color: #fff;
}

#navigation a:hover, #navigation a:active, #navigation a:focus, li#current
{
background-color: #c90;
color: #000;
}
　　(2)完整的HTML文件：(保存为horizontal.htm)
PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Vertical Navigation

首页

　　通过以上两个例子希望您对CSS有更深入的了解！

收藏分享邀请

		自动登录	找回密码
密码			注册

用CSS创建导航菜单的两个例子

情缘科技用CSS制作的垂直导航菜单

首页

首页

最新评论

相关分类