<!DOCTYPE html>
<html>
<head>
<title>H5練習頁</title>
<meta charset="utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="applicable-device" content="mobile"><!--【谷歌開放適配規則】-->
<meta http-equiv="Cache-Control" content="no-transform" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephone=no" name="format-detection" />
<meta name="baidu-tc-cerfication" content="98dcb862c6c6e54c0b0142acecc1530c" />
<meta name="baidu-tc-cerfication" content="98dcb862c6c6e54c0b0142acecc1530c" />
<meta name="applicable-device" content="mobile">
<link rel="apple-touch-icon" href="http://www.rong360.com/static/mobile/img/rong360_icon.png" />
<link rel="apple-touch-icon" sizes="72x72" href="http://www.rong360.com/static/mobile/img/rong360_icon_72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="http://www.rong360.com/static/mobile/img/rong360_icon_114.png" />
<link rel="apple-touch-icon-precomposed" href="http://www.rong360.com/static/mobile/img/rong360_icon_114.png" />
<link rel="apple-touch-startup-image" href="http://www.rong360.com/static/mobile/img/startup.png">
<link rel="shortcut icon" href="http://www.rong360.com/favicon.ico" />
<link rel="stylesheet" type="text/css" href="style.css">
<style type="text/css">
* {
margin: 0;
outline: 0;
padding: 0;
border: 0;
}
ul li {
list-style: none;
}
img {
width: 100%;
vertical-align: top;
}
a {
cursor: pointer;
text-decoration: none;
}
body {
background: #efeff4;
}
.clearfix:after {
content: ".";
display: block;
overflow: hidden;
height: 0;
clear: both;
visibility: hidden;
}
[class*=icon-] {
margin-right: 0.4rem;
}
.header {
display: box; /* OLD - Android 4.4- */
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
width: 100%;
justify-content: space-between;
background-color: #6eaedb;
height: 2.5rem;
color: #ffffff;
padding: 0 0.267rem;
box-sizing: border-box;
font-size: 1.067rem;
font-weight: bold;
}
.header * {
display: inline-block;
height: 2.5rem;
line-height: 2.5rem;
color: #ffffff;
}
.title {
width: 100%;
height: 3.0rem;
background: #efeff4;
line-height: 3.0rem;
display: -webkit-box;
position: relative;
font-weight: bold;
}
.title p {
height: 1px;
border-top: solid 1px #cccccc;
margin: 1.5rem auto;
width: 60%;
}
.title span {
display: block;
height: 3.0rem;
line-height: 3.0rem;
text-align: center;
width: 40%;
margin-left: 30%;
position: absolute;
background: #efeff4;
color: #4773b9;
font-size: 1.125rem;
}
.hot-rank li.item{
display: block;
margin-bottom: 0.6rem;
position: relative;
background: -webkit-linear-gradient(#ffffff, #c9eaed);
}
.hot-rank li .number-bg {
display: block;
width: 0;
height: 0;
border-top: 1.5rem solid #ff4e49;
border-right: 1.5rem solid transparent;
position: absolute;
}
.hot-rank li .number {
position: absolute;
top: 0.1rem;
left: 0.2rem;
font-size: 0.75rem;
color: #ffffff;
}
.hot-rank li .tit {
border-bottom: 1px solid #efeff4;
padding: 0.3rem 0;
position: relative;
}
.hot-rank li .tit span {
height: 2rem;
line-height: 2rem;
margin-left: 2rem;
margin-right: 8.5rem;
font-size: 1rem;
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
font-weight: bold;
color: #666666;
}
.hot-rank li .tit a {
position: absolute;
top: 0.3rem;
right: 0;
margin-right: 1rem;
font-size: 1rem;
background-color: #ff4e49;
border-radius: 1.6rem;
height: 2rem;
line-height: 2rem;
width: 7rem;
text-align: center;
color: #ffffff;
font-weight: bold;
}
.hot-rank .pic-des{
padding: 1rem;
}
.hot-rank .pic-des img{
width: 7.965rem;
height: 4.893rem;
float: left;
margin-right: 1rem;
}
.hot-rank .pic-des ul li{
font-size: 0.75rem;
height: 1.631rem;
line-height: 1.631rem;
color: #333333;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.fea-theme {
width: 100%;
background-color: #ffffff;
padding-top: 1.2rem;
}
.fea-theme li {
width: 50%;
text-align: center;
float: left;
margin-bottom: 1.5rem;
}
.fea-theme li img{
width: 7.965rem;
height: 4.893rem;
}
.fea-theme li p{
color: #666666;
width: 7.965rem;
font-size: 0.9rem;
height: 1.8rem;
line-height: 1.8rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin: 0 auto;
}
.fea-theme li a{
width: 7.965rem;
display: inline-block;
height: 2rem;
line-height: 2rem;
background-color: #ff4e49;
border-radius: 2rem;
color: #ffffff;
font-weight: bold;
font-size: 1rem;
}
.morecredit {
background-color: #ffffff;
padding: 0 1rem 1rem;
}
.morecredit a {
display: block;
width: 100%;
height: 3rem;
line-height: 3rem;
font-size: 1rem;
border-radius: 0.5rem;
color: #ffffff;
background-color: #4773b9;
text-align: center;
font-weight: bold;
}
</style>
</head>
<body>
<div class="header">
<a href="#"><</a>
<span>興業銀行熱門信用卡</span>
<a>融360</a>
</div>
<img src="http://m.rong360.com/static/credit/img/mobile_v2/cardlist-bybank/banner.jpg">
<div class="title"><span>熱申排行榜</span><p> </p></div>
<ul class="hot-rank">
<li class="item">
<span class="number-bg"></span>
<span class="number">1</span>
<div class="tit">
<span>興業淘寶網聯名信用卡</span>
<a href="#">在線申請</a>
</div>
<div class="pic-des">
<img src="http://img.rong360.com/3e8/f884f/cimg/a7/a79741d19e2eb7d70aa495e224891bab450479ef_170x106.jpeg">
<ul>
<li><i class="icon-accessibility"></i>免首年，刷卡5次免次年</li>
<li><i class="icon-tongue"></i>積分兌換人民幣</li>
<li><i class="icon-angry"></i>盡享200萬航空意外保險</li>
</ul>
</div>
</li>
<li class="item">
<span class="number-bg"></span>
<span class="number">2</span>
<div class="tit">
<span>興業淘寶網聯名信用卡</span>
<a href="#">在線申請</a>
</div>
<div class="pic-des">
<img src="http://img.rong360.com/3e8/f884f/cimg/a7/a79741d19e2eb7d70aa495e224891bab450479ef_170x106.jpeg">
<ul>
<li><i class="icon-accessibility"></i>免首年，刷卡5次免次年</li>
<li><i class="icon-tongue"></i>積分兌換人民幣</li>
<li><i class="icon-angry"></i>盡享200萬航空意外保險</li>
</ul>
</div>
</li>
<li class="item">
<span class="number-bg"></span>
<span class="number">3</span>
<div class="tit">
<span>興業淘寶網聯名信用卡</span>
<a href="#">在線申請</a>
</div>
<div class="pic-des">
<img src="http://img.rong360.com/3e8/f884f/cimg/a7/a79741d19e2eb7d70aa495e224891bab450479ef_170x106.jpeg">
<ul>
<li><i class="icon-accessibility"></i>免首年，刷卡5次免次年</li>
<li><i class="icon-tongue"></i>積分兌換人民幣</li>
<li><i class="icon-angry"></i>盡享200萬航空意外保險</li>
</ul>
</div>
</li>
</ul>
<img src="http://m.rong360.com/static/credit/img/mobile_v2/cardlist-bybank/banner-md.png">
<div class="title"><span>特色主題卡</span><p> </p></div>
<ul class="fea-theme clearfix">
<li>
<img src="http://img.rong360.com/3e8/f884f/cimg/a7/a79741d19e2eb7d70aa495e224891bab450479ef_170x106.jpeg">
<p>100支付寶積分=1元人民幣</p>
<a href="#">在線申請</a>
</li>
<li>
<img src="http://img.rong360.com/3e8/f884f/cimg/a7/a79741d19e2eb7d70aa495e224891bab450479ef_170x106.jpeg">
<p>100支付寶積分=1元人民幣</p>
<a href="#">在線申請</a>
</li>
<li>
<img src="http://img.rong360.com/3e8/f884f/cimg/a7/a79741d19e2eb7d70aa495e224891bab450479ef_170x106.jpeg">
<p>100支付寶積分=1元人民幣</p>
<a href="#">在線申請</a>
</li>
<li>
<img src="http://img.rong360.com/3e8/f884f/cimg/a7/a79741d19e2eb7d70aa495e224891bab450479ef_170x106.jpeg">
<p>100支付寶積分=1元人民幣</p>
<a href="#">在線申請</a>
</li>
</ul>
<div class="morecredit">
<a>更多信用卡</a>
</div>
<script type="text/javascript">
(function() {
var rem, dpr, time, doc = window.document,
docEl = doc.documentElement,
viewport = doc.querySelector('meta[name="viewport"]'),
zoomScale,
zoomScaleNum;
if (viewport) {
//console.warn("將根據已有的meta標籤來設置縮放比例");
zoomScale = viewport.getAttribute("content").match(/initial\-scale=(["']?)([\d\.]+)\1?/);
if(zoomScale){
zoomScaleNum = parseFloat(zoomScale[2]);
dpr = parseInt(1 / zoomScaleNum);
}
}
if (!dpr && !zoomScaleNum) {
var os = (window.navigator.appVersion.match(/android/gi), window.navigator.appVersion.match(/iphone/gi)),
dpr = window.devicePixelRatio;
dpr = os ? dpr >= 3 ? 3 : dpr >= 2 ? 2 : 1 : 1;
zoomScaleNum = 1 / dpr;
}
window.addEventListener("resize",
function() {
clearTimeout(time);
time = setTimeout(changeRem, 300);
},false);
//改變基準rem
function changeRem(){
var docWidth = docEl.getBoundingClientRect().width;
if(docWidth / dpr > 540){
docWidth = 540 * dpr;
}
//rem字號以320下的16px爲基線進行等比縮放
rem = docWidth/320 * 16;
//console.log(dpr);
//console.log(rem);
docEl.style.fontSize = rem + "px";
}
changeRem();
})();
</script>
</body>
</html>我的第一個wap端響應式頁面
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
vs2022編譯.netframework4.0工程
從其他機器拷貝一個複製到下面的目錄 C:\Program Files (x86)\Reference Assemblies\Microsoft\Framework\.NETFramework