颜色表资料:
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; }
效果图: