网页设计师联盟

--- 学习、交流、展示、资源

招聘精英个人求职网站发布网友作品网页特效动画欣赏网页素材免费资源源码下载设计软件
作品欣赏       域名申请       虚拟主机
网页设计师

  • 新闻资讯
  • 网页教程
  • 平面教程
  • 程序设计
  • 视频教程
  • Flash教程

网页设计师站提供网页设计程序设计服务 E-mail:liangfeng0526@qq.com

 您当前的位置:首页 > 阅读文章
网页设计师联盟(www.wysjs.cn)欢迎您!
 标题:

兰色背景变换的CSS导航菜单

<!-- 把下列代码加入到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>

  • (刊登方式:转载   来源:网络   作者:   添加:admin   关键词:)
  • 您已阅读:兰色背景变换的CSS导航菜单 您还可以继续阅读↓  或 回到首页看看>>>
  • 上一篇DIV CSS制作的符合标准的网页导航菜单(12)

    <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;chars..

  • 下一篇鼠标指向有背景的CSS导航菜单

    <!--把下列代码加入到head区内--><style>#borderlinksa{padding-left:4px;display:block;width:150px;color:black;text-decoration:none;border:1pxsolidwhite;} #borderlinksa:hover{border:1pxsolidblack;background-color:lightyellow;}</style> <!--把下列代码加入到b..