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

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

如何用CSS進行網頁布局

江老實 Web前端工程師
難度初級
時長22分
學習人數
綜合評分9.60
1991人評價 查看評價
9.8 內容實用
9.6 簡潔易懂
9.4 邏輯清晰
  • 三列布局:左右兩側固定寬度,中間自適應。float是無法實現的。 左側絕對定位:position:absolute;left:0;top:0; 右側絕對定位:position:absolute;right:0;top:0; 中間寬度定義去掉,加上左右的margin值:margin:0 310px 0 210px;
    查看全部
    0 采集 收起 來源:三列布局

    2015-06-12

  • 文檔流:將窗體自上而下分成一行行, 并在每行中按從左至右的順序排放元素,即為文檔流. 浮動(float)和 絕對定位(position:absolute)可以讓元素脫離文檔流
    查看全部
    0 采集 收起 來源:評測題目

    2015-06-12

  • 一般都先清除樣式body{margin:0;padding:0;}解決瀏覽器不兼容。 2個DIV并列,用flaot:left。來控制。 注意:如果2個DIV沒有設定上一級DIV,那么2個DIV的上一級是 寬度和高度設置成百分比。記得加上浮動。
    查看全部
    0 采集 收起 來源:二列布局

    2015-06-12

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

    2015-06-11

  • 一列布局通常作為網站的首頁。不適合放置多行文本。一般固定寬度。 一列布局:比如百度首頁。 清除初始樣式margin:0;padding:0; 水平居中:margin:0 auto;
    查看全部
    0 采集 收起 來源:一列布局

    2015-06-11

  • 1.寬度自適應 100% 2.網業的長度理論上可以無限延長 一般是頭部,主體,底部。主體一般再根據需要分欄,一般兩欄或者三欄 分欄又稱為分列:一、二、三、列布局,混合布局。
    查看全部
    0 采集 收起 來源:內容簡介

    2015-06-11

  • clear: both;清除浮動 Q:清除的是哪個float? A:根據footer之前的位置可以看出。和main重疊了。所以清除了main的float,footer才會下移600px,也就是main的height。也就是left的高度。600px 從html代碼來看。清除的應該是與footer同級別的DIV。
    查看全部
    0 采集 收起 來源:實踐題

    2015-06-11

  • footer 的margin 修改
    查看全部
    0 采集 收起 來源:實踐題

    2015-06-11

  • .footer{ height:50px; background:#9F9; margin:600px auto;} 用上面的方法實現了效果。重溫margin的知識。 發現: 1、下面出現一大塊空白。因為 600px不僅是上也是下的值。所以應該是 margin:600px auto 0 2、但是下面還是有一塊小的空白。 3、margin的屬性是外邊距的距離。那么footer的上邊距應該是left+head=600+100=700px才對。 看到===塊級元素的垂直相鄰外邊距會合并=== footer和main是垂直相鄰。外邊距會合并是指=0?所以footer的 margin的上是600px ?好奇怪。
    查看全部
    0 采集 收起 來源:實踐題

    2015-06-11

  • 3列布局-特殊案例 左右列固定寬度,中間列自適應。 左側絕對定位:position:absolute;left:0;top:0; 右側絕對定位:position:absolute;right:0;top:0; 中間寬度定義auto,定位:margin值:margin:0 310px 0 210px; 上右下左 注意:編碼時。樣式里的 分號,忘了一個會讓你發瘋的。
    查看全部
    0 采集 收起 來源:三列布局

    2015-06-11

  • position : absolute; float:left
    查看全部
    0 采集 收起 來源:混合布局

    2015-06-11

  • 任務3:要求右側(right)先加載,左側(left)后加載 疑似解決方案: right部分寫在left前面就行了,因為瀏覽器從上往下解析。 任務4:編寫的代碼要兼容ie6 。。是說CSS的兼容性問題么。。
    查看全部
    0 采集 收起 來源:編程挑戰

    2015-06-11

  • 浮動:float:left/right 清除浮動:clear:both
    查看全部
    0 采集 收起 來源:實踐題

    2015-06-10

  • 1、main固定寬度,div采用left或者right 不影響效果。都用left和都用right。效果是一樣的。 2、如果top ,并且top兩邊+廣告,該如何實現?用絕對定位?還是相對定位?或是都可以?下節課3列布局會講吧?
    查看全部
    0 采集 收起 來源:編程練習

    2015-06-10

  • 1、哪兩個 css 設置,可以讓元素脫離文檔流()A浮動(float)和 絕對定位(position:absolute) 2、文檔流? 3、 float/*屬性可以改變在盒子模型的位置*/ position/*屬性可以把內容定位在盒子模型的任何一個位置*/
    查看全部
    0 采集 收起 來源:評測題目

    2015-06-10

舉報

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

微信掃碼,參與3人拼團

微信客服

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

幫助反饋 APP下載

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

公眾號

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

友情提示:

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