颜色表资料:
HTML代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="header">
<div class="header_top">
<div class="wp">
<div class="z">
<span><a href="">设为首页</a></span>
<span><a href="">收藏本站</a></span>
</div>
<div class="y">
<span>天气</span>
<span class="mg0_right">时间</span>
</div>
</div>
</div>
<div class="logos">
<div class="wp">
<div class="logo_body">
<div class="logo"></div>
<div class="sousuo"></div>
<div class="lianxi"></div>
</div>
</div>
</div>
<div class="nav">
<div class="wp">
<div class="nav_body"></div>
</div>
</div>
</div>
<div class="wp">
<div class="center">
<div class="ad"></div>
<div class="jianjie z"></div>
<div class="xinwen y"></div>
<div class="c"></div>
<div class="chanping c"></div>
</div>
</div>
<div class="footer">
<div class="footer_top"></div>
<div class="footer_bottom"></div>
</div>
</body>
</html>
CSS代码:
*{margin: 0;padding: 0;}
body{font: 14px/24px '微软雅黑';background-color: #d8d8d8}
.wp{width: 960px;margin: 0 auto;}
.z{float: left;}
.y{float: right;}
.c{clear: both}
.mg0_top{margin-top: 0;}
.mg0_bottom{margin-bottom: 0;}
.mg0_right{margin-right: 0;}
.mg0_left{margin-left: 0;}
.header_top{width: 100%;height: 24px;background: Black;}
.header_top a:hover{color: #f60;}
.header_top span{color: #d8d8d8;margin-right: 10px;}
.header_top a{color: #d8d8d8;}
.header_top .mg0_right{margin: 0;}
.logo_body{width: 960px;height: 80px; background-color: #1E90FF;position: relative}
.logo{
width: 160px;
height: 60px;
background-color: #4682B4;
position: absolute;
top: 12px;
left: 0px;
}
.sousuo{
width: 300px;
height: 60px;
background-color: #4682B4;
position: absolute;
top: 12px;
right: 350px;
/*margin-right: 20px;*/
}
.lianxi{
width: 300px;
height: 60px;
background-color: #4682B4;
position: absolute;
top: 12px;
right: 0px;
}
.nav{
background-color: #a00002;
}
.nav_body{
width: 960px;
height: 50px;
}
.ad{
width: 960px;
height: 300px;
background-color: #00FFFF;
}
.jianjie{
width: 550px;
height: 280px;
background-color: #5F9EA0;
}
.xinwen{
width: 410px;
height: 280px;
background-color: #7FFFAA;
}
.chanping{
width: 960px;
height: 280px;
background-color: #FAFAD2;
}
.footer{
width: 100%;
height: 130px;
background-color: #a00002;
}
效果图:

