<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*[1]清除*/
*{margin:0;padding:0;}
ul,ol{list-style: none;}
img{border: none;vertical-align: top;}
table{border-collapse: collapse;}
/*[2]设置整体文字大小和颜色*/
body{font-family: "microsoft yahei";font-size: 14px;color:#777;background-color: #f0f0f0}
a{text-decoration: none;}
a:hover{text-decoration: underline;}
/*横向的布局*/
.top-bar{height: 28px;line-height: 28px;background-color:#323240}
.header{height: 90px;background-color: #fff}
.banner{height: 170px;background-color: #16A3FF}
.article{height:570px;}
.footer{height:150px;background-color: #010A10;margin-top: 120px;}
.container{height:100%;width:1000px;margin-left:auto;margin-right:auto;}
.article .container{background-color: #fff;margin-top: -50px;}
/*layout-3*/
.breadcrumb{height:50px;background-color: #fff;}
.aside{width: 250px;float:left;background-color: #9f1414;height:100%;}
.content{width:750px;float:right;background-color: #6196DD;height:100%;}
.user-info{height: 180px;background-color: #45D866;}
.safe-tools{height: 140px;background-color: #AEA832;}
.safe-tools .section{height: 100%;width:33%;float:left;}
.s-email{background-color: #fff;}
/*-------------top bar*/
.bar-nav{float:right;}
.bar-nav li {float:left;height: 28px;line-height: 28px;font-size: 12px;}
.bar-nav a{padding-left: 15px;padding-right: 15px;color: #b0b0b0}
.bar-nav a:hover {color: #fff}
.logo{float:left;height:90px;line-height: 90px;}
.logo img{vertical-align: middle;}
.main-nav{float:right;}
.main-nav li{float:left;border-left:1px dashed #ddd;height:90px;width:120px;text-align:center;font-size: 18px;}
.main-nav span{display:block;font-size:12px;}
.main-nav a{display:block;height:62px;padding-top: 25px;}
.main-nav a:hover,.main-nav .active{ border-bottom: 3px solid rgb(57,105,157);color:rgb(57,105,157);}
</style>
</head>
<body>
<div><div>
<ul>
<li><a href="">link1</a>|</li>
<li><a href="">link2</a>|</li>
<li><a href="">link3</a>|</li>
<li><a href="">link4</a></li>
</ul>
</div></div>
<div><div>
<h2><a href=""><img src="logo.png" alt=""></a></h2>
<ul>
<li><a href="">首页1</a><span>home1</span></li>
<li><a href="">账户</a><span>account</span></li>
<li><a href="">首页3</a><span>home3</span></li>
<li><a href="">首页4</a><span>home4</span></li>
</ul>
</div></div>
<div><div></div></div>
<div><div>
<div>breadcrumb</div>
<div>aside</div>
<div>
<div>user-info</div>
<div>
<div>section1</div>
<div class="section s-email">section2</div>
<div>section3</div>
</div>
<!-- safe-tools ed -->
<div>safe-mess</div>
</div>
<!-- content en -->
<!-- article container ed -->
</div></div>
<div><div></div></div>
</body>
</html>
qq_allpass个性T_0
cnyballk
相关分类