论坛

标题: 导航练习 [打印本页]

作者: 少艾 时间: 2017-12-21 18:29
标题: 导航练习
<!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
预览效果有问题吗？没有问题就ok哦~

欢迎光临论坛 (http://bbs.qinxue.com/)