Web 網頁設計 HTML 3 布局基礎

2021-10-09 13:13:17 字數 1236 閱讀 7137

網頁布局,也就是如何安排網頁的內容。

乙個好的網頁布局能夠使人眼前一亮,吸引流量。

網頁主要分為三部分——頭部、主體、頁尾。

主體:網頁的主體承載網頁的主要內容。

三段式:

這是最簡單直接的布局,但簡單並不意味醜陋,這種布局因為簡潔往往能夠設計出效果出眾的網頁,最常見的就是搜尋引擎和新聞門戶的主頁。

帶側邊欄:

從布局的角度,html中的元素包含兩種:行級元素和塊級元素。

接連使用兩個行級元素,他們之間不會自動換行。

比如:abc

元素本身不會使文字發生任何視覺上的變化,通常作為乙個單純的行級元素用於布局,它可以給同一行(段落)中的不同部分文字新增不同的屬性,當我們學到css時,它的作用會體現得更明顯。除此之外,標籤、標籤等標籤均為行級元素。

塊級元素會使文字從乙個新的段落開始。

比如:abc

標籤也常常用於布局,起作用與大同小異,具體的布局方法在學習css後會更好掌握。

在初級階段,我們需要掌握的是**布局。雖然這種布局方法已經幾乎被完全放棄,但是對於初學者來說,這是相較而言更容易掌握布局知識的方法。

**由單元格組成,我們在網頁中,我們認為**由若干行(橫著的)組成,每一行有若干列單元格。

cell1

cell2

cell3

cell4

標籤用於在html中描述乙個**。

在標籤內,我們用標籤描述乙個行,在乙個行中,我們使用來描述行中的一列單元格(其實就是乙個單元格)。

border:**的邊框粗細,當**用於布局時,往往設定為0。

align:單元格內內容的對齊方式,可以取left、rigth、center。

width:**的寬度。

width:單元格寬度。

colspan:單元格跨列。

rowspan:單元格跨行。

網頁設計 html布局學習1

一 重置css樣式表 第一種方式 現在眾多的設計師發現,這行 雖然簡單,但卻讓網頁解析太慢,呵呵,當然了,自己是業餘的,不用太在意。於是出現了幾種css重置方法 第二種方式 nettuts上的 jeffrey way寫了篇文章weekend quick tip create your own res...

網頁布局CSS技巧 Web設計必知

1 兩列布局 1.1 左列固定,右列自適應 left right 1.2 右列固定,左列自適應 left right 2 三列布局 2.1 左右寬度固定,中間自適應 left middle right 2.2 中間寬度固定,左右自適應 這個有點複雜,有必要先貼html left左列 right右列 ...

HTML 靜態網頁製作12月3日 格式與布局

一 position fixed 鎖定位置 相對於瀏覽器的位置 例如有些 的右下角的彈出視窗。二 position absolute 1.外層沒有position absolute 或relative 那麼div相對於瀏覽器定位。2.外層有position absolute 或relative 那麼...