网页布局-单页背景适应屏幕缩放不影响

效果：

 

要点：

定位，透明，背景，css3效果，兼容

 

html 代码：

    
    
    
	
	
  
  
  






  


  
  


    

        111
        222
    

    

      111
      222
  
  



  

    

      
      

        
          
大标题
          

          
小标题
      
    

    
    

        
          
大标题
          

          
小标题
        
      
    
  

css样式表

/* 外框 */
.box_zt{ width: 100%; height: 100%; position: fixed;}/* 外框设定生成固定定位的元素，相对于浏览器窗口进行定位 */


/* 上面部分 */
.shang{ width: 100%; height: 50%; position: relative; background: url(img/1a.jpg) center center no-repeat; background-size: cover
;} /* 默认尺寸高度485px */
.shang .shang_jz{ width: 100%; height: 120px; position: absolute; top: 10px; text-align: center; background: #e1e1e1;}
.shang .shang_jz a{ display: inline-block; width: 200px; height: 60px; background: chocolate;}
.shang .shang_jz1{ width: 100%; height: 120px; position: absolute; bottom: 10px; text-align: center; background: #999;}
.shang .shang_jz1 a{ display: inline-block; width: 200px; height: 60px; background: chocolate;}


/* 下面部分 */
.xia{width: 100%; height: 50%; position: relative; background: #000;}
.xia ul li{ width: 50%; position: absolute; height: 100%; }
.xia ul .li1{ background: url(img/3.jpg) center center no-repeat; background-size: cover; left: 0; opacity: 0.8; }
.xia ul .li2{ background: url(img/4.jpg) center center no-repeat; background-size: cover; right: 0; opacity: 0.8; }
.xia ul li a{ display: block; width: 100%; height: 100%; background: cadetblue;  background: rgba(1,98,169,0.9);
transition: all 2s;
-moz-transition: all 2s; /* Firefox 4 */
-webkit-transition: all 2s; /* Safari 和 Chrome */
-o-transition: all 2s; /* Opera */
}
.xia ul li a:hover{background: rgba(0,121,97,0.5);}
.xia ul li a h3{width: 100%; text-align: center; color: #fff; position: relative;}
.xia ul .li1 a .span{ width: 100%; height: 60px; margin-top: 20px; text-align: center; position: relative;}
.xia ul .li1 a .span img{ width: 30px; height: 32px; left: 0; position: relative; opacity: 0; 
transition: all 1s;
-moz-transition: all 1s; /* Firefox 4 */
-webkit-transition: all 1s; /* Safari 和 Chrome */
-o-transition: all 1s; /* Opera */
}
.xia ul .li1 a .span:hover img{ width: 30px; height: 32px; left: -100px; opacity: 1;}
.xia ul .li2 a .span{ width: 100%; height: 60px; margin-top: 20px; text-align: center; position: relative;}
.xia ul .li2 a .span img{ width: 30px; height: 32px; left: 0; position: relative; opacity: 0;
transition: all 1s;
-moz-transition: all 1s; /* Firefox 4 */
-webkit-transition: all 1s; /* Safari 和 Chrome */
-o-transition: all 1s; /* Opera */
 }
.xia ul .li2 a .span:hover img{ width: 30px; height: 32px; left: 100px; opacity: 1;}
.xia ul li a p{ width: 100%; text-align: center; color: #fff; position: relative;}

/* 针对透明透明属性 使用opacity: ; 属性会影响子元素跟着透明，这里使用RGB颜色元素属性调整；background: rgba(1,98,169,0.9);  元素里面前三个是颜色 后一个是透明度 */

/* 个别样式说明
background-size: cover;（针对html5新属性 控制背景图片 会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。）

display: inline-block;（设置为行内块元素）  和 display:blick(此元素将显示为块级元素，此元素前后会带有换行符) 在父级的定位上是有区别的 
width:100px;
transition: width 2s;
-moz-transition: width 2s; 
-webkit-transition: width 2s; 
-o-transition: width 2s; 
 */

 /* 图形标签使用Font Awesome 架构
 这里使用阿里图标
  */