CSS學習之首頁簡單布局
阿新 • • 發佈：2017-07-23
black jquery ack span lac 跟著 code header contain
作為一個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學習之首頁簡單布局