标签：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<script src="../js/rem.js"></script>
<style>
*{margin: 0;padding: 0;}
body{
background: #DFDFDF;
}
.header{
width: 16 rem;
height: 11.52rem;
background-image: url(../img/621/phbanner_d8a9fb8.png);
background-size: 100% 100%;
margin-bottom: .6rem;}
.content{width: 15.146666666666667rem;
height: 100rem;
background-color: #FFFFFF;
margin: 0 auto;}
.content{
padding-top: .5rem;
}
.tip{
width: 5.12rem;
height: 1.024rem;
background: orange;
border-radius: 0 12px 12px 0;
color: #FFFFFF;
text-align: center;
font-size: 50px;
}
.model{
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
.model_l{
width: 5rem;
font-size: 20px;
margin-left:.5rem;
}
.model_r{
width: 5.973333333333334rem;
height: 8.96rem;
background: url(../img/621/1_05274d6.png) ;
background-size: 100% 100%;
flex: none;
-webkit-flex: none;
margin-right: .5rem;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
</div>
<div class="content">
<div class="tip">抢票攻略</div>
<div class="model">
<div class="model_l">
<h1>第一步：打开</h1>
<p>这里有个严肃的问题</p>
<p>这玩意儿之后怎么处理？</p>
</div>
<div class="model_r"></div>
</div>
<div class="model">
<div class="model_r"></div>
<div class="model_l">
<h1>第一步：打开</h1>
<p>这里有个严肃的问题</p>
<p>这玩意儿之后怎么处理？</p>
</div>
</div>
</div>
</div>
</body>
</html>
标签：
原文地址：http://www.cnblogs.com/thestudy/p/5604951.html
