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

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

網頁布局基礎

難度入門
時長 1小時30分
學習人數
綜合評分9.63
2052人評價 查看評價
9.9 內容實用
9.6 簡潔易懂
9.4 邏輯清晰
*{margin:0; padding:0;}
#wrap{width:970px; margin:0 auto;}
#mainbody{position:relative; margin-top:15px;}
#left{float:left;width:110px; }
#mid{margin-left:123px;top:0px;width:650px;border:1px solid #999;}
#right{position:absolute;top:0px;left:790px;border:1px solid #999;}

最新回答 / 假象1
#content {position:absolute;?top:0;?margin-left:200px;?width:580px;}總的width是#wrap{width:780px;},也就是整張文檔是寬780px,content是css簡介的寬度繼承上方也是780px。設置為margin-left:200px;時,只是向右移動了200px,他原本的寬度并沒有改變,還是780px,因此會突出一部分,改變content的寬度就可以了,也就是width=780-200=580px;
#content寬度自適應

最新回答 / 姚弘杰
如果不喜歡使用position,建議使用float

最新回答 / 姚弘杰
可能是不同瀏覽器的兼容性不一樣
綠色的div在那就符合文檔流 白色的div設置了float就飄起來了 此時 父元素的高度是綠色的div撐起來的
子元素設置float 使父元素的高度坍塌 導致父元素的高度為0px
對于看電視都要求普通話說清楚的我來說真是糾結

已采納回答 / 咖喱羊
是他的父輩,但是css樣式中,離結構越近的css樣式,他的優先級就越高,所以在.content中所設置的background是被其子代樣式所覆蓋了。

已采納回答 / svc124
左上角的背景圖鏈接(http://www.xianlaiwan.cn/code/images/t_book.gif)失效,你對圖片鏈接一個個驗證就知道了。外邊距設計沒有效果估計由于與其他屬性相沖突吧,我的代碼段如下<...code...>

最新回答 / Hey小師弟
定位機制是與定位有關的東西,標準文檔流、浮動、絕對定位都和定位有關,有的定位會脫離標準文檔流,浮動、絕對定位就是。而static、relative、(absolute、fixed)是里面的屬性值,分別對應靜態定位、相對定位、絕對定位。
我去,用瀏覽器看效果,還把DW下面開那么大

最贊回答 / 慕粉18628927938
是的 ,這塊我也疑惑 ?明明加在一起才940px ?后來自己寫代碼試驗了一下,發現left float后 ?該塊元素已經脫離的文檔流,在上層,right塊元素自然會占據left原來的地方,從頁面上看 就是right在left下面,right的高度有一部分被left覆蓋了,這點從視頻中可以觀察到。并不是老師說的寬度問題。
課程須知
1.一定要對HTML+CSS相關標簽有所掌握;2.對網頁布局知識有簡單的了解
老師告訴你能學到什么?
1.掌握三大布局技巧——流式布局、浮動布局及絕對定位布局;2.精通標準文檔流、盒子模型、float屬性以及position屬性等知識。

微信掃碼,參與3人拼團

微信客服

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

幫助反饋 APP下載

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

公眾號

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

友情提示:

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

本次提問將花費2個積分

你的積分不足,無法發表

為什么扣積分?

本次提問將花費2個積分

繼續發表請點擊 "確定"

為什么扣積分?

舉報

0/150
提交
取消