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