不專業 RWD 現成模版範例

css rwd html

nlstudio 2022-05-12 11:53:31 ‧ 1410 瀏覽

分享至

透過控制 p margin:5px auto; 調整文字上下間距
透過 @media screen and (max-width: @media screen and (min-width:
調整在各解析度排版

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="script/jquery-1.6.4.min.js"></script>
<style>
body {
min-width: 320px;
font-family: 'microsoft yahei',Verdana,Arial,Helvetica,sans-serif;
background-color:#21211F;
-webkit-text-size-adjust: none
}

* {
  box-sizing: border-box;
}

.left {
  padding: 20px;
  float: left;
  width: 15%; /* The width is 20%, by default */
}

.main {
  padding: 20px;
  float: left;
  width: 60%; /* The width is 60%, by default */
}

.right {
  padding: 20px;
  float: left;
  width: 15%; /* The width is 20%, by default */
}

.logo img{ 
  display:block; 
  margin:auto;
}
.main{ 
  display:block; 
  margin:auto; 
  text-align:center;
}
.main p{
  color:#A2A2A2; 
  font-size:16px;
  text-align:center; 
  margin:5px auto;
}
.div_ip{ 
		color:#A2A2A2; 
    text-align:center; 
    font-size:16px; 
    font-weight:normal;
    margin-top:40px;
    margin-bottom:30px;
}


@media screen and (max-width: 800px) {
  .left, .main, .right {
    width: 100%;
  }
  .logo img{ 
    display:block; 
    margin:auto;
    height:104px;
  }
}

@media screen and (min-width: 801px) {
  .left, .main, .right {
    width: 100%;
  }

  .logo img{ 
    display:block; 
    margin:auto;
    height:170px;
  }

  .main p{
    font-size:18px;
    margin:5px auto;
  }
  .div_ip{  
      font-size:18px; 
      margin-top:80px;
      margin-bottom:60px;
  }

}

</style>

<script>

  $( document ).ready(function() {
      $.get('https://www.cloudflare.com/cdn-cgi/trace', function(data) {
      data = data.trim().split('\n').reduce(function(obj, pair) {
          pair = pair.split('=');
          return obj[pair[0]] = pair[1], obj;
      }, {});
      $(".div_ip").text("Your IP/您的IP : "+data.ip);
      });
  });
  </script>

</head>
<body>

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


<div class="main">
  <div class="logo"><img src="images/tb-ipBlock.png" /></div>
  <div class="div_ip"></div>
  <p>您的所在地不在我们的服务允许范围内,</p>
  <p>我们暂时无法为您服务。敬请谅解!<br><br></p>
  <p>Due to the location in which you are trying to</p>
  <p>access to this page has been restricted.</p>
  <p>We apologize for the inconvenience caused.</p>
</div>

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

</body>
</html>