移动端的网页试做

最新推荐文章于 2023-11-20 09:01:07 发布

a23180012142

最新推荐文章于 2023-11-20 09:01:07 发布

阅读量194

点赞数

原文链接：http://www.cnblogs.com/thestudy/p/5604951.html

版权

<!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>