伊人久久精品亚洲麻豆,亚洲亚洲综合网站伊人

首頁免費課如何用CSS進行網頁布局問答

如何用CSS進行網頁布局

全部評論問答未解決精華

ermazi

.top{height: 100px;background:gray;}
.main{height: 800px; background:red; }
.left{width:200px;height: 800px;float:left;background:blue;}
.right{height: 800px;position:absolute;left:0;top:100px;right:0;background:green;margin:0 0 0 210px;}
.foot{height: 100px;background:gray;}

0 5-3 編程挑戰

2017-11-04

丶歸途

.top{width:100%;height:200px;background:#f23;}
.main{width:100%;height:400px;background:red;}
.left{width:25%;height:100%;background:blue;float:left;}
.right{width:70%;height:100%;background:#323303;float:right;}
.foot{width:100%;height:200px;background:orange;}

0 5-3 編程挑戰

2017-10-30

丶歸途

float:none;不行嗎？為啥要這么復雜？

0 5-2 實踐題

2017-10-30

慕數據6397341

上面的代碼沒有給main設置高度，而main里的內容又設置成了浮動，所以footer會跑到head的下面。

解決方法有3個：1.清除浮動， clear:both;

2.為main設置高度， .main{

width:860px;height:600px;margin:0 auto;background:#9FC;

}

3 footer自己設置margin高度600px:
.footer{ height:50px; background:#9F9; margin:600px 0 0 0;}

6 5-2 實踐題

2017-10-27

qq_夕陽殘雪_1

看懵逼了，都是英語單詞

0 5-2 實踐題

2017-10-25

qq_夕陽殘雪_1

把第八行代碼刪除，9 10 11的任務文字刪除，9行；position：absolute，10行：margin：0 310px 0 210px ，11行：right：0

1 4-3 編程練習

2017-10-25

知名奶爸

慕課網實在是慢

0 3-1 二列布局

2017-10-25

AllySu

系統自帶bug,中間右欄因為自適應寬度，突出一部分了。還有一個點不明白，為什么main的樣式不需要相對定位position:relative?

2 5-3 編程挑戰

2017-10-24

AllySu

技術與藝術的融合

0 1-1 內容簡介

2017-10-24

fengyunzhu

右側（right）先加載，左側（left）后加載其實就是右側的寫在前面，這時就不能用float了，老師想考察你們絕對定位position:absolute

1 5-3 編程挑戰

2017-10-23

Hugh_33

完結撒花！

0 5-3 編程挑戰

2017-10-23

慕絲5047818

.main{ width:980px; height:600px; margin:0 auto;background:white;}
.left{ width:290px; height:600px; background:#ccc; float:left;}/*左浮動樣式*/
.right{ width:650px; height:600px; background:#FCC; float:right;}/*右浮動樣式*/

0 3-3 編程練習

2017-10-21

RichieHsia

其實老鐵這是山東口音，東營那邊就在句尾說“啊”，表示向對方強調和確認剛才的話

2 5-1 混合布局

2017-10-21

慕無忌8082579

.top{ height:100px; background:#ccc;}
.main{ height:500px; background:red;}
.left{ width:200px; height:500px; background:blue; position:absolute; left:0; top:100px;}
.right{ height:500px; background:green; margin-left:210px;}
.foot{ height:50px; background:#900;}

0 5-3 編程挑戰

2017-10-18