CSS无序列表创建的标准菜单效果代码

网页制作 2024/12/24 佚名

2 0 1

蝙蝠岛资源网 Design By www.hbtsch.com

本文实例讲述了CSS无序列表创建的标准菜单效果代码。分享给大家供大家参考。具体如下：

这是一款用LI无序列表创建的标准CSS菜单，这是国外一个网站的CSS制作教程，这里重新整理了一下，去除了广告代码，兼容性不错，在IE6/IE7/IE8、火狐下都表现很好，研究CSS的朋友请注意一些CSS的用法，很新颖。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/css-list-menu-style-codes/

具体代码如下：

复制代码代码如下:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS菜单</title>
<style type="text/css">
html,body {
margin:0;
padding:0;
color:#222;
background:#fff;
}
body {
padding:10px;
font:76%/150% Verdana, Arial, sans-serif;
}
#nav {
margin:0;
padding:0;
background:#808259;
width:100%;
float:left;
border:1px solid #42432d;
border-width:1px 0;
}
#nav li {
display:inline;
padding:0;
margin:0;
}
#nav a:link,#nav a:visited {
color:#000;
background:#b2b580;
padding:20px 40px 4px 10px;
float:left;
width:auto;
border-right:1px solid #42432d;
text-decoration:none;
font:bold 1em/1em Arial, Helvetica, sans-serif;
text-transform:uppercase;
text-shadow: 2px 2px 2px #555;
}
#nav a:hover {
color:#fff;
background:#727454;
}
#nav li:first-child a {
border-left:1px solid #42432d;
}
#home #nav-home a,
#about #nav-about a,
#archive #nav-archive a,
#lab #nav-lab a,
#reviews #nav-reviews a,
#contact #nav-contact a {
background:#e35a00;
color:#fff;
text-shadow:none;
}
#home #nav-home a:hover,
#about #nav-about a:hover,
#archive #nav-archive a:hover,
#lab #nav-lab a:hover,
#reviews #nav-reviews a:hover,
#contact #nav-contact a:hover {
background:#e35a00;
}
#nav a:active {
background:#e35a00;
color:#fff;
}
</style>
</head>
<body id="home">
<ul id="nav">
<li id="nav-home"><a href="#">我的博客</a></li>
<li id="nav-about"><a href="#">日志排行</a></li>
<li id="nav-archive"><a href="#">日志存档</a></li>
<li id="nav-lab"><a href="#">我的书库</a></li>
<li id="nav-reviews"><a href="#">活动图集</a></li>
<li id="nav-contact"><a href="#">联系我们</a></li>
</ul>
</div>
</body>
</html>

希望本文所述对大家的CSS网页设计有所帮助。

CSS,无序列表,标准菜单

标签：

CSS,无序列表,标准菜单

蝙蝠岛资源网 Design By www.hbtsch.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

蝙蝠岛资源网 Design By www.hbtsch.com

评论“CSS无序列表创建的标准菜单效果代码”

暂无CSS无序列表创建的标准菜单效果代码的评论...

www.hbtsch.com 蝙蝠岛资源网

139,976影音资源

144,792福利资源

21,817软件资源

631,128技术资源

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

2024年12月24日

CSS无序列表创建的标准菜单效果代码

CSS,无序列表,标准菜单

CSS实现五颜六色按钮组成的导航条效果代码

CSS实现带倒三角标记的WEB标准菜单效果代码

评论“CSS无序列表创建的标准菜单效果代码”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接