飘城旅游网移动端

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
<title>旅游网</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>    
<nav class="nav">
<ul>
<li><a href="#" class="active">首页</a></li>
<li><a href="#">旅游资讯</a></li>
<li><a href="#">机票订购</a></li>
<li><a href="#">风景欣赏</a></li>
<li><a href="#">公司简介</a></li>
</ul>
</nav>    

<!-- headline -->
<div class="headline-bground">
<img src="img/headline.png">
<div class="headline-content">

<h2>旅游资讯</h2>
<p>介绍各种最新旅游信息、资讯要闻、景点攻略等</p>
</div>
</div>    
<div class="center">
<p class="title">热门旅游</p>

<figure>
<img src="img/tour1.jpg" alt="" />
<figcaption>
<div>
<h1>曼谷-芭堤雅6日游</h1>
<p>
包团特惠,超丰富景点,升级1晚国五,无自费,赠送600元
</p> 
<div class="price"><b>2864</b></div>
</figcaption>    
</figure>
<figure>
<img src="img/tour2.jpg" alt="" />
<figcaption>
<div>
<h1>曼谷-芭堤雅6日游</h1>
<p>
包团特惠,超丰富景点,升级1晚国五,无自费,赠送600元成人券...
</p> 
<div class="price"><b>2864</b></div>
</figcaption>    
</figure>
<figure>
<img src="img/tour3.jpg" alt="" />
<figcaption>
<div>
<h1>曼谷-芭堤雅6日游</h1>
<p>
包团特惠,超丰富景点,升级1晚国五,无自费,赠送600元成人券...
</p> 
<div class="price"><b>2864</b></div>
</figcaption>    
</figure>
<figure>
<img src="img/tour4.jpg" alt="" />
<figcaption>
<div>
<h1>曼谷-芭堤雅6日游</h1>
<p>
包团特惠,超丰富景点,升级1晚国五,无自费,赠送600元成人券...
</p> 
<div class="price"><b>2864</b></div>
</figcaption>    
</figure>
<figure>
<img src="img/tour5.jpg" alt="" />
<figcaption>
<div>
<h1>曼谷-芭堤雅6日游</h1>
<p>
包团特惠,超丰富景点,升级1晚国五,无自费,赠送600元成人券...
</p> 
<div class="price"><b>2864</b></div>
</figcaption>    
</figure>
<figure>
<img src="img/tour6.jpg" alt="" />
<figcaption>
<div>
<h1>曼谷-芭堤雅6日游</h1>
<p>
包团特惠,超丰富景点,升级1晚国五,无自费,赠送600元成人券...
</p> 
<div class="price"><b>2864</b></div>
</figcaption>    
</figure>
<figure>
<img src="img/tour7.jpg" alt="" />
<figcaption>
<div>
<h1>曼谷-芭堤雅6日游</h1>
<p>
包团特惠,超丰富景点,升级1晚国五,无自费,赠送600元成人券...
</p> 
<div class="price"><b>2864</b></div>
</figcaption>    
</figure>
<figure>
<img src="img/tour8.jpg" alt="" />
<figcaption>
<div>
<h1>曼谷-芭堤雅6日游</h1>
<p>
包团特惠,超丰富景点,升级1晚国五,无自费,赠送600元成人券...
</p> 
<div class="price"><b>2864</b></div>
</figcaption>    
</figure>
<figure>
<img src="img/tour1.jpg" alt="" />
<figcaption>
<div>
<h1>曼谷-芭堤雅6日游</h1>
<p>
包团特惠,超丰富景点,升级1晚国五,无自费,赠送600元成人券...
</p> 
<div class="price"><b>2864</b></div>
</figcaption>    
</figure>
<figure>
<img src="img/tour9.jpg" alt="" />
<figcaption>
<div>
<h1>曼谷-芭堤雅6日游</h1>
<p>
包团特惠,超丰富景点,升级1晚国五,无自费,赠送600元成人券...
</p> 
<div class="price"><b>2864</b></div>
</figcaption>    
</figure>

<footer>
<p>客户端 | 触屏版 | 电脑版</p>
<p>Copyright © YCKU 瓢城旅行社 | 苏ICP备120110119号</p>
</footer>
</div>
</body>
</html>

 

/*通用设置*/
*{
margin: 0;
padding: 0;
}
ul,ol{
list-style: none;
}
a{
text-decoration: none;
}
body{
font-family: "微软雅黑";
color: #666;
}
img{
max-width: 100%;
display: block;
}
/*header*/
.nav{
width: 100%;
height: 45px;
background: #333333;
}
.nav li{
float: left;
width: 20%;
}
.nav li a{
text-align: center;
display: block;
line-height: 45px;
color: #fff;
}
.nav .active,.nav li a:hover{
background: #000;
}

/*headline*/
.headline-bground{
clear: both;
position: relative;
max-width: 640px;
margin: 0 auto;
/*border: 1px solid red;*/
}
.headline-content{

position: absolute;
top: 28%;
left: 30px;
color: #fff;

}
.headline-content h2{
font-size: 22px;
}
.headline-content p{
font-size: 16px;
font-weight: bold;
}

/*tour*/
.center{
max-width: 640px;
margin: 0 auto;
}
/*.center:after{
content: ".";
display: block;
visibility: hidden;
clear: both;
height: 0;
}*/
.center .title{
font-size: 23px;
font-weight: bolder;
margin-top: 8px;
margin-bottom: 8px;
padding-bottom: 8px;
border-bottom: 1px dashed #666;
padding-left: 5px;
}
.center figure{
box-sizing: border-box;
margin-top: 15px;
/*width: 100%;*/
border-radius: 4px;
font-size: 16px;
letter-spacing: 1px;
color: #777;
position: relative;     
}
.center figure img{    
width: 50%; 
}
.center figure figcaption{
position: absolute;
left: 50%;
padding-left: 13px;
top: 0;
width: 50%;
bottom: 0;
box-sizing: border-box;
/*border: 1px solid red;*/
}
.center figcaption h1{
letter-spacing: 0px;
font-size: 23px;
color: #666;
font-weight: bold;
}
.center figcaption p{
font-size: 21px;
color: #666;
margin-top: 5px;
letter-spacing: 0px;
/*text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;

*/    overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

}
.price{
letter-spacing: 0;
font-size: 18px;
color: #FF6600;
padding-bottom: 5px;
position: absolute;
bottom: 0;

}
.price b{
margin-bottom: 0px;
font-size: 27px;    
}
.center footer{
background: #222;
text-align: center;
padding: 5px;
line-height: 1.5em;
}


/*媒体查询,大于480px小于640px*/
@media (min-width: 480px) and (max-width: 640px) {

}

/*媒体查询,小于480px*/
@media (max-width: 480px) {

.center figcaption h1{font-size: 18px;}
.center figcaption p{font-size: 17px;}
.price{font-size: 16px;}
.price b{font-size: 20px;}
.headline-content h2{font-size: 16px; }
.headline-content p{font-size: 14px;}
.nav li a{font-size: 12px;}
.center .title{font-size: 16px;}
.center footer{font-size: 12px;}
}

 

飘城旅游网移动端

上一篇:Python标准库: functools (cmp_to_key, lru_cache, total_ordering, partial, partialmethod, reduce, singledispatch, update_wrapper, wraps)


下一篇:dapper.common新增概念object to sql