html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>蓝色手机WAP旅游网站模板</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=1.0">
<link rel="stylesheet" href="css/demo_style.css" type="text/css">
<link rel="stylesheet" href="css/demo_index.css" type="text/css">
<script type="js/demo_adaptive.js"></script>
</head>
<body>
<header>
<i class="logo"></i>
<a href="#"></a>
<div class="sch">
<p><img src="images/icon/sch.png" alt="">搜索目的地、帖子、景点</p>
</div>
</header>
<div id="_contain">
<div class="banner">
<img src="images/index/banner.png" alt="">
<div class="logo-dbs">
<div class="dbs-img">
<img src="images/icon/logo.png" alt="">
</div>
<p>全球低价游,满足你世界梦!</p>
</div>
</div>
<div class="menu">
<div class="nav">
<img src="images/menu/nav_1.png" alt="">
<p>看攻略</p>
</div>
<div class="nav">
<img src="images/menu/nav_2.png" alt="">
<p>抢折扣</p>
</div>
<div class="nav">
<img src="images/menu//nav_3.png" alt="">
<p>看酒店</p>
</div>
<div class="nav">
<img src="images/menu/nav_4.png" alt="">
<p>找附近</p>
</div>
</div>
<div class="name">
<p>旅游推荐</p>
</div>
<div class="contain">
<div class="ad">
<img src="images/index/rcd_1.png" alt="">
</div>
<div class="ad-left">
<img src="images/scenics/scenic_1.png" alt="">
</div>
<div class="ad-right">
<img src="images/scenics/scenic_2.png" alt="">
</div>
</div>
<div class="name">
<p>折扣游</p>
</div>
<div class="favorable">
<div class="fb">
<div class="fb-lt">
<img src="images/scenics/scenic_3.png" alt="">
<p class="fb-name">塞班岛5-6天(欢乐自由行)</p>
<p class="price">
<span class="discount">4.7折</span>
<span class="num"><big>5699</big>元起</span>
</p>
</div>
</div>
<div class="fb">
<div class="fb-lt">
<img src="images/scenics//scenic_4.png" alt="">
<p class="fb-name">夏威夷7天6晚(三天跟团三天自由行)</p>
<p class="price">
<span class="discount">8.7折</span>
<span class="num"><big>11799</big>元起</span>
</p>
</div>
</div>
<div class="fb">
<div class="fb-lt">
<img src="images/scenics/scenic_5.png" alt="">
<p class="fb-name">体验全球最长的过山车15天超爽旅游</p>
<p class="price">
<span class="discount">6.2折</span>
<span class="num"><big>21099</big>元起</span>
</p>
</div>
</div>
<div class="fb">
<div class="fb-lt">
<img src="images/scenics//scenic_6.png" alt="">
<p class="fb-name">美国纽约曼哈顿5天游(体验不一样的风情)</p>
<p class="price">
<span class="discount">2.8折</span>
<span class="num"><big>2889</big>元起</span>
</p>
</div>
</div>
</div>
<div class="more">
<p>查看更多<img src="images/icon/arr-right.png" alt=""></p>
</div>
</div>
<footer>
<div class="foot act">
<img src="images/foot/ft_1_1.png" alt="">
<p>推荐</p>
</div>
<div class="foot">
<img src="images/foot/ft_2.png" alt="">
<p>目的地</p>
</div>
<div class="foot">
<img src="images/foot/ft_3.png" alt="">
<p>帖子</p>
</div>
<a href="person/demo_person.html">
<div class="foot">
<img src="images/foot/ft_4.png" alt="">
<p>我的</p>
</div>
</a>
</footer>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
/* 查看更多 */
$(".more").click(function(){
for(i = 0;i < 4;i++){
$(".favorable").append(`
<div class="fb">
<div class="fb-lt">
<img src="images/scenics/scenic_5.png" alt="" />
<p class="fb-name">体验全球最长的过山车15天超爽旅游</p>
<p class="price">
<span class="discount">2.8折</span>
<span class="num"><big>2889</big>元起</span>
</p>
</div>
</div>
`)
}
})
</script>
</body>
</html>
demo_style.css
/* CSS Document */
body, div, ol, ul, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, p, form, fieldset, legend, input, button {
margin: 0;
padding: 0;
-webkit-tap-highlight-color: rgba(255,255,255,0);
}
html {
width: 100%;
font-family: 'Heiti SC', 'Microsoft YaHei';
font-size: 100px;
outline: 0;
-webkit-text-size-adjust: none;
}
body {
width: 100%;
margin: 0;
-webkit-user-select: none;
position: relative;
background-color: #fff;
}
a:hover, a:link, a:visited, a {
color: inherit;
text-decoration: none;
}
ul, li {
list-style: none
}
i {
font-style: normal
}
header {
width: 12.42rem;
height: 1.35rem;
background-color: #7ecef4;
}
header i.logo {
float: left;
display: block;
width: 0.85rem;
height: 0.8rem;
margin: 0.24rem 0 0.24rem 0.18rem;
background: url(../images/icon/logo.png) no-repeat;
background-size: 0.85rem 0.8rem;
}
header .sch {
float: left;
width: 11rem;
height: 0.8rem;
margin: 0.24rem 0 0.24rem 0.18rem;
border-radius: 0.1rem;
background-color: #68b2d5;
text-align: center;
}
header .sch p {
line-height: 0.8rem;
color: #fff;
font-size: 0.4rem;
}
header .sch p img {
width: 0.45rem;
height: 0.44rem;
vertical-align: middle;
}
footer{
background-color: #f2f2f2;
width: 12.42rem;
height: 1.58rem;
position: fixed;
bottom: 0;
overflow: hidden;
}
footer .foot{
float: left;
width: 1rem;
height: 1.2rem;
margin: 0.15rem 0 0.2rem 1.68rem;
text-align: center;
overflow: hidden;
color: #7ecef4;
}
footer .foot img{
width: 0.7rem;
height: 0.7rem;
display: block;
margin: 0 auto;
}
footer .foot p{
margin-top: 0.15rem;
font-size: 0.3rem;
}
footer .act{
color: #9c9c9c;
}
.logo-dbs{
height: 0.9rem;
overflow: hidden;
}
.logo-dbs .dbs-img{
float: left;
width: 1rem;
height: 0.8rem;
border-right: 1px solid #fff;
text-align: center;
}
.logo-dbs .dbs-img img{
width: 0.85rem;
height: 0.8rem;
display: block;
}
.logo-dbs p{
float: left;
font-size: 0.35rem;
line-height: 0.8rem;
margin-left: 0.15rem;
color: #fff;
}
.jg{
background:red;
width: 12.42rem;
height: 1.58rem;
}
|
demo_index.css
/* CSS Document */
#_contain {
margin-bottom: 2rem;
}
.logo-dbs {
position: absolute;
bottom: 1rem;
left: 3rem;
}
.banner {
position: relative;
width: 12.42rem;
height: 6.6rem;
overflow: hidden;
}
.banner img {
width: 12.42rem;
height: 6.6rem;
}
.menu{
width: 12.42rem;
height: 3.03rem;
border-bottom:5px solid #d9d9d9;
background-color: #e0e0e0;
}
.menu .nav{
float: left;
width: 1.42rem;
height: 2.2rem;
margin: 0.43rem 0.51rem 0 1.04rem;
overflow: hidden;
font-size: 0.4rem;
text-align: center;
}
.menu .nav img{
width: 1.42rem;
height: 1.42rem;
}
.menu .nav p{
font-size: 0.4rem;
}
.name{
width: 12.42rem;
height: 1.05rem;
font-size: 0.38rem;
line-height: 1.3rem;
border-bottom: 1px solid #e1e1e1;
}
.contain{
width: 12.14rem;
height: 100%;
margin: 0 0.14rem;
overflow: hidden;
}
.ad{
width: 12.14rem;
height: 5rem;
margin-top: 0.3rem;
}
.ad img{
width: 12.14rem;
height: 5rem;
}
.ad-left,.ad-right{
width: 5.92rem;
height: 3.8rem;
float: left;
margin-top: 0.3rem;
overflow: hidden;
}
.ad-left{
margin-right: 0.3rem;
}
.ad-left img,.ad-right img{
width: 5.92rem;
height: 3.8rem;
}
.favorable{
width: 12.42rem;
height: 100%;
overflow: hidden;
}
.fb:nth-child(odd){
float: left;
width:6.18rem;
height: 6.7rem;
border-right: 1px solid #e1e1e1;
border-bottom: 1px solid #e1e1e1;
overflow: hidden;
}
.fb:nth-child(even){
float: left;
width:6.18rem;
height: 6.7rem;
border-bottom: 1px solid #e1e1e1;
overflow: hidden;
}
.cbr{
border-right: none;
}
.fb-lt{
width: 5.9rem;
height:6.5rem;
margin: 0.3rem 0.14rem 0 0.14rem;
}
.fb-lt img{
width: 5.9rem;
height: 3.8rem;
display: block;
}
.fb-lt p{}
.fb-lt p.fb-name{
margin-top: 0.3rem;
font-size: 0.48rem;
}
.fb-lt p.price{
margin-top: 0.2rem;
font-size: 0.3rem;
}
.fb-lt p span{
font-size: 0.3rem;
color: #d7d7d7;
}
.fb-lt p span.discount{
float: left;
}
.fb-lt p span.num{
float: right;
margin-right: 0.5rem;
}
.fb-lt p span big{
font-size: 0.5rem;
color: #ff3500;
}
.more{
width: 12.42rem;
height: 1.37rem;
line-height: 1.37rem;
text-align: center;
cursor: pointer;
}
.more p{
font-size: 0.4rem;
color: #7ecef4;
}
.more p img{
width: 0.2rem;
height: 0.33rem;
margin-left: 0.2rem;
}
demo_adaptive.js
/* rem布局代码 */
(function (doc, win) {
var docEl = doc.documentElement
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
recalc = function () {
var clientWidth = docEl.clientWidth
if (!clientWidth) return
docEl.style.fontSize = 100 * (clientWidth / 1242) + 'px'
}
if (!doc.addEventListener) return
win.addEventListener(resizeEvt, recalc, false)
doc.addEventListener('DOMContentLoaded',recalc,false)
})(document,window)