添加收藏
 系统管理
 联系方式
  汉南在线网页设计HTML/CSS

兰色背景变换的CSS导航菜单
作  者:匿名
关键字:CSS、DIV



<!-- 把下列代码加入到head区内 -->
<style>#button {
width: 150px;
border-right: 1px solid #000;
padding: 0 0 1em 0;
margin-bottom: 1em;
font-family: 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
font-size: 90%;
background-color: #90bade;
color: #333;
}

#button ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
}

#button li {
border-bottom: 1px solid #90bade;
margin: 0;
}

#button li a {
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 10px solid #1958b7;
border-right: 10px solid #508fc4;
background-color: #2175bc;
color: #fff;
text-decoration: none;
width: 100%;
}

html>body #button li a {
width: auto;
}

#button li a:hover {
border-left: 10px solid #1c64d1;
border-right: 10px solid #5ba3e0;
background-color: #2586d7;
color: #fff;
}
</style>
<!-- 把下列代码加入到body区内 -->
<div id="button">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Toys and Games</a></li>
<li><a href="#">Computers</a></li>
<li><a href="#">Electronics</a></li>
<li><a href="#">Furniture</a></li>
<li><a href="#">Outdoors</a></li>
<li><a href="#">Home Appliances</a></li>
</ul>
</div>



来源:网络
阅读:8
日期:2008-5-12

【 双击滚屏 】 【 推荐朋友 】 【 收藏 】 【 打印 】 【 关闭 】 【 字体: 】 
上一篇:普通的导航链接条,但是加了CSS效果
下一篇:鼠标指向有背景的CSS导航菜单

  >> 相关文章
 
  ·普通的导航链接条,但是加了CSS效果
  ·根据不同的浏览器调用不同的CSS设置
  ·CSS使用大全
  ·用鼠标感应来改变某个按钮的CSS属性
  ·用点击来改变文字或者图片的CSS属性
  ·用CSS滤镜打开图片的各种效果
  ·网页教学网构建DIV+CSS网页菜单代码(8)
  ·标准的选项卡代码特效

5.12汶川大地震遇难同胞默哀 | 汉南在线总站 | 免费电影 | BT电影下载 | 东莞信息网 | 流行购商城

授权使用:汉南在线 http://hnzx.hzwz.net/
经营许可证:陕ICP备05000109号 Powered by:汉南在线
Copyright (c) 2002-2007 汉南在线. All Rights Reserved .