<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.nav ul{
width:1200px;/*设置元素宽度为980px*/
border:1px solid #000;/*设置一个颜色为#000，宽度为1px的边框*/
margin:0px auto;
height:50px;
background-image: url(../images/nav.jpg);
padding: 0px;
}
.nav ul li{
float: left;
list-style-type:none;
/* margin: 0px auto;*/
/* margin: 0px 0px 0px 200px;*/
}
.nav ul li a{
width:120px;/*设置元素宽为80px*/
height:50px;/*设置高度为28px*/
line-height:40px;/*设置行距为40px，让文字在每行的中间位置*/
background:red;/*设置元素的背景为红色*/
color:#FFF;/*文字颜色是白色*/
margin:0px;
border:1px solid #666;
font-size:20px;/*用20号字*/
display:block;/*这个比较关键，因为a本身就是联级元素，本身不具有宽高，用这个把它变成块级元素，这样前面设置的宽和高就能起作用了*/
text-align:center;/*让文本居中*/
text-decoration:none; /*去掉下划线*/
/*vertical-align|:middle;*/
}
.nav img{
float: left;
margin: 0px;
margin-right: 20px;
height: 58px;
}
.nav ul li a:hover{
background:#999;//鼠标滑过变色
}
</style>
<body>
<div class="nav">
<ul>
<img src="../images/logo.png">
<li>
<a href="#" title="首页" target="_blank">首页</a>
</li>
<li><a href="#" title="国内新闻" target="_blank">国内新闻</a>
</li>
<li><a href="#" title="国外新闻" target="_blank">国外新闻</a></li>
<li><a href="#" title="娱乐新闻" target="_blank">娱乐新闻</a></li>
<li><a href="#" title="时事新闻" target="_blank">时事新闻</a></li>
<li><a href="#" title="联系我们" target="_blank">联系我们</a></li>
</ul>
</div>
</body>
</html>
管理
