严格来说这几天实战得是 div+css和ps的修炼中.
下载地址
http://pan.baidu.com/share/link?shareid=1296318904&uk=4180563440
css来来去去也都是那几个属性.
@charset "utf-8"; /* CSS Document 微凉 QQ:496928838 http://wl.125.la*/ *{ margin:0px; padding:0px; font-size:14px; } body{ background-color:#ECECEC; } #head{ position:fixed; top:0px; background:#FAFAFA; width:100%; height:54px; border-bottom: 1px solid #E8E8E8; box-shadow: 0 1px 5px rgba(34, 25, 25, 0.2); z-index:100; } #header{ margin:0 auto; width:960px; height:54px; } .nav{ float: left; height: 54px; width: auto; } .nav ul ,.nav li{ float: left; list-style: none outside none; } .nav li a{ padding: 0 15px; color: #585858; display: block; line-height: 54px; border-right: 1px solid #E8E8E8; } #main{ position:relative; top:82px; margin:0 auto; width:960px; height: auto; } #left{ float: left; background: none repeat scroll 0 0 #FFFFFF; border: 1px solid #C7C7C7; width: 630px; } #right{ float:right; //background: none repeat scroll 0 0 #FFFFFF; // border: 1px solid #C7C7C7; width: 314px; } #footer{ float: left; margin-top:90px; border-top: solid 1px #ccc; width: 100%; } #f_center{ width: 960px; height: 54px; margin: 0 auto; text-align: center; } #f_top{ width:700px; margin: 0 auto; margin-top: 10px; } #f_top ul{ list-style: none; } #f_top li{ float: left; padding: 10px; border-right: solid 1px #ccc; } #f_bottom{ float: left; text-align: center; width: 960px; } .left_kuai{ padding-left: 10px; padding-bottom:10px; } .left_kuai_t{ background-image:url("../img/item_left.png"); width: 412px; height:65px; margin-top:20px; margin-left: -19px; color: #FFFFFF; font-weight: 700; height: 65px; line-height: 55px; text-indent: 2em; } .right_kuai{ margin-top:0px; margin-bottom: 20px; width:100%; border: solid 1px #ccc; background-color: #fff; padding-left: 10px; padding-bottom:10px; } .right_kuai_t{ background-image:url("../img/item_right.png"); width: 166px; height: 30px; margin-top:-12px; margin-left:20px; color: #FFFFFF; font-size: 15px; font-weight: 700; line-height: 30px; text-indent: 1em; }