CSS完成有立体式感的横向按钮式菜单实际效果编

日期:2021-01-20 类型:科技新闻 

关键词:抠图换背景,免费的抠图软件,美图抠图,手机抠图软件哪个好,p图软件哪个好用

本文案例讲述了CSS完成有立体式感的横向按钮式菜单实际效果编码。共享给大伙儿供大伙儿参照。实际以下:

这是1款横向有立体式感的CSS按钮式菜单,选用了CSS常见的UL/LI构造,合理布局便捷,将LI界定为按钮款式,电脑鼠标放上后显示信息出立体式实际效果,总体视觉效果体验舒适,编码适配性好,简约高效率。

运作实际效果截图以下:

线上演试详细地址以下:

http://demo.jb51.net/js/2015/css-r⑶d-style-button-menu-codes/

实际编码以下:


拷贝编码
编码以下:
<!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="#">官方blog</a></li>
<li class="articles"><a href="#">友谊连接</a></li>
<li class="buy"><a href="#">联络大家</a></li>
</ul>
</div>
</body>
</html>

期待本文所述对大伙儿的css网页页面设计方案有一定的协助。