web網頁 頁面布局的幾種方式

2021-09-20 01:16:37 字數 989 閱讀 3442

網頁基本布局方式:

(1)流式布局 fluid

流布局與固定寬度布局基本不同點 就在於對**尺寸的側量單位不同。固定寬度布局使用的是畫素,但是流布局使用的是百分比,這位網頁提供了很強的可塑性和流動性。換句話說,通過設定百分比,我們不需要考慮裝置尺寸或者螢幕寬度大小了,可以為每種情形找到一種可行的方案,應為你的設計尺寸將適應所有的裝置尺寸。流布局與**查詢和優化樣式技術密切相關。

新老阿里雲賬戶均可領取!可用於購買阿里雲伺服器ecs、雲資料庫rds、虛擬主機、安騎士、ddos高防ip等100多雲計算產品。 代金券自領取之日起,有效期是30天,請及時使用,過30天後還可以重新領取。

(2)固定布局 fixed

在固定布局中,網頁的寬度是必須指定為乙個畫素值,一般為960px。過去,開發人員發現960px是最適合作為網格布局的寬度,因為960可以整除3,4,5,6,8,10,12和15。在今天,在web開發中還是比較普遍使用固定寬度布局的,因為這種布局具有很強的穩定性與可控性。但是同時也有一些劣勢,固定寬度必須考慮**是否可以適用於不同的螢幕寬度。

(3)彈性布局 elastic

彈性布局跟流布局很像,主要不同是大小單位。彈性布局的大小單位不是畫素或者百分比,而是em或者rem,避免了根據px區域性在高解析度下幾乎無法辨識的缺點,又相對於%百分比更加靈活,同時可以支援瀏覽器的字型大小調整和縮放等的正常顯示,需要一段時間適應而且不易從其他布局轉換過來。

(4)伸縮 flex box

使用css3 flex系列屬性進行相對布局。對於富**和複雜排版的支援非常大,但是存在相容性問題。

(5)響應式

使用@media**查詢給不同尺寸和介質的裝置切換不同的樣式。優秀的響應範圍設計可以給適配範圍內的裝置做好的體驗。

web網頁 頁面布局的幾種方式

網頁基本布局方式 1 流式布局 fluid 流布局與固定寬度布局基本不同點 就在於對 尺寸的側量單位不同。固定寬度布局使用的是畫素,但是流布局使用的是百分比,這位網頁提供了很強的可塑性和流動性。換句話說,通過設定百分比,我們不需要考慮裝置尺寸或者螢幕寬度大小了,可以為每種情形找到一種可行的方案,應為...

web網頁 頁面布局的幾種方式

流布局使用的是百分比,這位網頁提供了很強的可塑性和流動性。通過設定百分比,我們不需要考慮裝置尺寸或者螢幕寬度大小了,可以為每種情形找到一種可行的方案,應為你的設計尺寸將適應所有的裝置尺寸。流布局與 查詢和優化樣式技術密切相關。在固定布局中,網頁的寬度是必須指定為乙個畫素值,一般為960px。因為96...

網頁頁面設計與布局

問題1 現在什麼布局方式最流行?div css 問題2 是不是過時的頁面布局方式就不能用了?不是,因為目前我們的瀏覽器都能解釋 以上3種布局方式。對於乙個網頁的排版可分為兩種情況 橫向和縱向 1.縱向區塊,則每個區塊寫出乙個div即可,因為div是獨佔一行的 塊級元素 2.橫向區塊,則 a 同樣每個...