爱玺玺

爱玺玺的生活日记本。wx:lb87626

手机背景图片大小自适应

方法1:background-size:100% 100%;

方法2:

.ztcrnav .lbg{position:absolute; overflow:hidden; z-index:0;}

.ztcrnav .posm{position:relative; height:100%;}

<div class="node ztcrnav">

  <div class="lbg">

     <img src="images/lbg.jpg" />

  </div>

  <div class="posm">


现在容器里来一个绝对定位容器,里面放张图片。

然后相对一个容器放在绝对上面。

测试可行。


实际使用时代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="viewport" content="width=device-width,minimum-scale=0.5,maximum-scale=1.0,user-scalable=no">

<meta name="format-detection" content="telephone=no">

<meta name="apple-mobile-web-app-capable" content="yes"> 

<title>曙光医院</title>

<style>

@charset "utf-8";


* {

margin: 0;

padding: 0;

font-family: "Microsoft Yahei";

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}


body {

font:normal 100%;

}


body,html {

width: 100%;

height: 100%;

}


body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {

margin: 0;

padding: 0;

}



ol,ul {

list-style: none;

}


a {

text-decoration: none;

color: #000;

}



img {

width: 100%; border:none;

}



.node{width:100%; overflow:hidden;}

.ztnav{ margin-top:2px;}

.ztnav li{ list-style:none; width:20%; float:left;}

.zttop{ border-top:solid 3px #dadada; border-bottom:solid 1px #dadada;}

.zttop .ba{width:26%; border-right:1px solid #dadada; margin:5px; float:left;}

.zttop .t0{width:64%; float:left; color:#6b6b6b;}

.zttop .t0 .t1{color:#6b6b6b; overflow:hidden; margin-top:4px; font-size:0.9em;}

.zttop .t0 .t1 span{ color:#ff4700; font-weight:bold;}

.zttop .rarrow{width:4%; float:left; margin-top:1%;}

.zttop .t0 .bic { width:40%; font-size:0.7em; margin-top:1%;}

.zttop .t0 .bic img{ width:40%; vertical-align:middle;}

.zttop .t0 .bic .god{ width:50%; float:left;}

.zttop .t0 .bic .book{ width:50%; float:right;}


.ztcrnav{margin-top:1%;}

.ztcrnav .lbg{position:absolute; overflow:hidden; z-index:0;}

.ztcrnav .posm{position:relative; height:100%;}

.ztcrnav .posm .mid{width:96%; margin:0 auto;}

.ztcrnav .posm .mid .txt{float:left; width:40%; margin-top:5%; margin-left:1%;}

.ztcrnav .posm .mid .ot{float:right; width:26%; margin-top:5%;}

.ztcrnav .posm .crcbt{ width:92%; margin:2% auto; padding-bottom:4%; overflow:hidden;}

.ztcrnav .posm .crcbt li{ float:left; display:block; list-style:none; width:25%; margin:4% 4%; overflow:hidden;}

</style>


</head>


<body>

<div class="node"><img src="images/ind_01.jpg" /></div>

<div class="node"><img src="images/ind_02.jpg" /></div>

<div class="node ztnav">

   <li><a href="javascripot:void(0)"><img src="images/na1.jpg" /></a></li>

   <li><a href="javascripot:void(0)"><img src="images/na2.jpg" /></a></li>

   <li><a href="javascripot:void(0)"><img src="images/na3.jpg" /></a></li>

   <li><a href="javascripot:void(0)"><img src="images/na4.jpg" /></a></li>

   <li><a href="javascripot:void(0)"><img src="images/na5.jpg" /></a></li>

</div>

<div class="node zttop">

   <div class="ba"><img src="images/ind_09_03.jpg"/></div>

   <div class="t0">

       <div class="t1"><span>HOT:</span>这里整个应该是调用了个js</div>

       <div class="bic">

          <div class="god"><img src="images/ind_09_06.jpg" /> <span>258</span></div><div class="book"><img src="images/god.jpg"/><span>103</span></div>

       </div>

   </div>

   <div class="rarrow"><img src="images/rarrow.jpg" /></div>

</div>

<div class="node"><img src="images/ind_05.jpg" /></div>

<div class="node ztcrnav">

  <div class="lbg">

     <img src="images/lbg.jpg" />

  </div>

  <div class="posm">

      <div class="mid">

         <div class="txt"><img src="images/ind_02.png"/></div>

         <div class="ot"><a href="javascripot:void(0);"><img src="images/ot.png"/></a></div>

      </div>

      <div class="mid"><img src="images/ind_04.png" /></div>

      <div class="mid crcbt">

          <li><a href="javascripot:void(0)"><img src="images/a1.png" /></a></li>

          <li><a href="javascripot:void(0)"><img src="images/a2.png" /></a></li>

          <li><a href="javascripot:void(0)"><img src="images/a3.png" /></a></li>

          <li><a href="javascripot:void(0)"><img src="images/a4.png" /></a></li>

          <li><a href="javascripot:void(0)"><img src="images/a5.png" /></a></li>

          <li><a href="javascripot:void(0)"><img src="images/a6.png" /></a></li>

          <li><a href="javascripot:void(0)"><img src="images/a7.png" /></a></li>

          <li><a href="javascripot:void(0)"><img src="images/a8.png" /></a></li>

          <li><a href="javascripot:void(0)"><img src="images/a9.png" /></a></li>

      </div>

  </div>

</div>

<div><img src="images/ind_07.jpg" /></div>

<div><img src="images/ind_08.jpg" /></div>

<div><img src="images/ind_09.jpg" /></div>

<div><img src="images/ind_10.jpg" /></div>

<div><img src="images/ind_11.jpg" /></div>

<div><img src="images/ind_12.jpg" /></div>

</body>

</html>


发表评论:

Powered By Z-BlogPHP 1.4 Deeplue Build 150101

Copyright Your WebSite.Some Rights Reserved.

蜀ICP备11021721号-5