今天主要記錄一下這幾天學(xué)習(xí)的筆記痰娱，在別人的輔導(dǎo)下制作了一個(gè)簡單的頁面堤尾，當(dāng)然還是有很多不完善的地方最盅，主要是因?yàn)閯倢W(xué)習(xí)想給自己增加一些信心榜跌，之前也看過很多視頻關(guān)于html+css的教學(xué)损搬，但是每次想自己寫的時(shí)候碧库，總是不知道從哪里入手柜与。
練習(xí)制作的百度首頁
下面簡單記錄一下學(xué)習(xí)筆記，主要是用到div+css
div主要是用于網(wǎng)頁布局嵌灰，可以把網(wǎng)頁分成幾個(gè)區(qū)域弄匕，而css主要是用于修飾整個(gè)頁面，比如字體大小沽瞭，顏色迁匠，格式等等。
1驹溃、首先可以把頁面分成上城丧、中、下區(qū)域豌鹤，可以寫成 如下
把整個(gè)頁面分成頂部亡哄、中部、底部
效果如下
頂部布疙、中部磺平、底部
2、需要給每個(gè)區(qū)域布局一下大小
把每個(gè)區(qū)域的高度設(shè)置一下拐辽，這邊用紅色框起來方便大家觀看，因?yàn)閐iv是塊級(jí)元素可以設(shè)置width和height（寬度和高度）擦酌，塊級(jí)元素默認(rèn)是獨(dú)占一行的俱诸，對應(yīng)的是行內(nèi)元素，是不能設(shè)置寬度和高度赊舶，默認(rèn)是在同行顯示的睁搭，用display是可以將塊級(jí)元素轉(zhuǎn)換為行內(nèi)元素的，同理也是可以將行內(nèi)元素轉(zhuǎn)換為塊級(jí)元素笼平。還有一些元素是既可以設(shè)置width和height园骆，有可以在同行顯示，input寓调、button
設(shè)置頂锌唾、中、底部的區(qū)域大小樣式
效果如下
頂夺英、中晌涕、底三部分區(qū)域大小分布
3、完善每個(gè)區(qū)域的內(nèi)容
- 頂部內(nèi)容
這是頂部的內(nèi)容
效果如下
頂部內(nèi)容
頂部樣式設(shè)置
設(shè)置頂部樣式
效果如下
頂部
-
中部內(nèi)容
中部內(nèi)容
說明:中部又用了兩個(gè) div 分了上下兩個(gè)區(qū)域痛悯。
效果如下
中部顯示效果
中部樣式設(shè)置
image.png
效果如下
image.png
-
底部內(nèi)容
image.png
效果如下
image.png
底部樣式設(shè)置
image.png
效果如下
image.png
