圆角百分之五十菜单
WEB技术 2023-05-13 5807次
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>圆角百分之五十菜单</title>
<style type="text/css">
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
.main {
width:100%;
max-width:640px;
margin:0 auto;
}
ul, li {
margin:0;
padding:0;
list-style:none;
}
.meun {
width:100%;
}
.meun ul {
padding-left:10px;
clear:both;
}
.meun li {
float:left;
width:50%;
margin-left:10px;
margin-bottom:10px;
}
.meun .index, .meun .news {
margin-left: -10px;
}
.meun .pro, .meun .lianxi {
margin-bottom: 10px;
}
.meun ul li a {
display:block;
padding:20px 20px;
-webkit-border-radius: 8px;
border-radius:8px;
background:#F60;
}
a {
text-decoration:none;
color:#fff;
font-weight:bold;
}
.c{ clear:both;}
</style>
</head>
<body>
<div class="main">
<div class="meun">
<ul>
<li class="index"><a href="#">首页</a></li>
<li class="pro"><a href="#">产品展示</a></li>
<li class="news"><a href="#">新闻动态</a></li>
<li class="lianxi"><a href="#">联系我们</a></li>
</ul>
<div class="c"></div>
</div>
</div>
</body>
</html>
边框，圆角，投影，半透明背景，描边字体
border: 1px solid #ccc;
-webkit-border-radius: 8px;
border-radius:8px;
box-shadow: 1px 1px 5px rgba(0,0,0,0.3);
filter:alpha(Opacity=80);
-moz-opacity:0.8;
opacity: 0.8;
background: rgba(0,0,0,0.5);
text-shadow: 1px 1px #819e5f, -1px 0px 0px #819e5f, 0px 1px 0px #819e5f, 0px -1px 0px #819e5f;
上一篇：一段css的例子