本文稱布局如以下模式的頁面為工字形頁面，主要由四個div構成。通過更改寬高資料或者定義板塊比例可以呈現不同頁面效果。
html如下，先構造四個div分別表示上、左中、右中、下（頁尾）。
>
"header"
>
headerdiv
>
"center"
>
class
="center_left"
>
leftdiv
>
class
="center_right"
>
rightdiv
>
div>
"footer"
>
footerdiv
>
body
>
html
>
傻瓜方法一，css如下，示例限制了四個div（其實是五個）的具體大小，但可能會導致因瀏覽器不同導致的視覺差異。
#header
.center_left
.center_right
#footer
效果如下
方法二，採用比例。（以下示例省略字型背景顏色等）
#header
#center
.center_left
.center_right
#footer
div和瀏覽器邊緣的空白間隙可以通過margin改變。
最後是本人完成的工字形頁面。
個人覺得工字形的格式非常好用!!乙個欄目做導航欄,乙個欄目呈現內容,操作也特別簡單!示例中右邊的部分文字可能顏色有點突兀!其實是用了乙個文字漸變色彩動態的效果~
本人是程式設計菜鳥,文章如有不足之處歡迎大佬指點(っ*´д`)っ
css布局練習
css練習布局，並完成一下布局 要求 主要練習布局，並且精簡 瀏覽器載入時 提公升瀏覽器載入速度 charset utf 8 2title rel stylesheet type text css href style1 1.css head a1 class h1 div style height...
簡單的css布局
對於初學者來說css的布局是至關重要的，這關係到整個網頁的外觀。乙個網頁的好壞其基礎就起源於此。以下是本人的隨文練習，較為粗糙，大神莫拍。html 左邊定寬200px 右邊自適應 著是乙個很簡單的兩列布局，左側定值，右側自適應。雖然看起來很簡單，但是其中涉及到margin的空間位移，譬如左側是將其先...
css布局簡單介紹
一，左右布局有一下幾種方式 1，float 2，position 3，flex 4，grid 主要介紹下grid。舉一下例子 twothree four five display grid grid template columns 50 50 grid template rows 50px 60p...