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

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

網頁布局基礎

難度入門
時長 1小時30分
學習人數
綜合評分9.63
2052人評價 查看評價
9.9 內容實用
9.6 簡潔易懂
9.4 邏輯清晰
因為 a 元素為靜態定位,所以要以根元素為基準進行偏移,也就是 html 元素。
使用絕對定位實現橫向兩列布局一般用于:一列固定寬度,一列自適應寬度。
主要應用技能:
relative-父元素相對定位。
absolute-自適應寬度元素絕對定位
注意:固定寬度列的高度>自適應寬度的列,否則會造成文檔的溢出。

最新回答 / Angel帝豪
浮動屬性。float:left/right ? ?記住還有一個清除浮動clear:both/left/right
<style type="text/css">
*{margin:0; padding:0;}
#wrap{width:970px;margin:0 auto;}
#mainbody{margin-top:15px;position:relative;}
#left{width:110px;float:left}
#mid{width:650px;border:1px solid #999;margin-left:123px;}
#right{border: 1px solid #999;position: absolute;left: 790px;top: 0px;
}
</style>
CSS 的overflow:hidden 屬性詳細解釋
http://jingyan.baidu.com/article/d45ad148e2a7f969552b80ae.html
不錯,解決了我多久的定位問題。謝謝
我這樣不用清除浮動
#mainbody {
background:#FC0;
display:inline-block;
width:100%;

}
.left {
width:800px;
height:200px;
background:#000;
float:left;
}
.right {
width:140px;
height:500px;
background:#690;
float:right;
}
請詳細觀看盒子模型的立體圖片(2-2小節 07:58),從第一層到第五層依次為:border、content+padding、background-image、background-color、margin。
視圖好像不能適應變寬度
當元素設置浮動屬性后,會對相鄰的元素產生影響,相鄰元素特指緊鄰后面的元素。
這句話有問題。。。
CSS規定的定位機制有三種,分別是標準文檔流、浮動及絕對定位。

已采納回答 / pardon110
盒子模型3D圖層展示, 類似ps中的圖層原理,視角從上往下看,往下的圖層會被上級圖層所覆蓋。boder????????????????????????????????????//最上層content+paddingbackground:imagebackground-colormargin????????????????????????????????//最底層

最新回答 / qq_神往_0
什么都不用做,塊元素原始屬性就自適應的

最新回答 / 總有刁民想害朕010
占據的不是整塊的空間了,而且以他的寬度的空間。所有會有一小塊

最贊回答 / 月下風物語
http://www.w3school.com.cn/css/css_positioning_floating.asp 看這個網站,上面說設置了float的元素脫離了文檔流,而第一種情況#mid沒有設置float,在定位的時候會忽視#left去定位,所以此處的margin-left:123px是距離#mainbody左邊界的123px處,導致兩種情況效果一樣。
課程須知
1.一定要對HTML+CSS相關標簽有所掌握;2.對網頁布局知識有簡單的了解
老師告訴你能學到什么?
1.掌握三大布局技巧——流式布局、浮動布局及絕對定位布局;2.精通標準文檔流、盒子模型、float屬性以及position屬性等知識。

微信掃碼,參與3人拼團

微信客服

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

幫助反饋 APP下載

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

公眾號

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

友情提示:

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

本次提問將花費2個積分

你的積分不足,無法發表

為什么扣積分?

本次提問將花費2個積分

繼續發表請點擊 "確定"

為什么扣積分?

舉報

0/150
提交
取消