時間：2023-10-06 21:00:01 | 來源：網(wǎng)站運營
時間：2023-10-06 21:00:01 來源：網(wǎng)站運營
網(wǎng)頁設計布局div+css代碼實現(xiàn)一（附源文件）：Hi.今天開始第三課，主要說下如何實現(xiàn)第一課畫的網(wǎng)頁布局樣式。在這里說下寫網(wǎng)頁代碼和用什么軟件沒有關系，常用的軟件有Dw、Vs、記事本、Hbuilder、Sublime等，我這邊用的是Sublime。在制作前我們先看下最初的設計稿，如下圖：
在線咨詢
<!DOCTYPE html><html><head><title></title><meta charset="utf-8"><link rel="stylesheet" type="text/css" href="css/style.css"></head><body>這個放內(nèi)容</body></html>2、在html定義好每個盒子的命名，并做好注釋。代碼如下：（這段代碼是放到body標簽里面。）<!-- 頭部代碼開始 --><div class="header"><div class="logo"></div><div class="nav"></div></div><!-- banner圖代碼開始 --><div class="banner"></div><!-- 內(nèi)容代碼開始 --><div class="content"><ul><li>1</li><li>2</li><li>3</li></ul></div><!-- 底部代碼開始 --><div class="footer"></div>3、定義css.css文件，把html里面命名的盒子寫上相對應的屬性，代碼如下*{ margin: 0; padding: 0;}body{ font-size: 14px; color: #333; font-family: 微軟雅黑}.header{ width: 1200px; margin: 0 auto; height: 50px; border: 1px solid #99CC66}.logo{ float: left; width: 200px; border: 1px solid #99CC66; height: 50px;}.nav{ float: left; width: 800px;}.banner{ width: 1200px; margin: 10px auto; height: 350px; border: 1px solid #99CC66}.content{ width: 1200px; margin: 10px auto; height: 450px; border: 1px solid #99CC66}.content li{ float: left; width: 260px; margin-left: 30px; border: 1px solid #99CC66; list-style: none; height: 200px; margin-top: 20px; background-color: #99CC66}.footer{ width: 1200px; margin: 10px auto; height: 100px; border: 1px solid #99CC66}4、現(xiàn)在我們看到的效果如下圖，是不是和我們最初的效果一樣，下一節(jié)課我我們完成css美化網(wǎng)頁及圖片和文字內(nèi)容的填充工作。關鍵詞：實現(xiàn),文件,設計,布局
微信公眾號
版權所有? 億企邦 1997-2025 保留一切法律許可權利。
