-
CSS進行網頁布局:1.查看全部
-
常見布局查看全部
-
三列布局 左右為固定寬度,中間為自適應寬度的情況,需通過絕對定位方式實現。 三列布局:左側和右側固定,中間自適應: 左側{position:absolute;left:0;top:0} 右側{position:absolute;top:0;right:0} 中間{margin-left:100px;margin-right:100px;}查看全部
-
.top{height:200px;background:#999;} .main{ height: 600px; width: auto; } .left{ width: 200px; height: 600px; background: blue; float:left; } .right{ height: 600px; background: #C03; position:absolute;top:200px;right:0;left:200px; } .foot{height:100px;background:#0FF;} 最基本的混合布局查看全部
-
用立體的思維理解塊狀元素的布局 平列 嵌套 疊加查看全部
-
...查看全部
-
...查看全部
-
兩列布局 符合布局 可根據習慣 嵌套在一個 body的主體DIV里面查看全部
-
三列布局主要思路就是將左右兩側布局全部利用絕對定位的方式把兩個固定的div固定的兩側,因為絕對定位是不占行的,所以中間的那一個div自動浮到了頂部,然后利用外邊距來空出左右的div位置。查看全部
-
兩列布局:自適應的兩列布局:width用百分比+float; 兩列布局的自適應布局一般用的比較少,用固定的比較多 固定寬度的兩列布局:width:具體值/父級元素的寬度確定,width+百分比;+float; 如果沒有加float的話,不能實現并排的兩列布局。 div作為外聯元素獨占一行,使后面的元素在下一行(設置display:inline/inline-block可以達到float效果) 另外一種設置兩列布局(固定寬度+自適應寬度)的方法: position:relative——父元素:相對定位(因為不設置偏移量時,它還是在原來的位置,不影響其位置) position:absolute——子元素:絕對定位(通過設置top :0;margin/left設置其與另一邊的位置使其位于同行的另一側) 注意:固定寬度的列的高度>自適應的列的高度查看全部
-
實現三列布局方法: 1、讓三個div在一行,可以對每個div都設置float:left屬性。但是有些特殊效果實現不了。 2、實現左右為固定寬度(左:200px,右:300px),中間為自適應寬度的三列布局:借助絕對定位 .left{width:200px; height:500px; background:#CCC; position:absolute; left:0;top:0;} .center{height:500xp; background:#99C; margin:0 300px 0 200px; } .right{height:500px; width:300px; background:#933; position:absolute; right:0; top:0;}查看全部
-
margin: 0 auto自動居中查看全部
-
浮動float和絕對定位position:absolute 這2中形式可以讓元素脫離標準文檔流。查看全部
-
<style type="text/css"> *{margin:0;padding:0;} #main{width:980px;margin:0 auto;} #left{width:80%;background:#ccc;float:left;} #right{width:20%;background:#ff0;float:right;} </style>查看全部
-
布局塊級元素時,首先要重置瀏覽器的相關屬性,margin、papdding;*{margin:0;padding:0;} 設置塊級元素居中時,需要設置div{margin:0 auto;}查看全部
舉報
0/150
提交
取消