1、这只是我用来练练手的，就不给大家说明具体步骤了，主要是通过HTML和CSS的一些基础知识来实现的。有兴趣的可以自己动手试试~
2、我的代码：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>DIV+CSS商业网站布局</title> 6 <style type="text/css"> 7 body{margin:0;background:#000;} 8 .container{margin:0 auto;width:80%;background:#EBFAA3;height:1200px;} 9 .content{margin:50px 50px;background:#FFF;height:1000px;} 10 11 /*conter_head部分*/ 12 .content_head{height:100px;} 13 h1{margin-left:50px;padding-top:30px;color:#8A8A8A;} 14 15 /*content_top部分*/ 16 .content_top{height:20px;} 17 h4{margin-left:50px;padding-top:10px;color:#8A8A8A;} 18 19 /*content_center部分*/ 20 .content_center{background-color:#CFF0F8;margin:10px 10px;height:760px;} 21 .text{padding-top:20px;color:#8A8A8A;text-align:center;} 22 23 /*center_body部分*/ 24 .center_body{background-color:#D7D7D7;margin:20px 50px;height:650px;} 25 h2{padding-top:10px;} 26 27 /*content_footer部分*/ 28 .content_footer{text-align:center;margin-top:30px;} 29 .foot{font-size:18px;} 30 </style> 31 </head> 32 33 <body> 34 <div class="container"> 35 <div class="header"><img src="1.png" width=100% height="100" /></div> 36 <div class="content"> 37 <div class="content_head"><h1>拉勾网—您的第一份简历</h1><hr /></div> 38 <div class="content_top"><h4>实例：</h4></div> 39 <div class="content_center"><p class="text">以下是某个应届毕业生的基本事迹，仅供大家参考</p> 40 <div class="center_body"> 41 <h2 align="center">茉莉花开简历</h2> 42 <p>1995年出生于.......</p> 43 </div> 44 </div> 45 <div class="content_footer"><small class="foot">拉勾-专注互联网职业机会</small></div> 46 </div> 47 </div> 48 </body> 49 </html>
3、实现效果
这是下面的：
