导航栏和背景半透明
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
a{
display: inline-block;
background-image: url(images/dao01.png);
margin:6px 2px;
width: 100px;
height: 40px;
color: white;
font-size: 16px;
line-height: 40px;
text-align: center;
border-radius: 15px;
text-decoration: none;
}
a:hover{
background-image: url(images/dao02.png);
color: black;
}
.clearfix{
clear: both;
content:'';
display: block;
}
.nav{
width: 600px;
height: 50px;
margin: 10px auto;
background-color: rgba(0,0,0,0.15);
}
body{
background-image: url(images/03.png);
}
</style>
</head>
<body>
<div class="nav ">
<a href="" style="margin-left: 30px">设为首页</a>
<a href="">精彩活动</a>
<a href="">特色服务</a>
<a href="">关于我们</a>
<a href="">联系方式</a>
</div>
</body>
</html>
仿新浪导航栏（不完整）
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
a{
text-decoration: none;
color: black;
}
.fl{
float: left;
}
.fr{
float: right;
}
.nav{
width: 1200px;
margin: 0 auto;
background-color: #fff5ee;
}
.nav div a{
display: inline-block;
height: 50px;
line-height: 50px;
font-size: 14px;
padding:0 18px;
}
.nav div a:hover{
color: white;
background-color: #ffe4e1;
}
.shut{
float: right;
border:1px solid #bebebe;
width: 60px;
height: 30px;
margin: 10px;
text-align: center;
}
</style>
</head>
<body>
<div style="height: 50px;border-top: 3px solid #c1ffc1;border-bottom: 1px solid #bebebe;
">
<div class="nav ">
<div class="left fl">
<a href="">设为首页</a>
<a href="">手机版</a>
<a href="">移动客户端</a>
</div>
<div class="right fr">
<a href="">登录</a>
<a href="">微博</a>
<a href="">博客</a>
<a href="">邮箱</a>
<a href="">网站导航</a>
<div class="shut">
<span style="vertical-align: px;">×</span>
<a style="padding: 0;vertical-align: 10px"href="">关闭</a>
</div>
</div>
</div>
</div>
</body>
</html>
