標籤:margin http div+css blog asc 開始 gre div 練習
作為一個PHPer,在前端方面javascript、jquery這些的日常工作還搞的定。可對於div+css這些東西可就頭疼了,所以現在開始學習CSS
跟著燕十八的教程開始從最基礎學起,首先練習一個簡單首頁的布局
1 <html> 2 <head> 3 <title>首頁布局</title> 4 <style> 5 #container { 6 width: 1200px; 7 background-color: blue; 8 } 9 #header {10 width: 1200px;11 height: 100px;12 background: red;13 }14 #main {15 width: 1200px;16 height: 500px;17 background: black;18 }19 #four {20 width: 580px;21 height: 230px;22 background: green;23 float: left;24 margin: 10px;25 }26 #footer {27 width: 1200px;28 height: 100px;29 background: blue;30 }31 32 </style>33 </head>34 35 <body>36 <div id="container">37 <div id="header"> 38 </div>39 <div id="main">40 <div id="four"></div>41 <div id="four"></div>42 <div id="four"></div>43 <div id="four"></div>44 </div>45 <div id="footer"> 46 </div> 47 </div>48 </body>49 </html>
顯示效果:
CSS學習之首頁簡單布局