下面進(jìn)入正題：布局是網(wǎng)頁(yè)設(shè)計(jì)的基礎(chǔ)中的基礎(chǔ)，一個(gè)好的布局可以讓人一目了然，一個(gè)失敗的布局會(huì)讓協(xié)同人員抓狂。所以前端開發(fā)，從布局開始。

首先分析一下圖片的布局 ，分析各個(gè)色塊之間的嵌套關(guān)系

如圖所示：紅色的框包含的是整個(gè)頁(yè)面的內(nèi)容container，其中包含header、main 、footer 這三大部分(綠框)

header部分里包含logo部分

main在側(cè)邊有sider部分

根據(jù)以上的劃分，我們已經(jīng)知道這個(gè)頁(yè)面的大概布局以及這個(gè)頁(yè)面由 container、header 、main、footer、logo、sider六個(gè)元素構(gòu)成。接下來(lái)就是html代碼實(shí)現(xiàn)啦——

在這里我用的是div元素標(biāo)簽。

div可定義文檔中的分區(qū)或節(jié)(division/section)。

div 標(biāo)簽可以把文檔分割為獨(dú)立的、不同的部分。它可以用作嚴(yán)格的組織工具，并且不使用任何格式與其關(guān)聯(lián)。

html代碼如下：

代碼如下：

1.其中用到了margin這一屬性調(diào)整logo的位置并使container水平居中

margin 清除周圍的(外邊框)元素區(qū)域。margin 沒有背景顏色，是完全透明的。

margin 可以單獨(dú)改變?cè)氐纳?#xff0c;下，左，右邊距，也可以一次改變所有的屬性。

例如：margin：auto

p

{

margin:2cm 4cm 3cm 4cm;

}

2.絕對(duì)定位和相對(duì)定位

在使用margin想讓 logo在 header 垂直居中或者和header的上邊界有一定距離，我一開始使用的magrin-top ：30px 但是并沒有達(dá)到預(yù)想的樣子，使用谷歌開發(fā)者工具，看到了此時(shí)的margin-top ：30px指的是logo到整個(gè)頁(yè)面頂端的距離為30px，而不是我想要的到header頂端的距離。

解決方法：使用絕對(duì)定位。

相對(duì)定位：該元素相對(duì)于自己原有位置，偏移一定距離。相對(duì)的是自己。

絕對(duì)定位：該元素相對(duì)于其父元素，偏移一定距離。相對(duì)的是父元素，重點(diǎn)是這個(gè)父元素也需要是設(shè)置了position屬性。從最近的父元素開始找，直到找到body位置為止。

而我的想法正好是logo元素相對(duì)于他的父元素header發(fā)生了偏移 ，所以使用絕對(duì)定位成功解決。

以上主要是對(duì)完成任務(wù)過(guò)程的一個(gè)記錄以及總結(jié)，文章比較淺顯，希望隨著以后的深入學(xué)習(xí)不斷進(jìn)步，如有錯(cuò)誤盡請(qǐng)指正。

總結(jié)

以上是生活随笔為你收集整理的只用html5与CSS做一个简单的页面,HTML+CSS基础训练之做一个简单页面的布局的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。