-
1. position:absolute,絕對定位，用left/top等定住絕對位置，適用于左邊藍色框（固定位置，固定寬度） 2. margin最好用于有父類的情況，注意區別margin-left與left的區別 3. 右邊綠色框寬度自適應，則不定義寬度，固定其左margin為左框加余量，剩下的不定義。注意其position：absolute。右框如果用float：right則需要定義其寬度。當瀏覽器寬度過小，則會發生兩框重疊。若左框不是absolute還會使左框到下一行的位置。 所以【如果不希望瀏覽器窗口變動導致分欄移位，不要用float】。 注釋中是他人代碼。查看全部
-
1.如果是要清除浮動影響的是浮動對象的父對象： 建議采用：設置父對象的overflow:hidden; 2.如果要清除浮動影響的是浮動對象后邊緊鄰的對象 建議采用：clear:both;查看全部
-
代碼沒有給main設置高度，而main里的內容又設置成了浮動，所以footer會跑到head的下面。 解決方法有兩個：1.清除浮動， clear:both; 2.為main設置高度， .main{ width:860px;height:600px;margin:0 auto;background:#9FC; } 清楚浮動的方法綜合一下答案： 一：clear:both(/left/right); 二：overflow:hidden;width:100%; 三：給main設置高度：.main{width:960px; {height:600px};margin:0 auto;} 四：margin:600px 0 0 0; 推薦使用方法一和方法二，在給footer使用overflow的時候，千萬不要忘記設置它的寬度。查看全部
-
1、margin:0 auto 自動居中 2、兩種分成三欄的方式： 1）兩邊position：absolute，left：0/right：0，top:0， 中間margin｛0 右邊 0 左邊｝ 2）先分兩欄 左右float 再分兩欄左右float 局實際上市塊與塊之間的關系，它們存在于三種狀態： ①塊挨著塊； ②塊嵌套著塊； ③塊壓著塊。 盒子之間的三種關系： 1、相鄰 2、嵌套 3、層疊 我們要做的就是擺放好盒子的位置。查看全部
-
3列布局-特殊案例 左右列固定寬度，中間列自適應。 左側絕對定位：position：absolute;left:0;top:0; 右側絕對定位：position：absolute;right:0;top:0; 中間寬度定義去掉，加上左右的margin值，margin:0 310px 0 210px; 上右下左（中間空一點出的話，增加margin屬性值便可以實現） 左右兩側布局固定寬度，中間部分寬度自適應。則需要采用絕對定位來實現，把左右設置為絕對定位查看全部
-
<style type="text/css"> body{margin:0;;padding:0} .left{width:200px;heigth:500px;position:absolution;left:0;background:#ccc} .middle{width:500px;heigth:500px;maigin:0,30px,0,30px;background:#999} .rigth{width:300px;heigth:500px;position:absolution;right:0;background:#ddd}//自適應三列布局 </style> </head> <body> <div class="left">200px</div> <div class="middle">自適應寬度</div> <div class="right">300px</div> </body>查看全部
-
這節課主要講了網頁的簡單介紹； 網頁的主要元素是文本和圖片，網頁設計的特點有兩個（一個是網頁可以自適應寬度、二是網頁的長度理論上沒有限制） 網頁一般分為三部分：頭部、內容、底部；再根據內容的多少給網頁分欄（又稱分列）：一列布局、二列布局、三列布局、混合布局等）查看全部
-
body{margin:0;padding:0} .main{width:500px;margin:0 auto} .left{width:20%；heigth:500px;float:rigth}//自適應寬度 .rigth{width:80%;heigth:500px;float:right} <div class=main> <div class="left"></div> <div class="rigth"></div> </div>查看全部
-
一列布局：簡單明了，主題突出，不適合多行文字 body{margin:0;padding:0} .top{heigth:100px;background:blue} .main{width:800px;heigh:300px;background:#ccc;margin:0 auto//水平居中} .foot{width:800px;heigth:300px;backgoung:#ccc;margin:0 auto} </style> <div class="top"></div> <div class="main"></div> <div class="foot"></div>查看全部
-
頁面間的元素就是塊和塊之間的關系 塊連著塊 塊嵌套塊 塊疊壓塊查看全部
-
混合布局代碼查看全部
-
第一列 第三列固定寬度 中間自適應寬度代碼查看全部
-
三列布局代碼查看全部
-
兩列布局代碼查看全部
-
自適應寬度的兩列布局用的很少 更多的是固定寬度查看全部
舉報
0/150
提交
取消