CSS學習之首頁簡單布局

來源:互聯網
上載者:User

標籤: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學習之首頁簡單布局

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.