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

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

如何用CSS進行網頁布局

江老實 Web前端工程師
難度初級
時長22分
學習人數
綜合評分9.60
1991人評價 查看評價
9.8 內容實用
9.6 簡潔易懂
9.4 邏輯清晰
  • 布局實際上市塊與塊之間的關系,它們存在于三種狀態: ①塊挨著塊; ②塊嵌套著塊; ③塊壓著塊。 1.混合布局:我們可以把一列布局加入“左”和“右”改造為混合布局。 2.在中部mian中加入子div 分別是(左,右)。 然后分別在style中加入“.left和.right”的樣式! 3.注“left和right”都要加浮動“float” 4.還可以在混合布局下進行更復雜的混合布局 5.可以將right定義為sub_right和sub_right 分為化為更為密集的混合布局
    查看全部
    0 采集 收起 來源:混合布局

    2016-03-21

  • 三列布局,兩邊固定,中間自適應; 方法:兩邊用絕對定位,中間設置margin; .left{ width:300px;position:absolute;left:0 } .main{margin:0 300px 0 200px;} .right{width:200;position:absolute;right:0;}
    查看全部
    0 采集 收起 來源:三列布局

    2016-03-21

  • float和絕對定位脫離文檔流,相對定位則不能
    查看全部
    0 采集 收起 來源:編程練習

    2016-03-21

  • 兩列布局: 1、寬度自適應:左右浮動float,寬度設置%,用%大概控制寬度。 2、固定寬度left和right增加一個父級#main,設置main的width,以及margin 0 auto;用 像素px精確控制left和right的寬度。
    查看全部
    0 采集 收起 來源:二列布局

    2016-03-21

  • 一列布局:margin:0 auto居中顯示 兩列布局:寬度的百分比實現自適應 三列布局:1.三列設置百分比和浮動2左右使用position:absolution;中間用margin定位
    查看全部
    0 采集 收起 來源:三列布局

    2016-03-20

  • margin:0 auto
    查看全部
    0 采集 收起 來源:練習題

    2016-03-20

  • 三列自適應布局特例: HTML: <div class="left">Left</div> <div class="middle">三列自適應布局特例>三列自適應布局特例>三列自適應布局特 例>三列自適應布局特例>三列自適應布局特例>三列自適應布局特例>三列自適應布局特例>三列自適應布局特例</div> <div class="right">Right</div> CSS: .left{width:200px;height:500px;background:red;position:absolute;left:0;top:0;} .middle{height:500px;background:yellow;margin:0 300px 0 200px}(想讓中間的塊兩邊留點空隙的話,可以把margin的左右值改一下就行了。) .right{width:300px;height:500px;background:blue;position:absolute;right:0;top:0;} 附:在絕對定位absolute的情況下定義元素的位置時,直接使用left,top即可?。?!
    查看全部
    0 采集 收起 來源:三列布局

    2018-03-22

  • 1、在CSS里面進行布局時,首先清除body自適應,即: body{margin:0;padding:0;}(這個body里面同時可以設置body里元素的屬性,例如:字體大小等。) 2、三列布局——自適應: HTML: <div class="left"></div> <div class="middle"></div> <div class="right"></div> CSS: .left{width:33.33%;height:400px;float:left;background:red;} .middle{width:33.33%;height:400px;float:left;background:blue;} .right{width:33.33%;height:400px;float:right;background:yellow;} 在使用浮動時,寬度必須使用百分號?。。。ǜ邮菫榱耸乖貦M向排列。而分塊只能使元素縱向排列。)
    查看全部
    0 采集 收起 來源:三列布局

    2018-03-22

  • 自適應三列布局
    查看全部
    0 采集 收起 來源:編程練習

    2016-03-20

  • 外包裹盒子(或者類)的高度可設置,也可直接省略。(當省略時,高度自動調為它里面內容的高度)例如:.main
    查看全部
    0 采集 收起 來源:編程練習

    2016-03-20

  • 在CSS設置里面,浮動float和絕對定位absolute可以讓元素脫離文檔流
    查看全部
    0 采集 收起 來源:評測題目

    2016-03-20

  • 1、在CSS樣式里面開始布局時,首先要清除默認樣式,即: body{margin:0;padding:0;} 2、和margin屬性一樣,當什么前提都沒有時,浮動屬性可以直接使用,例如: .left{width:20%;height:500px;float:left;background:red;} (這是布局,屬性都要寫在CSS樣式里面) 3、固定寬度的兩列布局: HTML代碼: <div class="main"> <div class="left"></div> <div class="right"></div> </div> CSS代碼: .main{width:800px;margin:0 auto} .left{width:200px;height:500px;float:left;background:blue} .right{widht:600px;height:500px;float:right;background:yellow} 4、兩列自適應的布局: 把3里面的HTML代碼的main外包裹去掉,CSS代碼里面的.main去掉即可。即: HTML : <div class="left"></div> <div class="right"></div> CSS: .left{width:20%;height:600px;float:left;background:blue} .right{width:80%;height:600px;float:right;background:red} 5、一個外包裹盒子(或者一個類)的高度可以不設置,這時它的高度會隨著它里面的內容自動適應。例如3里的.main就沒有設置高度。
    查看全部
    0 采集 收起 來源:二列布局

    2018-03-22

  • 1、可以在CSS樣式里面設置div里面的元素屬性,例如: div{text-align:center;font-weight:bold;} 2、可以在CSS樣式里面設置body自適應時,同時也可以在body里面設置body內元素的屬性,例如字體的大小。例如: body{margin:0;padding:0;font-size:30px;}
    查看全部
    0 采集 收起 來源:編程練習

    2016-03-20

  • 定寬元素居中方法,例如: Div{width:800px;height:500px;margin:0 auto;}
    查看全部
    0 采集 收起 來源:練習題

    2016-03-20

  • 1、body自適應:(寫在CSS樣式里面) body{margin:0;padding:0;} 2、元素居中:(布局都寫在CSS里面) margin:0 auto;(在沒有寫相對還是絕對定位時可以直接寫)
    查看全部
    0 采集 收起 來源:一列布局

    2016-03-20

舉報

0/150
提交
取消
課程須知
1.你需要掌握html+css樣式基礎知識 2.有一定的前端實際開發經驗
老師告訴你能學到什么?
1.掌握網頁布局的相關知識 2.能對不同的網頁進行布局結構劃分 3.掌握固定寬度和自適應寬度的實現方法

微信掃碼,參與3人拼團

微信客服

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

幫助反饋 APP下載

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

公眾號

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

友情提示:

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