css布局中,乙個重要的標籤div,div是xhtml所支援的標籤,div是乙個容器,所有的xhtml標籤物件都可以稱為是乙個容器.如content
,....
div**的書寫格式:
zrrwnskcmz">[...]
[...]
注:同乙個名稱的id值,在當前的xhtml頁面中,只日須使用一次,class名稱可以重複使用.
1.一列布局
一列固定寬度
xhtml code：
一列固定寬度width:300px;height:300px;
css code：
#layout
一列寬度自適應
xhtml code：
一列自適應寬度width:80%
css code：
#layout
注：自適應的優勢是，當擴大或縮小瀏覽器視窗大小時，其寬度將維持在與瀏覽器當前寬度比例的80%。
一列固定寬度居中
xhtml code：
一列固定寬度居中
css code：
#layout
注：margin:0px auto;margin屬性用於控制物件的上右下左4個方向的外邊距，當mwww.cppcns.comargin使用兩個引數時，第乙個引數表示上下邊距，第二個表示左右邊距。auto值是讓瀏覽器自動判斷邊距，瀏覽器將會使div物件的左右邊距設為相同，從而實現居中效果。
2.二列布局
二列固定寬度
xhtml code:
left
left
css code:
#left
#right
注：float屬性是css布局中非常重要的乙個屬性，用於控制物件的浮動布局方式，div布局基本上都通過float的控制來實現布局。float用於設定物件是否浮動顯示，以及設定具體的浮動方式，可用值none，left，right。
二列寬度自適應
xhtml code：
left
left
css code:
#left
#right
注：在css布局中，乙個物件的寬度，不僅僅是由width值來決定，乙個物件的真實寬度是由物件本身的寬、物件的左右外邊距，以及左右邊框，還有內邊距這些屬性相加而成。有關寬度計算的問題，是css布局中相當重要的被成為盒模型問題。
右列寬度自適應
xhtml code：
left
right
css code：
#left
#right
二列固定寬度居中
xhtml code：
left
right
css code：
#layout
#left,#right
3.三列布局
三列浮動中間列寬度自適應
xhtml code：
left
center
right
css code：
body
#left
#center
#right
最後,我們提醒大家請自行演示學習.
本文標題: 學習css布局網頁的一些例項
本文位址: /web/css/26257.html
一些css布局
css布局 bootstrap 詳情請看官方文件 首先要按照相應的官方規範引入相應的css js fonts等 container相當於乙個容器 一般設定乙個 接下來設定行 用row row裡面套col col裡面可以繼續套row row不能直接套row 拷貝並貼上下面給出的html 這就是乙個最簡...
CSS布局的一些技巧
通常使元素水平居中用的較多的方法為 main但是，當瀏覽器視窗比元素的寬度還要窄時，瀏覽器會顯示乙個水平滾動條來容納頁面，從而影響頁面可觀性。用max width替代 width 可以使瀏覽器更好地處理小視窗的情況。這點在移動裝置上顯得尤為重要。main目前所有的主流瀏覽器包括ie7 在內都支援 m...
CSS例項 CSS實現的等高網頁布局
為了讓網頁更美觀 協調，有的時候需要用到左右等到布局，傳統的等高布局是用 j ascript 實現的，現在來看看 silence 發明的真正的 css 實現的等高布局。為了讓網頁更美觀 協調，有的時候需要用到左右等到布局，傳統的等高布局是用 j ascript 實現的，現在來看看 silence 發...