css网页布局基础(行布局、列布局、圣杯布局、双飞翼布局)

目录

  • 行布局
  • 多列布局 
  • 圣杯布局
  • 双飞翼布局

*** 行布局 ***




    
    
    


这是页面内容

【注意】:

  1. min-width属性,设置元素的最小宽度,一旦设置了该属性,那么当页面的宽度小于该元素的宽度时,元素的宽度不会再发生变化。
  2. max-width属性,设置元素的最大宽度。一旦元素设置了该属性,那么当页面的宽度大于该元素的宽度时,元素就这么宽,但是当页面变小时,元素会随着页面进行自适应。



    
    
    


    
这是页面头部
这是页面内容

*** 多列布局 ***




    
    两列布局
    


    
这是页面左侧
这是页面右侧

 

*** 圣杯布局 ***

css网页布局基础(行布局、列布局、圣杯布局、双飞翼布局)_第1张图片

css网页布局基础(行布局、列布局、圣杯布局、双飞翼布局)_第2张图片    // 适用于 网站管理后台

css网页布局基础(行布局、列布局、圣杯布局、双飞翼布局)_第3张图片

重点:

html代码中  middle部分首先要放在main的最前部分。然后是left,right

1.将三者都 float:left , 再加上一个position:relative 

2.middle部分 width:100%占满

3.此时middle占满了,所以要把left拉到最左边,使用margin-left:-100%

4.这时left拉回来了,但会覆盖middle内容的左端,要把middle内容拉出来,所以在外围container加上 padding:0 右宽 0 左宽

5.middle内容拉回来了,但left也跟着过来了,所以要还原,就对left使用相对定位 left:-左宽  同理,right也要相对定位还原 right:-右宽

6.到这里大概就自适应好了。如果想container高度保持一致可以给left middle right都加上min-height:800px




	
	圣杯布局
	


	
我是中间
我是左边
我是右边

 

*** 双飞翼布局 ***




    
    
    双飞翼布局
    


header

main

这是页面的主体内容 这是页面的主体内容 这是页面的主体内容 这是页面的主体内容 这是页面的主体内容 这是页面的主体内容 这是页面的主体内容 这是页面的主体内容

sub

这是页面的左边 这是页面的左边 这是页面的左边 这是页面的左边 这是页面的左边 这是页面的左边

extra

这是页面的右边 这是页面的右边 这是页面的右边 这是页面的右边

css网页布局基础(行布局、列布局、圣杯布局、双飞翼布局)_第4张图片

 

【可以选用适当的布局,形成自身独特的布局方式】

你可能感兴趣的:(前端基础入门,css/css3)