亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

如何用CSS進行網頁布局

江老實 Web前端工程師
難度初級
時長22分
學習人數
綜合評分9.60
1991人評價 查看評價
9.8 內容實用
9.6 簡潔易懂
9.4 邏輯清晰
.left{ width:200px; height:600px; background:#ccc;float:left;}
.main{ height:600px; margin:0px 310px 0px 210px; background:#9CF}
.right{ height:600px; width:300px; position:absolute; top:0;right:0; background:#FCC;}

只修改 .right 也是可以的。但是為什么用 clear:both 不可以呢?
自適應需要使用百分比,就這么簡單
.footer{ height:50px; background:#9F9; margin:0 auto【任務4】}
布局真的是網頁制作的基礎中的基礎。掌握了很重要。
.top{height:100px;background-color:#999;}
.main{height:600px;background-color:red;position:relative;}
.left{width:200px;height:600px;background-color:blue;position:absolute;}
.right{width:100%;height:600px;background-color:green;margin-left:210px;position:absolute;}
.foot{height:50px;color:}
.top{height:80px; background:#ccc;}
.main{width:80%;height:600px; background:red; margin:0 auto;position:relative;}
.left{ width:200px; height:600px; position:absolute;top:0;left:0; background:green;}
.right{height:600px;margin-left:210px; background:yellow;}
.foot{height:60px; background:orange;}
官方答案是錯的...
新手很需要的一段課程,最不墨跡的老師,點贊!?。?/div>
本課程只教別人設置浮動,文檔流與浮動的原理沒說清楚,以及清除浮動的原理也沒講,小白看了【任務4】一臉懵逼,清除浮動才是最大的后手,不過再Chrome和新版的IE里面不清除浮動Footer也能正常顯示,這課程留一手啊,坑爹啊。
建議開設課程時 可以把每個基本思路先概括一下。Anyway,thank you very much!
.footer{ height:50px; background:#9F9; margin:700px 0 0 0;}結果多了一行空白,margin改成600px就正常了,這margin是怎么算的
.top{height:100px;}
.main{position:absolute;top:100px;bottom:50px;width:100%;}
.left{ width:200px;height:100%; position:absolute;left:0;top:0;}
.right{margin-left:210px;height:100%;}
.foot{height:50px;position:absolute;bottom:0;left:0;width:100%;}
全程自適應
/*
1、寬度自適應:不設置寬度;
2、樣式加載:樣式按從上往下排序,寫在前面的先加載;
3、兼容ie6:不能用浮動float,只能先設置父元素main為相對定位relative作為參照定位,后設置其子元素(right、left)為絕對定位absolute,并設置其具體位置。
*/
/*
1、如不給right設置外邊距margin,則其自適應寬度會與其中的文字同寬;
2、由于left的width為200px,則right的margin-left為210px,因此right與left的間隔為10px;
3、由于right為main的首個子元素,因此默認疊加在main上面,無需設置絕對定位。
*/
.top{width:100%; height:50px;background:gray;}
.main{width:100%; height:400px;background:red;}
.left{width:25%; height:400px;background:blue; float:left;}
.right{width:74%; height:400px;background:green;float:right;}
.foot{width:100%; height:50px;background:yellow;}
.top{height:100px;background:#ccc;}
.main{height:500px;background:red;margin:0 auto;}
.left{width:25%;height:500px;background:blue;float:left;}
.right{width:70%;height:500px;background:green;float:right;}
.foot{height:50px;background:#F63;}
課程須知
1.你需要掌握html+css樣式基礎知識 2.有一定的前端實際開發經驗
老師告訴你能學到什么?
1.掌握網頁布局的相關知識 2.能對不同的網頁進行布局結構劃分 3.掌握固定寬度和自適應寬度的實現方法

微信掃碼,參與3人拼團

微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

友情提示:

您好,此課程屬于遷移課程,您已購買該課程,無需重復購買,感謝您對慕課網的支持!

本次提問將花費2個積分

你的積分不足,無法發表

為什么扣積分?

本次提問將花費2個積分

繼續發表請點擊 "確定"

為什么扣積分?

舉報

0/150
提交
取消