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

最新推荐文章于 2024-08-14 19:32:44 发布

金色小毛

最新推荐文章于 2024-08-14 19:32:44 发布

阅读量1.8k

点赞数 1

分类专栏：网站布局效果文章标签： g'

本文链接：https://blog.csdn.net/u013487813/article/details/81300492

版权

网站布局效果专栏收录该内容

6 篇文章 0 订阅

订阅专栏

效果：

要点：

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

html 代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>固定背景图片，左右个一个显示</title>
	<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" ></script>
  <script src="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
  <script src="http://apps.bdimg.com/libs/respond.js/1.4.2/respond.js"></script>
<style>
/* js部分
html5shiv：解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题。
respond.min:让不支持css3 Media Query的浏览器包括IE6-IE8等其他浏览器支持查询。
由于IE6/IE7/IE8还有很大一部分用户，为了让网站浏览者都能正常的访问HTML5网站
 */

</style>
</head>


<body>

  <!--外壳-->
<div id="box_zt" class="box_zt">

  <!--上面部分-->
  <div class="shang">

    <div class="shang_jz">
        <a href="#">111</a>
        <a href="#">222</a>
    </div>

    <div class="shang_jz1">
      <a href="#">111</a>
      <a href="#">222</a>
  </div>
  </div>
<!--上面部分 end-->

<!--下面部分-->
  <div class="xia">
    <ul>
      <!--左-->
      <li class="li1">
        <a href="#">
          <h3>大标题</h3>
          <div class="span"><img src="img/1.png"></div>
          <p>小标题</p>
      </a>
    </li>

    <!--右-->
    <li class="li2">
        <a href="#">
          <h3>大标题</h3>
          <div class="span"><img src="img/2.png"></div>
          <p>小标题</p>
        </a>
      </li>
    </ul>
  </div>
<!--下面部分 end-->
</div>
<!--外壳 end-->

</body>
</html>

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 架构
 这里使用阿里图标
  */