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

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

如何用CSS進行網頁布局

江老實 Web前端工程師
難度初級
時長22分
學習人數
綜合評分9.60
1991人評價 查看評價
9.8 內容實用
9.6 簡潔易懂
9.4 邏輯清晰
  • 為什么footer塊會跑到head塊下面了? 由于main塊沒有設置高度,里面的元素(left塊,right塊)又被設置成了浮動顯示,所以main塊沒有被撐開,就像一條線一樣緊貼在head塊的下面,所以footer塊會越位跑到head塊下面。 清除浮動影響的方法: 1.main中設置overflow:hidden; 2.在footer中添加clear:both; 3. 在footer中添加width:100%;overflow:hidden;
    查看全部
    0 采集 收起 來源:實踐題

    2016-05-24

  • 1.如果是要清除浮動影響的是浮動對象的父對象: 建議采用:設置父對象的overflow:hidden; 2.如果要清除浮動影響的是浮動對象后邊緊鄰的對象 建議采用:clear:both;
    查看全部
    0 采集 收起 來源:實踐題

    2016-05-24

  • 1.混合布局:我們可以把一列布局加入“左”和“右”改造為混合布局。 2.在中部mian中加入子div 分別是(左,右)。 然后分別在style中加入“.left和.right”的樣式! 3.注“left和right”都要加浮動“float” 4.還可以在混合布局下進行更復雜的混合布局 5.可以將right定義為sub_right和sub_right 分為化為更為密集的混合布局 布局有一列、二列、三列和混合布局 混合布局: 將一列布局改造就變成了混合布局。 即主體部分加上子div 要點回顧: 其實在網頁制作當中,頁面中的元素就是塊與塊之間的關系: 塊挨著塊;塊嵌套著塊;塊疊壓著塊 通過css將這些塊擺放正確,網頁布局就自然完美了。 1、margin:0 auto 自動居中 2、兩種分成三欄的方式: 1)兩邊position:absolute,left:0/right:0,top:0, 中間margin{0 右邊 0 左邊} 2)先分兩欄 左右float 再分兩欄左右float
    查看全部
    0 采集 收起 來源:混合布局

    2016-05-24

  • 1.如果是要清除浮動影響的是浮動對象的父對象: 建議采用:設置父對象的overflow:hidden; 2.如果要清除浮動影響的是浮動對象后邊緊鄰的對象 建議采用:clear:both;
    查看全部
    0 采集 收起 來源:實踐題

    2016-05-24

  • 上面的代碼沒有給main設置高度,而main里的內容又設置成了浮動,所以footer會跑到head的下面。 解決方法有兩個:1.清除浮動, clear:both; 2.為main設置高度, .main{ width:860px;height:600px;margin:0 auto;background:#9FC; }
    查看全部
    0 采集 收起 來源:實踐題

    2016-05-24

  • 脫離文檔流,也就是將元素從普通的布局排版中拿走,其他盒子在定位的時候,會當做脫離文檔流的元素不存在而進行定位。需要注意的是,使用float脫離文檔流時,其他盒子會無視這個元素,但其他盒子內的文本依然會為這個元素讓出位置,環繞在周圍。而對于使用absolute positioning脫離文檔流的元素,其他盒子與其他盒子內的文本都會無視它
    查看全部
    0 采集 收起 來源:評測題目

    2016-05-24

  • 分欄
    查看全部
    0 采集 收起 來源:內容簡介

    2016-05-24

  • 布局特點
    查看全部
    0 采集 收起 來源:內容簡介

    2016-05-24

  • 布局的概念
    查看全部
    0 采集 收起 來源:內容簡介

    2016-05-24

  • <style type="text/css"> body{ margin:0; padding:0; font-size:30px; color:#fff} .top{width:800px;height:50px;background:#CCC;margin:0 auto} .main{width:800px;height:500px;background:RED;margin:0 auto} .left{ width:200PX;height:500px;background:BLUE;float:left} .right{width:590px;height:500px;background:GREEN;float:right} .foot{width:800px;height:50px;background:#F63;margin:0 auto} </style>
    查看全部
    0 采集 收起 來源:編程挑戰

    2018-03-22

  • 為什么footer塊會跑到head塊下面了? 由于main塊沒有設置高度,里面的元素(left塊,right塊)又被設置成了浮動顯示,所以main塊沒有被撐開,就像一條線一樣緊貼在head塊的下面,所以footer塊會越位跑到head塊下面。 清除浮動影響的方法: 1.main中設置overflow:hidden; 2.在footer中添加clear:both; 3. 在footer中添加width:100%;overflow:hidden;
    查看全部
    0 采集 收起 來源:實踐題

    2016-05-24

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

    2016-05-24

  • 給main函數也設置了背景顏色黑色,但是網頁瀏覽效果只能看到里面的2個div的背景色,而且高度還是500p 因為你的left和right浮動后,父級沒有內容支撐高度,給main設置overflow:hidden就好了。
    查看全部
    0 采集 收起 來源:二列布局

    2016-05-23

  • 怎樣確定樣式開頭是用 :#foot還是用.font 【#】對應的是id選擇器,【.】對應的是class類選擇器,看你是怎么定義:id=“footer”-->#foot;class=“footer”-->.foot 根據需求來定,頁面中只有一個的一般用#,如果有一類的則用.
    查看全部
    1 采集 收起 來源:編程練習

    2018-03-22

舉報

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

微信掃碼,參與3人拼團

微信客服

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

幫助反饋 APP下載

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

公眾號

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

友情提示:

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