导航练习

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>百度百科导航</title>
<style type="text/css">
.con {
width: 100%;
height: 50px;
min-width: 1100px;
background-color: #0099FF;
margin-top: 100px;}
body {
margin-left: 0px;
margin-right: 0px;
}
.con .list{float: left;}
.con .user{float:right;}

.con .list a {
text-decoration: none;
color: #FFFFFF;
display: block;
width: 110px;
height: 50px;
float: left;
text-align: center;
line-height: 50px;
}
.con .list a:hover {
text-decoration: none;
color: #FFFFFF;
display: block;
width: 110px;
height: 50px;
float: left;
text-align: center;
line-height: 50px;
background-color: #0033FF;
}
.con .nav {
width: 1100px;
height: 50px;
margin-left: auto;
margin-right: auto;
}
.con .user{
color: #FFFFFF;
font-family: "微软雅黑";
font-size: 18px;
line-height: 50px;
text-align: center;

}
.con .nav .user a {
color: #FFFFFF;
text-decoration: none;
text-align: center;
}
</style>
</head>

<body>
<div class="con">
  <div class="nav">
   <div class="list">
   <a href="#">首页</a>
   <a href="#">分类</a>
   <a href="#">特色百科</a>
   <a href="#">用户</a>
   <a href="#">权威合作</a>
   <a href="#">手机百科</a>

   </div>

   <div class="user">
<a href="#"> 个人中心</a>
   </div>
   </div>
</div>

</body>
</html>

lori棒棒糖 · 发表于 2017-12-22 17:27:17

预览效果有问题吗？没有问题就ok哦~

[作业] 导航练习

共1个回复最后回复于 2017-12-22 17:27

	B Color Image Link Quote Code Smilies 高级模式您需要登录后才可以回帖登录 \| 立即注册本版积分规则回帖后跳转到最后一页

[作业] 导航练习

共1个回复 最后回复于 2017-12-22 17:27

共1个回复最后回复于 2017-12-22 17:27