<!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>
- 3 回答
- 0 关注
- 1336 浏览
添加回答
举报
0/150
提交
取消