飘城旅游网移动端
作者：互联网
<!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;}
}
标签：移动,飘城,center,芭堤雅,width,日游,旅游网,font,size 来源： https://www.cnblogs.com/lufeibin/p/11248492.html