1. <ul id="0c1fb"></ul>

      <noscript id="0c1fb"><video id="0c1fb"></video></noscript>
      <noscript id="0c1fb"><listing id="0c1fb"><thead id="0c1fb"></thead></listing></noscript>

      99热在线精品一区二区三区_国产伦精品一区二区三区女破破_亚洲一区二区三区无码_精品国产欧美日韩另类一区

      RELATEED CONSULTING
      相關(guān)咨詢
      選擇下列產(chǎn)品馬上在線溝通
      服務(wù)時(shí)間:8:30-17:00
      你可能遇到了下面的問題
      關(guān)閉右側(cè)工具欄

      新聞中心

      這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
      CSS中經(jīng)典三欄布局方案的示例分析

      這篇文章主要介紹CSS中經(jīng)典三欄布局方案的示例分析,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!

      專業(yè)從事成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè),高端網(wǎng)站制作設(shè)計(jì),微信小程序開發(fā),網(wǎng)站推廣的成都做網(wǎng)站的公司。優(yōu)秀技術(shù)團(tuán)隊(duì)竭力真誠(chéng)服務(wù),采用H5高端網(wǎng)站建設(shè)+CSS3前端渲染技術(shù),成都響應(yīng)式網(wǎng)站建設(shè),讓網(wǎng)站在手機(jī)、平板、PC、微信下都能呈現(xiàn)。建站過程建立專項(xiàng)小組,與您實(shí)時(shí)在線互動(dòng),隨時(shí)提供解決方案,暢聊想法和感受。

      1. float布局

      最簡(jiǎn)單的三欄布局就是利用float進(jìn)行布局。首先來繪制左、右欄:

      
            
            
              
              
              
            

      此時(shí)可以得到左右兩欄分布:

      CSS中經(jīng)典三欄布局方案的示例分析 

      接下來再來看中間欄如何處理。我們知道對(duì)于float元素,其會(huì)脫離文檔流,其他盒子也會(huì)無(wú)視這個(gè)元素。(但其他盒子內(nèi)的文本依然會(huì)為這個(gè)元素讓出位置,環(huán)繞在周圍。)所以此時(shí)只需在container容器內(nèi)添加一個(gè)正常的div,其會(huì)無(wú)視left和right,撐滿整個(gè)container,只需再加上margin為left right流出空間即可:

         
          
              
                  
                  
                  
              
          

      CSS中經(jīng)典三欄布局方案的示例分析 

      此時(shí)看到的效果是:左、右兩欄被擠到第二行。這是因?yàn)閙ain的寬度為100%。接下來我們通過調(diào)整左、右兩欄的margin來將左、中、右放在一行中:

      .left {
                  float: left;
                  width: 100px;
                  height: 200px;
                  margin-left: -100%;
                  background-color: red;
              }
      
              .right {
                  float: left;
                  width: 100px;
                  height: 200px;
                  margin-left: -100px;
                  background-color: yellow;
              }

      第二步,將left的margin-left設(shè)置為-100%,此時(shí)左欄會(huì)移動(dòng)到第一行的首部。然后再將right的margin-left設(shè)置為其寬度的負(fù)值:-100px,則右欄也會(huì)移動(dòng)到和左、中欄一行中:

      CSS中經(jīng)典三欄布局方案的示例分析 

      不過此時(shí)還沒有大功告成,我們?cè)囍趍ain中加入一些文字:

              
                  fjlskdjflkasjdfljasdljlsjdljsdjflksadj
                  
                  
              
          

      CSS中經(jīng)典三欄布局方案的示例分析 

      可以看到文字被壓住了,接下來就要解決這個(gè)問題。

      第三步,給container一個(gè)padding,該padding應(yīng)該正好等于左、右欄的寬度:

      .container {
                  padding-left: 100px;
                  padding-right: 100px;
              }

      此時(shí)看到的結(jié)果是左、中、右三欄都整體收縮了,但文字依然被壓住了。

      CSS中經(jīng)典三欄布局方案的示例分析 

      第四步,給左、右兩欄加上相對(duì)布局,然后再通過設(shè)置left和right值向外移動(dòng):

      .left {
                  float: left;
                  width: 100px;
                  height: 200px;
                  margin-left: -100%;
                  position: relative;
                  left: -100px;
                  background-color: red;
              }
      
              .right {
                  float: left;
                  width: 100px;
                  height: 200px;
                  margin-left: -100px;
                  position: relative;
                  right: -100px;
                  background-color: yellow;
              }

      到此為止,大功告成:

      CSS中經(jīng)典三欄布局方案的示例分析 

      4. 雙飛翼布局

      雙飛翼布局的前兩步和圣杯布局一樣,只是處理中間欄部分內(nèi)容被遮擋問題的解決方案有所不同:

      既然main部分的內(nèi)容會(huì)被遮擋,那么就在main內(nèi)部再加一個(gè)content,通過設(shè)置其margin來避開遮擋,問題也就可以解決了:

      
      
          
      
      
          
              
          
          
          
      
      

      唯一需要注意的是,需要在main后面加一個(gè)元素來清除浮動(dòng)。

      5. flex布局

      flex布局是趨勢(shì),利用flex實(shí)現(xiàn)三欄布局也很簡(jiǎn)單,不過需要注意瀏覽器兼容性:

      
                  .container {
                      display: flex;
                      flex-direction: row;
                  }
                  .middle {
                      height: 200px;
                      background-color: red;
                      flex-grow: 1;
                  }
      
                  .left {
                      height: 200px;
                      order: -1;
                      margin-right: 20px;
                      background-color: yellow;
                      flex: 0 1 200px;
                  }
      
                  .right {
                      height: 200px;
                      margin-left: 20px;
                      background-color: green;
                      flex: 0 1 200px;
                  }
              
          
          
              
                  fsdfjksdjflkasjdkfjsdkljfklsjadfkljaksdljfskljffjksldfjldsfdskjflsdjfkljsdlfjsldjfklsjdkflj
                  
                  
              
          

      有幾點(diǎn)需要注意一下:

      1. main要首先加載就必須寫在第一位,但因?yàn)閘eft需要顯示在最左側(cè),所以需要設(shè)置left的order為-1

      2. flex屬性的完整寫法是:flex: flex-grow flex-shrink flex-basis 。這也是flex實(shí)現(xiàn)三欄布局的核心,main設(shè)置flex-grow為1,說明多余空間全部給main,而空間不夠時(shí),僅縮小left right部分,同時(shí)因?yàn)橹付薼eft right部分的flex-basis,所以指定了兩者的寬度,保證其顯示效果

      6. 絕對(duì)定位

      絕對(duì)定位的方式也比較簡(jiǎn)單,而且可以優(yōu)先加載主體:

      
                  .container {
                  }
                  .middle {
                      position: absolute;
                      left: 200px;
                      right: 200px;
                      height: 300px;
                      background-color: yellow;
                  }
      
                  .left {
                      position: absolute;
                      left: 0px;
                      width: 200px;
                      height: 300px;
                      background-color: red;
                  }
      
                  .right {
                      position: absolute;
                      right: 0px;
                      width: 200px;
                      background-color: green;
                      height: 300px;
                  }
              
          
          
              
                  fsdfjksdjflkasjdkfjsdkljfklsjadfkljaksdljfskljffjksldfjldsfdskjflsdjfkljsdlfjsldjfklsjdkflj
                  
                  
              
          

      以上是“CSS中經(jīng)典三欄布局方案的示例分析”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!


      網(wǎng)站題目:CSS中經(jīng)典三欄布局方案的示例分析
      轉(zhuǎn)載來源:http://ef60e0e.cn/article/gcdjid.html

      其他資訊

      99热在线精品一区二区三区_国产伦精品一区二区三区女破破_亚洲一区二区三区无码_精品国产欧美日韩另类一区
      1. <ul id="0c1fb"></ul>

        <noscript id="0c1fb"><video id="0c1fb"></video></noscript>
        <noscript id="0c1fb"><listing id="0c1fb"><thead id="0c1fb"></thead></listing></noscript>

        丹寨县| 芦山县| 潞西市| 麟游县| 建宁县| 昂仁县| 泗水县| 双桥区| 普陀区| 闽侯县| 新龙县| 昔阳县| 方城县| 余庆县| 大足县| 定南县| 象山县| 福建省| 奇台县| 商南县| 贺兰县| 铜梁县| 手游| 新兴县| 嘉峪关市| 乐山市| 朝阳市| 独山县| 杨浦区| 铅山县| 南充市| 大邑县| 会宁县| 怀仁县| 临邑县| 丁青县| 抚宁县| 滦平县| 英吉沙县| 平凉市| 广灵县|