导航
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body,ul,li{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
.nav{
height: 55px;
background: url("head_bg.jpg");
margin-top: 30px;
border-top: 1px solid #666;
}
.nav-con{
width: 1000px;
margin:0 auto;
height: 55px;
position: relative;
}
.nav-con ul li{
float: left;
background: url("li_bg.png") no-repeat right;
height: 55px;
padding:0 30px;
}
.nav-con ul li a{
display: inline-block;
height: 55px;
font:18px/55px 微软雅黑;
text-decoration: none;
color: #000;
}
.nav-con ul li a:hover{
color:green;
}
.news{
position: absolute;
left: 30px;
bottom:40px;
}
</style>
</head>
<body>
<div class="nav">
<div class="nav-con">
<ul>
<li><a href="#">智能手机</a></li>
<li><a href="#">平板电脑</a></li>
<li><a href="#">百度</a></li>
<li><a href="#">么么么哒</a></li>
</ul>
<div class="news"><img src="new.png"></div>
</div>
</div>
</body>
</html>
