作业 - 论坛 - Powered by Discuz!

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>css样式</title>
<style>
body{margin: 0;}
.as{width: 100%; height:50px; background-color:#09C; margin-top:100px; min-width:1100px;}
.ad{float:left; height:50px; width:780px; margin-left:135px;}
.af{ float:right;}
.as .ag{ font-size:18px; color:#FFF; font-family:"微软雅黑"; line-height:50px; text-decoration:none; display:block; float:left; text-align:center;}
.ad .ag:hover{ background-color:#039;}
.as .ad .ag .ah { width:102px; display:inline-block;}
.as .aj{ width:134px; display:inline-block;}
.as .ak{ font-size:18px; color:#FFF; font-family:"微软雅黑"; line-height:50px; text-decoration:none; display:block;text-align:center; margin-right:135px;}
</style>
</head>
<body>
<div class="as">
<div class="ad">
<a href="#" class="ag"><span class="ah">首页</span></a>
<a href="#" class="ag"><span class="ah">分类</span></a>
<a href="#" class="ag"><span class="aj">特色百科</span></a>
<a href="#" class="ag"><span class="ah">用户</span></a>
<a href="#" class="ag"><span class="aj">权威百科</span></a>
<a href="#" class="ag"><span class="aj">手机百科</span></a>
</div>
<div class="af">
<a href="http://www.baidu.com" class="ak"><img src="images/user.png" /> 个人中心</a>
</div>
</div>
</body>
</html>

复制代码