网络技术 > WEB技术
圆角百分之五十菜单
分类:WEB技术    时间:2014-05-13    浏览:3930次
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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;
Copyright © 2014-2020 XfengNet.COM Inc. All Rights Reserved. 苏ICP备08014032号
返回顶部