您现在的位置： 万盛学电脑网 >> 程序编程 >> 网页制作 >> DivCSS教程 >> 正文
CSS实现有立体感的横向按钮式菜单效果代码介绍
作者：佚名 责任编辑：admin 更新时间：2022-06-22
欢迎大家在这里学习CSS实现有立体感的横向按钮式菜单效果代码!下面是我们给大家整理出来的精彩内容。希望大家在这里学习!
<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>
- 上一个程序编程： CSS编写中灵活运行注释的意义是什么
- 下一个程序编程： CSS实现带有小图片的LI图标列表菜单代码介绍
