• <abbr id="chdyf"></abbr>
    <ruby id="chdyf"><acronym id="chdyf"><meter id="chdyf"></meter></acronym></ruby>
    <bdo id="chdyf"></bdo>
    <dfn id="chdyf"><menu id="chdyf"></menu></dfn>

    1. 

      <menuitem id="chdyf"></menuitem><strong id="chdyf"><menu id="chdyf"></menu></strong>
      <rt id="chdyf"><menu id="chdyf"></menu></rt>
      
成人小说一区二区三区,伊人精品成人久久综合全集观看,久久HEZYO色综合,中文字幕精品人妻熟女,影音先锋成人网站,我要看免费一级毛片,中国女人做爰A片,中文字幕av久久爽Av 
  
      
    

      

	
      
		
      
			
      
				
      CSS簡單實現圣杯布局和雙飛翼布局
      
				
      
					
       2020-2-18      seo達人      
      
					
					
      
						
					
      
				
      
				
			
      
			
      
				
      一、你能學到什么？

      
①如何使用css變量 ②實現圣杯布局和雙飛翼的簡單思路 ③了解浮動和margin的特性

      


      
css變量設置(兩個布局都有的部分)

      
:root{

      
    / 左邊欄寬度 /

      
    --lw:300px;

      
    /負左邊欄寬度/

      
    --lwf:-300px;

      
    / 右邊欄寬度 /

      
    --rw:400px;

      
    /負左邊欄寬度/

      
    --rwf:-400px;

      
    / 高度 /

      
    --height:300px;

      
}

      


      
二、圣杯布局的html和css代碼

      
html部分

      
  <div class="holyGrail">

      
    <div class="hg_main">main</div>

      
    <div class="hg_left">left</div>

      
    <div class="hg_right">right</div>

      
  </div>

      


      
css 實現對應的四個class

      
.holyGrail {

      
    height: var(--height);

      
    / 留出左右兩欄的布局 為了字體不被覆蓋/

      
    padding-left: var(--lw);

      
    padding-right: var(--rw);

      
}

      
.hg_main{

      
    width:100%;

      
    float: left;

      
    height: var(--height);

      
    background-color: blanchedalmond;

      
}

      
.hg_left{

      
    position: relative;

      
    left: var(--lwf);

      
    float: left;

      
    margin-left: -100%;

      
    width:var(--lw);

      
    height: var(--height);

      
    background-color: blueviolet;

      
}

      
.hg_right{

      
    float: left;

      
    margin-right: var(--rwf);

      
    width:var(--rw);

      
    height: var(--height);

      
    background-color: brown;

      
}

      


      


      
三、雙飛翼布局的html和css代碼

      
html部分

      
<div class="doubleWing">

      
    <div class="dw_main">

      
      <div class="dw_con">main</div>

      
    </div>

      
    <div class="dw_left">left</div>

      
    <div class="dw_right">right</div>

      
  </div>

      


      
css 實現對應的五個class

      
.doubleWing{

      
    padding-right: var(--rw);

      
}

      
.dw_left{

      
    float: left;

      
    margin-left: -100%;

      
    width:var(--lw);

      
    height: var(--height);

      
    background-color: blueviolet;

      
}

      
.dw_main{

      
    width:100%;

      
    float: left;

      
    height: var(--height);

      
    background-color: blanchedalmond;

      
}

      
.dw_con {

      
margin-left: var(--lw);

      
}

      
.dw_right{

      
    float: left;

      
    margin-right: var(--rwf);

      
    width:var(--rw);

      
    background-color: brown;

      
    height: var(--height); 

      
}

      


      
四、學會兩個布局的注意點

      
圣杯布局

      
在最外邊的類（holyGrail）左右要留出左欄和右欄的寬度（使用padding-left，padding-right)

      
中間的div.hg_main放在最上面，優先渲染，中間div自適應，width為100%

      
左中右欄的div都設置浮動，左欄通過margin-left:-100%移動到和中間的div同一起點，然后通過position: relative;

      
left: -（左欄的寬度）；會移動到最外層div的左內邊距的區域（中間div的左邊）

      
右欄可以通過margin-right:-(右欄的寬度)；移動到最外層div的右內邊距的區域（中間div的右邊）

      
雙飛翼布局

      
在中欄的div再加一個div,設置margin-left:左欄的寬度，這樣可以省略左欄的div使用postion和left的屬性移動

      
最外層的div可以不用預留左欄的位置了

      
五、兩個布局的對比的優缺點

      
布局 優點 缺點

      
圣杯 無多余dom 當中間的寬度小于左右的寬度時，結構混亂

      
雙飛翼 可以支持各種寬度，通用性強較強 需要多加一層dom

      
代碼下載地址

      
記得一定要自己去實現一下

      

      				
      
								
			
      
		
      
		
		
	
      


      
    
  
      
    
      日歷
      
    
      
        
      
        
    
      
  
      
    
    
      
      
      鏈接
      
      
        
                
      
    
      
    
      
      
      個人資料
      
      
      
          
      
                    
      
          
      藍藍設計的小編
          http://m.wtxcl.cn
      
      
      
    
      
    
      
      
      存檔