<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>盒子模型导航</title>
<meta name="keywords" content="练习" />
<meta name="description" content="熟练盒子模型和导航代码" />
<script language="JavaScript" type="text/javascript">
<!--JS代码位置-->
</script>
<style type="text/css">
<!--CSS样式代码位置-->
ul
{
float:right;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
a
{
float:right;
width:7em;
text-decoration:none;
color:white;
background-color:purple;
padding:2em 0.6em;
border-right:1px solid white;
text-align:center;
}
a:hover {background-color:#ff3300}
li {display:inline}
<!-- 导航栏css -->
#aa{
background-color:red;
}
</style>
</head>
<body>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">博客</a></li>
<li><a href="#">资源</a></li>
<li><a href="#">下载</a></li>
</ul>
<!--就是这个div 没有效果-->
<div id="aa">logo图片
</div>
</div>
</body>
</html>