小试牛刀2：制作一个简单的层次页面_html/css

小试牛刀2：制作一个简单的层次页面_html/css_WEB-ITnose

php中文网

发布： 2016-06-24 11:32:09

原创

1144人浏览过

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"    style="max-width:90%"100" / alt="小试牛刀2：制作一个简单的层次页面_html/css_WEB-ITnose" ></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、实现效果

立即学习“前端免费学习笔记（深入）”；