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

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

網頁布局基礎

難度入門
時長 1小時30分
學習人數
綜合評分9.63
2052人評價 查看評價
9.9 內容實用
9.6 簡潔易懂
9.4 邏輯清晰
CSS 規定的定位機制有三種,分別是標準文檔流、浮動及絕對定位。
#mainbody {
background:#FC0;
width:100%;overflow:hidden; //【任務1】?
}
.left {
width:800px;
height:200px;
background:#000;
float:left;//【任務2】?
}
.right {
width:140px;
height:500px;
background:#690;
float:right;//【任務3】?
}
absolute relative相對定位,absolute絕對定位-自適應
position:relative 相對定位
#wrap{width:970px; height: 1000px; margin:0 auto;}
#mainbody{ margin-top:15px; position: relative;}
#left{width:110px; float:left; margin-right: 13px; border: solid 1px #999; }
#mid{width:650px;border:1px solid #999; float:left;}
#right{ position: absolute; left: 792px; border:1px solid #999;}
position 絕對定位 static ,relative, absolute, fixed
float margin
clear:both 或 clear:left, clear:right
overflow:hidden;
浮動布局 float

最新回答 / xsnake
工具問題,重新安裝一下, 正常情況是輸入src后回車會提示瀏覽的.
margin 自動居中: margin 0 auto
邊框border,外邊距margin,內邊距padding,內容content
border,content+padding,background-image, background-color,margin
結構化標準語言HTML.XML
表現標準語言CSS  ?。ㄎ臋n流, floats. 絕對定位)
行為標準語言DOM,ECMAScript
塊,div,ul,li,dl,dt,p
行,span strong,img,input
.content{background:#eff9f9; padding:44px 15px 15px; border:4px solid #badbdb;}
.profile{background:url(../images/t_profile.gif) no-repeat #eff9f9;}
.book{background:url(../images/t_book.gif) no-repeat #eff9f9;}
.book img{border:1px solid #b1adaa; margin:10px 18px;}
哈哈南方人無壓力
茅塞頓開!
課程須知
1.一定要對HTML+CSS相關標簽有所掌握;2.對網頁布局知識有簡單的了解
老師告訴你能學到什么?
1.掌握三大布局技巧——流式布局、浮動布局及絕對定位布局;2.精通標準文檔流、盒子模型、float屬性以及position屬性等知識。

微信掃碼,參與3人拼團

微信客服

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

幫助反饋 APP下載

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

公眾號

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

友情提示:

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

本次提問將花費2個積分

你的積分不足,無法發表

為什么扣積分?

本次提問將花費2個積分

繼續發表請點擊 "確定"

為什么扣積分?

舉報

0/150
提交
取消