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

2021-05-17 12:06:20 字數 737 閱讀 7691

1、兩列布局

1.1、左列固定,右列自適應

#left

#right

1.2、右列固定,左列自適應

#left

#right

2、三列布局

2.1、左右寬度固定,中間自適應

#left

#middle

#right

2.2、中間寬度固定,左右自適應

這個有點複雜,有必要先貼html

left左列

right右列

center

css樣式:

.wrap

.left

.leftwrap

.right

.rightwrap

.center

3、上中下三行布局

html

body

/*如需滿屏,則對html和body都設定height:100%*/

#top

#main

#bottom xi

/*ie6下*/

#top

#main

#bottom

至於html**,除了「2.2 中間寬度固定,左右自適應」,其他的我想沒有必要貼出來了。

有以上幾個作對照,常用的**布局應該都可以搞定。

網頁布局技巧

布局 在css出現之前使用 對網頁進行布局的,利用了 的無邊框和間距的特性 將 的邊框與單元格間距都設為0 然後再將網頁元素按版面需要進行劃分之後,插入到 的各個單元中。但使用 布局,會大量使用到 的巢狀,並且會在 裡假如大量的如width border cellspacing cellpaddin...

CSS 網頁布局

一些布局 行布局 多列布局 聖杯布局 雙飛翼布局 會使用到 html和css基礎 會使用div css進行排版 熟悉 float屬性 position屬性。1 經典的行布局 基礎的行布局 行布局自適應 行布局自適應限制最大寬 行布局垂直水平居中 container 水平與垂直居中 container...

CSS 網頁布局

頭部區域位於整個網頁的頂部,一般用於設定網頁的標題或者網頁的 logo 鏈結鏈結 鏈結 重置瀏覽器大小檢視效果。鏈結鏈結 鏈結學的不僅是技術,更學的不僅是技術,更是夢想!學的不僅是技術,更是夢想!學的不僅是技術,更是夢想!學的不僅是技術,更是學的不僅是技術,更是夢想 學的不僅是技術,更是夢想!學的不...