您的位置：网站首页 > 网络营销 > 网站制作 > CSS实现有立体感的横向按钮式菜单效果代码
CSS实现有立体感的横向按钮式菜单效果代码
来源： 日期：2015-11-16 23:05:23 人气：标签： 
本文实例讲述了css实现有立体感的横向按钮式菜单效果代码。分享给大家供大家参考。具体如下：
这是一款横向有立体感的css按钮式菜单，采用了css常用的ul/li结构，布局方便，将li定义为按钮样式，鼠标放上后显示出立体效果，整体视觉体验舒服，代码兼容性好，简洁高效。
运行效果截图如下：
具体代码如下：
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en"
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>横向有立体感的css按钮式菜单</title>
<style>
#navigation {
font-family: arial, helvetica, sans-serif;
font-size: 9pt;
}
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
padding-top: 4px;
}
#navigation li {
display: inline;
}
#navigation a:link, #navigation a:visited {
margin-right: 2px;
padding: 3px 10px 2px 10px;
color: #a62020;
background-color: #fce6ea;
text-decoration: none;
border-top: 1px solid #ffffff;
border-left: 1px solid #ffffff;
border-bottom: 1px solid #717171;
border-right: 1px solid #717171;
}
#navigation a:hover {
border-top: 1px solid #717171;
border-left: 1px solid #717171;
border-bottom: 1px solid #ffffff;
border-right: 1px solid #ffffff;
}
</style>
</head>
<body id="contact">
<div id="navigation">
<ul>
<li class="recipes"><a href="#">脚本之家</a></li>
<li class="contact"><a href="#">脚本下载</a></li>
<li class="articles"><a href="#">网页特效</a></li>
<li class="articles"><a href="#">官方博客</a></li>
<li class="articles"><a href="#">友情链接</a></li>
<li class="buy"><a href="#">联系我们</a></li>
</ul>
</div>
</body>
</html>
希望本文所述对大家的css网页设计有所帮助。
相关文章
- 上一篇： HTML版的贪吃蛇
- 下一篇： CSS实现带有小图片的LI图标列表菜单
0731-85579057 ，
