首頁 > 開發者 > JavaScript
小試牛刀2：製作一個簡單的層次頁面，小試牛刀層次頁面
1、這隻是我用來練練手的，就不給大家說明具體步驟了，主要是通過HTML和CSS的一些基礎知識來實現的。有興趣的可以自己動手試試~
2、My Code：
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>View Code
3、實現效果
這是下面的：
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
