html和css学完后，基本上能够看见的静态页面都可以写出来了
以下为学习这一阶段制作的七个静态页面，我把html文件托管到了github的服务器
首页代码
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<link rel="stylesheet" href="../css/index-style.css"/>
</head>
<body>
<div class="wrap">
<div class="nav">
<div class="logo fl">
<img src="../img/Logo.png"/>
<img src="../img/Logo-text.png">
</div>
<div class="main fl">
<div class="home fl">
<div style="text-align: center;">
<a href="https://razuberiii.github.io/html/travel/index/html/index.html">首页</a>
</div>
</div>
<div class="region fl">
<div style="text-align: center;">
<a href="https://razuberiii.github.io/html/travel/area/html/area.html">地区</a>
</div>
</div>
<div class="discount fl">
<div style="text-align: center;">
<a href="https://razuberiii.github.io/html/travel/offer/html/offer.html">特惠</a>
</div>
</div>
<div class="news fl">
<div style="text-align: center;">
<a href="https://razuberiii.github.io/html/travel/info/html/info.html">咨询</a>
</div>
</div>
<div class="travels fl">
<div style="text-align: center;">
<a href="https://razuberiii.github.io/html/travel/record/html/record.html">游记</a>
</div>
</div>
</div>
<div class="login fr">
<div class="fr">
<a href="https://razuberiii.github.io/html/travel/register/html/register.html">
<span>注册</span>
</a>
</div>
<div class="line fr"></div>
<div class="fr">
<a href="https://razuberiii.github.io/html/travel/login/html/login.html">
<span>登录</span>
</a>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
<div class="main-pic">
<div class="circle">
<div class="fl"></div>
<div class="blank fl"></div>
<div class="clear"></div>
</div>
</div>
<div class="search">
<input placeholder="开启你的旅程吧！"/>
<img src="../img/magnifier.png"/>
</div>
<div class="intro">
<div class="main">
<div class="line fl"></div>
<div class="text fl">
<p>地区旅游</p>
</div>
<div class="line fl"></div>
<div class="clear"></div>
</div>
<div class="text">
<p>从这开始有意思的地区文化</p>
</div>
</div>
<div class="areapic-list">
<div class="sichuan fl">
<div class="shadow">
<p>四<br>川</p>
</div>
</div>
<div class="dali fl">
<div class="shadow">
<p>大<br>理</p>
</div>
</div>
<div class="Denmark fl">
<div class="shadow">
<p>丹<br>麦</p>
<img src="../img/play-button.png">
</div>
</div>
<div class="Japan fl">
<div class="shadow">
<p>日<br>本</p>
</div>
</div>
<div class="Italy fl">
<div class="shadow">
<p>意<br>大<br>利</p>
</div>
</div>
<div class="France fl">
<div class="shadow">
<p>法<br>国</p>
</div>
</div>
<div class="clear"></div>
</div>
<div class="more">
<p>More></p>
</div>
<div class="intro">
<div class="main">
<div class="line fl"></div>
<div class="text fl">
<p>特惠行程</p>
</div>
<div class="line fl"></div>
<div class="clear"></div>
</div>
<div class="text">
<p>给你带来最省钱的旅游</p>
</div>
</div>
<div class="dispic-list">
<div class="list-left fl">
<div class="list-left-up">
<div class="pic1 fl">
<p>丹麦5晚6日童话之旅</p>
</div>
<div class="pic2 fr">
<div class="box">
<p>越南12晚3天美妙之旅</p>
<div class="price">
<div class="line fl"></div>
<p class="fl">￥2300</p>
<div class="line fr"></div>
<div class="clear"></div>
</div>
</div>
</div>
<div class="clear"></div>
</div>
<div class="list-left-bottom">
<div class="pic3 fl">
<p>泰国曼谷5晚6日游</p>
</div>
<div class="pic4 fr">
<p>马来西亚5晚6日经典游</p>
</div>
<div class="clear"></div>
</div>
</div>
<div class="list-right fr">
<div class="pic5">
<p>日本5晚6日经典游</p>
</div>
<div class="pic6">
<p>印度4晚6日经典游</p>
</div>
</div>
<div class="clear"></div>
</div>
<div class="more more-blue">
<p>More></p>
</div>
<div class="intro">
<div class="main">
<div class="line fl"></div>
<div class="text fl">
<p>旅游资讯</p>
</div>
<div class="line fl"></div>
<div class="clear"></div>
</div>
<div class="text">
<p>各种奇妙有趣的新闻等你来发现哦</p>
</div>
</div>
<div class="travel-news">
<div class="travel-pic1">
<img src="../img/travel-pic2.jpg"/>
</div>
<div class="rule">
<div class="rule-left fl">
<div class="line"></div>
<p>墨西哥关于<br>外国公民入境的有关规定</p>
</div>
<div class="rule-right fr">
<p class="first">墨西哥对外国公民入境有严格的规定。为便于中国公民准备入境材料，驻墨西哥使馆将墨移民局提供的部分规定摘译整理如下，供来墨人员参考（以下规定最终解释权属墨方有关部门）：</p>
<p>一、墨西哥《移民法》规定，外国公民入境墨西哥应满足如下要求：</p>
<p>1、向墨西哥移民官员出示如下证件：</p>
<p>（1）护照或现行国际法认可有效的身份和旅行证件；</p>
<p>（2）合法有效签证（如需）......</p>
<div class="button">
<p>完整文章</p>
</div>
</div>
<div class="clear"></div>
</div>
<div class="travel-pic3">
<img src="../img/travel-pic4.jpg">
</div>
<div class="rule">
<div class="rule-left fl">
<div class="line"></div>
<p>新西兰<br>明年准备征游客税</p>
</div>
<div class="rule-right rule-right-NewZealand fr">
<p>据消息称，新西兰旅游部长表示，新西兰明年(2018年)将会引进游客税。</p>
<p>相关部门不希望新西兰旅游胜地的美誉受到影响，需要采取措施来帮助本地议会来应对越来越多的游客。
Destination Queenstown表示，若是当地部门不采取措施来应对巨大的游客数量，皇后镇可能会像威尼斯和巴塞罗那一样，造成旅游业过度开发。</p>
</div>
<div class="clear"></div>
</div>
</div>
<div class="more">
<p>More></p>
</div>
<div class="intro">
<div class="main">
<div class="line fl"></div>
<div class="text fl">
<p>游记分享</p>
</div>
<div class="line fl"></div>
<div class="clear"></div>
</div>
<div class="text">
<p>这里可以找到最好的旅游攻略</p>
</div>
</div>
<div class="travel-share">
<div class="text">
<div class="text1 fl">
<div class="shadow">
<p class="essay">精选文章</p>
<p class="title">大理，与阳光约会</p>
<p class="area">云南 | 大理 | 洱海</p>
<p class="time">2017年1月13日</p>
<p class="main">寒假开始，我便踏上了开往云南的列车。武汉的冬天基本上是阴暗湿冷的，我多想赶快到达云南，拥抱温暖的阳光。</p>
<p class="main main2">十几天里，我在海埂长堤上喂过海鸥，在洱海沿线画了一个圈，在双廊享受面朝大海春暖花开的惬意，在丽江的阿安酸奶和前台的山东老乡晒太阳聊天，在虎跳峡和棒子们你追我赶。曾经嫌弃过大理的冷清，也曾经抱怨过丽江的物质。但是，当真正要离开的时候，满满的都是不舍...</p>
<div class="button">
<p>完整文章</p>
</div>
</div>
</div>
<div class="text-list fr">
<div class="text2">
<div class="pic">
<div class="fl">
<p>卡瓦博格</p>
</div>
<div class="fl short">
<p>黄昏</p>
</div>
<div class="clear"></div>
</div>
<p class="time">2017.01.03</p>
<p class="title">泰国—活着的冲动，浮生一场春梦</p>
<p class="main">上世纪80年代，我的父母青春年少之时，生于小城镇的他们还穿着母亲亲手裁制的衣裤，过着粮票兑粮，精打细算的生活 当时的崔健还未成名，收音机里放的还是邓丽君、山口百惠.... 而此时的大...<a href="about:blank">完整文章>></a>
</p>
</div>
<div class="text3">
<div class="pic">
<div class="fl">
<p>卡瓦博格</p>
</div>
<div class="fl short">
<p>黄昏</p>
</div>
<div class="clear"></div>
</div>
<p class="time">2017.04.15</p>
<p class="title">初见卡瓦格博</p>
<p class="main">飞来寺，斗转星移间，我们守望6740的日照金山。当一缕缕金色的光线，洒满卡瓦格博的峰尖，就在那一瞬间，我挣脱了重重桎梏，舍却了依依旧念，只为那游荡不安的心魂，从此越发疯癫...<a href="about:blank">完整文章>></a>
</p>
</div>
</div>
<div class="clear"></div>
</div>
<div class="photo">
<p class="title">精选照片</p>
<div class="pic-list">
<img src="../img/photo-pic1.jpg" class="fl">
<img src="../img/photo-pic2.jpg" class="fl">
<img src="../img/photo-pic3.jpg" class="fl">
<img src="../img/photo-pic4.jpg" class="fl">
<div class="clear"></div>
</div>
<div class="text">
<div class="item fl">
<div class="top">
<p class="time fl">2017.03.06</p>
<p class="author fl">By Ben</p>
<div class="clear"></div>
</div>
<p class="title">深入贺兰山</p>
</div>
<div class="item fl">
<div class="top">
<p class="time fl">2017.07.04</p>
<p class="author fl">By Ever</p>
<div class="clear"></div>
</div>
<p class="title">雪融山</p>
</div>
<div class="item fl">
<div class="top">
<p class="time fl">2017.07.04</p>
<p class="author fl">By Wendy</p>
<div class="clear"></div>
</div>
<p class="title">金色的雪山</p>
</div>
<div class="item fl">
<div class="top">
<p class="time fl">2017.10.11</p>
<p class="author fl">By Jay</p>
<div class="clear"></div>
</div>
<p class="title">黄昏与海</p>
</div>
<div class="clear"></div>
</div>
<div class="page-button">
<div class="left fl">
<div class="box">
<img src="../img/page-button-left.png">
</div>
</div>
<div class="right fr">
<div class="box">
<img src="../img/page-button-right.png">
</div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
<div class="more">
<p>More></p>
</div>
<div class="bottom">
<div class="box">
<p>© 2017 Leyouyou.cn 粤ICP备12345678号 粤公网安备123456789012号 粤ICP证123456号</p>
<p>营业执照 新出网证(粤)字123号 全国统一客服电话：0000-123-456</p>
</div>
</div>
</div>
</body>
</html>css
*{margin: 0;padding: 0;}
body{background-color: #fefefe;}
.nav{height: 72px;width: 1200px;margin: auto;}
.logo{margin-right: 160px;margin-top: 7px;}
.logo>img{vertical-align: middle;}
.fl{float:left}
.fr{float:right}
.clear{clear:both}
.nav>.main>div{height: 72px;width: 80px;margin-left:25px ;}
.nav a{line-height: 72px;text-decoration: none;}
.main>.home{background-color: #5696ff;}
.region:hover{background-color: #5696ff;}
.discount:hover{background-color: #5696ff;}
.news:hover{background-color: #5696ff;}
.travels:hover{background-color: #5696ff;}
.main a{color:#3c3d46;font-size: 18px;}
.main>.home a{color:#fefeff}
.nav>.login{height:72px;width: 105px;}
.login a{text-decoration: none;text-align: center;color: #3c3d46;font-size: 18px;height: 18px;line-height: 72px;}
.login>.line{height: 14px;width: 1px;background-color: #999999;margin: 29px 10px;}
.main-pic{height:600px;background: url(../img/main.jpg) no-repeat center}
.main-pic>.circle{width:53px; margin:auto;padding: 550px 0;}
.circle>.fl{height: 16px;width: 16px;background-color: #fcfcfd;border-radius: 100%;}
.circle>.blank{height: 14px;width: 14px;border: #fcfcfd 1px solid;background-color: transparent;margin-left:21px ;}
.intro{margin-top: 106px;}
.intro>.main{width: 336px;margin:0 auto;}
.intro>.main>.text>p{color: #5696ff;font-size: 36px;margin: 0 17px;}
.intro>.main>.line{width: 79px;height: 7px;background-color: #666666;margin-top: 20px;}
.intro>.text{color: #666666;font-size: 22px;text-align: center;margin-top: 22px;}
.search{width:350px;margin: auto;position: relative;margin-top: 70px;}
.search>input{border:#666666 1px solid;width: 350px;height: 40px;border-radius: 5px;}
.search>img{position: absolute;right: 10px;top: 8px;}
.areapic-list{width: 1220px;margin: auto;margin-top: 55px;}
.areapic-list>.fl{height:370px;width: 119px;margin-right: 5px;}
.areapic-list>.Denmark{width: 594px;position: relative;}
.areapic-list>.Denmark{background: url(../img/Denmark.jpg);}
.areapic-list>.sichuan{background: url(../img/sichuan.jpg);}
.areapic-list>.dali{background: url(../img/dali.jpg);}
.areapic-list>.France{background: url(../img/France.jpg);}
.areapic-list>.Italy{background: url(../img/Italy.jpg);}
.areapic-list>.Japan{background: url(../img/Japan.jpg);}
.areapic-list .shadow{height:300px;background-color: rgba(51, 51, 51, 0.5);padding: 70px 0 0 32px;}
.areapic-list p{font-size: 28px;color: #fbfcfd;line-height: 30px;}
.Denmark img{position: absolute;top:146px;left:247px;}
.more{width: 160px;height: 54px;box-sizing: border-box;border: #5696ff 2px solid;border-radius: 5px;margin: auto;margin-top: 72px;}
.more p{color: #5696ff;font-size: 26px;line-height: 52px;text-align: center;}
.dispic-list{width: 1208px;height: 685px;margin: auto;margin-top: 54px;}
.dispic-list>.list-left{width: 900px;}
.dispic-list>.list-right{width: 300px;}
.dispic-list>.list-left>.list-left-up>.pic1{width: 441px;height: 307px;background: url(../img/dispic1.jpg);}
.dispic-list>.list-left>.list-left-up>.pic2{width: 400px;height: 265px;background: url(../img/dispic2.jpg);padding: 21px;}
.dispic-list>.list-left>.list-left-bottom{height: 378px;margin-top: 8px;}
.dispic-list>.list-left>.list-left-bottom>.pic3{width: 362px;height: 369px;background: url(../img/dispic3.jpg);}
.dispic-list>.list-left>.list-left-bottom>.pic4{width: 521px;height: 369px;background: url(../img/dispic4.jpg);}
.dispic-list>.list-right{height: 685px;margin-left: 8px}
.dispic-list>.list-right>.pic5{height: 472px;background: url(../img/dispic5.jpg);}
.dispic-list>.list-right>.pic6{height: 204px;background: url(../img/dispic6.jpg);margin-top: 8px;}
.dispic-list .pic1,.pic2,.pic3,.pic4,.pic5,.pic6{position: relative;}
.dispic-list p{color: #fefefe;font-size: 22px;position: absolute;top: 49px;left:54px}
.dispic-list .pic2 .box{width: 400px;height: 266px;box-sizing: border-box;border: #ffffff 4px solid;background: rgba(0, 0, 0, 0.3);}
.dispic-list .pic2 .box .price{width: 315px;margin: 83px 0 0 39px;}
.dispic-list .pic2 .box .line{width: 90px;height: 4px;background-color: #ffffff;text-align: center;margin-top: 13px;}
.dispic-list .pic2 .box .price p{position: static;margin-left: 29px;}
.more-blue{background-color: #5696ff;}
.more-blue p{color: #fefefe}
.travel-news{width: 1200px;margin: auto;margin-top: 226px;}
.travel-pic1{height: 745px;background: url(../img/travel-pic1.jpg);}
.travel-pic1>img{border: #fefefe 41px solid;margin-top: -132px;margin-left: 570px;}
.rule{margin-top: 50px;}
.rule-left{width: 450px;}
.rule-left>.line{width:134px;height: 7px;background-color: #959595;margin-left: auto;}
.rule-left>p{text-align: right;color: #333333;font-size: 30px;margin-top: 28px;}
.rule-right>p{width: 560px;}
.rule-right>p{color: #333333;font-size: 24px;line-height: 48px;text-indent: 2em;}
.rule-right>.first{text-indent: 0;}
.button{width: 180px;height: 60px;box-sizing: border-box;border:#999999 3px solid;border-radius: 5px;margin-top: 46px;}
.button>p{color: #333333; font-size: 26px;text-align: center;line-height: 54px;}
.travel-pic3{height: 781px;background: url(../img/travel-pic3.jpg) no-repeat left;margin-top: 70px;position: relative;}
.travel-pic3>img{border: #fefefe 47px solid;position: absolute;top:64px;left: 484px;}
.rule-right-NewZealand{margin-top: -155px }
.rule-right-NewZealand>p{line-height: 56px;text-indent: 0}
.travel-share{width: 1200px;margin: auto;margin-top: 53px;}
.travel-share .text1{width: 730px;height: 960px;background: url(../img/share-pic1.jpg);box-shadow:#8d8c8c 0px 0px 20px 1px ;}
.travel-share .text .text1 .shadow{width: 408px;height: 894px;background-color: rgba(0, 0, 0, 0.3);padding: 66px 56px 0 37px;}
.travel-share .shadow p{color: #ffffff;}
.travel-share .shadow .essay{color: #5696ff;font-size: 24px;}
.travel-share .shadow .title{color: #fefefe;font-size: 24px;margin-top: 77px;line-height: 35px;}
.travel-share .shadow .area{font-size: 20px;line-height: 35px;}
.travel-share .shadow .time{text-align: right;font-size: 18px;margin-top: 25px;}
.travel-share .shadow .main{font-size: 18px;line-height: 48px;text-indent: 2em;margin-top: 10px;}
.travel-share .shadow .main2{margin-top: 0;}
.travel-share .shadow .button{margin-top: 96px;}
.travel-share .text-list>div{width: 377px;height: 432px;box-shadow:#8d8c8c 0 0 20px 1px;padding: 34px 35px 0 31px;}
.travel-share .text-list .text3{margin-top: 30px;}
.travel-share .text-list .text2 .pic{background: url(../img/share-pic2.jpg);height: 297px;}
.travel-share .text-list .text3 .pic{background: url(../img/share-pic3.jpg);height: 297px;}
.travel-share .text-list .time{font-size: 12px;color: #333333;margin: 12px 0 10px;}
.travel-share .text-list .title{font-size: 14px;color: #333333;margin-bottom: 10px;}
.travel-share .text-list .main{font-size: 12px; color: #666666;}
.travel-share .text-list .main a{text-decoration: none;color: #5696ff;font-size: 12px;}
.travel-share .text-list .pic .fl{width: 60px;height: 18px;background-color: rgba(86, 150, 255, 0.5);margin: 13px 9px 0 ;}
.travel-share .text-list .pic .short{width: 30px;margin-left: 0;}
.travel-share .text-list .pic p{color: #ffffff;font-size: 12px;line-height: 18px;text-align: center;}
.photo{box-shadow: #8d8c8c 0 0 20px 1px;height: 498px;margin-top: 54px;padding: 26px 0 0 19px;position: relative;}
.photo .title{color: #5696ff;font-size: 24px;}
.photo .pic-list{height: 330px;}
.photo .pic-list img{margin-right: 18px;margin-top: 26px;}
.photo .text .item{width: 276px;margin-right: 18px;margin-top: 18px;}
.photo .text .item p{color: #666666;}
.photo .text .item .time{font-size: 12px;}
.photo .text .item .author{margin-left: 20px;margin-top: 1px;font-size: 12px;}
.photo .text .item .title{font-size: 16px;margin-top: 10px;}
.page-button{width: 1161px;position: absolute;top: 218px;left:19px}
.page-button .box{width: 52px;height: 50px;background-color: #ffffff;}
.page-button img{margin: 13px 19px 0;}
.bottom{height: 94px;margin-top: 65px;background-color: #5696ff;padding-top: 36px;}
.bottom .box{width: 659px;height: 51px;margin: auto;}
.bottom .box p{font-size: 16px;color: #fafafc;margin-bottom:12px ;}地区
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>area</title>
<link rel="stylesheet" href="../css/area-style.css">
</head>
<body>
<div class="wrap">
<div class="nav">
<div class="logo fl">
<img src="../img/Logo.png"/>
<img src="../img/Logo-text.png">
</div>
<div class="main fl">
<div class="home fl">
<div style="text-align: center;">
<a href="https://razuberiii.github.io/html/travel/index/html/index.html">首页</a>
</div>
</div>
<div class="region fl">
<div style="text-align: center;">
<a href="https://razuberiii.github.io/html/travel/area/html/area.html">地区</a>
</div>
</div>
<div class="discount fl">
<div style="text-align: center;">
<a href="https://razuberiii.github.io/html/travel/offer/html/offer.html">特惠</a>
</div>
</div>
<div class="news fl">
<div style="text-align: center;">
<a href="https://razuberiii.github.io/html/travel/info/html/info.html">咨询</a>
</div>
</div>
<div class="travels fl">
<div style="text-align: center;">
<a href="https://razuberiii.github.io/html/travel/record/html/record.html">游记</a>
</div>
</div>
</div>
<div class="login fr">
<div class="fr">
<a href="https://razuberiii.github.io/html/travel/register/html/register.html">
<span>注册</span>
</a>
</div>
<div class="line fr"></div>
<div class="fr">
<a href="https://razuberiii.github.io/html/travel/login/html/login.html">
<span>登录</span>
</a>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
<div class="grey-line">
<div class="contains mid">
<div class="box fl">
<div class="line fl"></div>
<img class="fl" src="../img/search.png">
<div class="line fr"></div>
<div class="clear"></div>
</div>
<div class="box fr">
<img class="fl" src="../img/history.png">
<div class="line fr"></div>
<div class="clear"></div>
</div>
<div class="box fr">
<img class="fl" src="../img/comment.png">
<div class="line fr"></div>
<div class="clear"></div>
</div>
<div class="box fr">
<div class="line fl"></div>
<img class="fl" src="../img/person.png">
<div class="line fr"></div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
</div>
<div class="banner clear mid">
<div class="pic fl"></div>
<div class="list fr">
<div class="item first">
<p>亚洲</p>
<div class="line"></div>
</div>
<div class="item">
<p>欧洲</p>
<div class="line"></div>
</div>
<div class="item">
<p>北美洲</p>
<div class="line"></div>
</div>
<div class="item">
<p>南洋洲</p>
<div class="line"></div>
</div>
<div class="item">
<p>大洋洲</p>
<div class="line"></div>
</div>
<div class="item">
<p>非洲</p>
<div class="line"></div>
</div>
<div class="item">
<p>南极洲</p>
<div class="line"></div>
</div>
<div class="item">
<p>中国</p>
</div>
</div>
</div>
<div class="hot mid">
<p>热门推荐</p>
<div class="advice clear">
<div class="item fl first">
<div class="box">
<div class="pic" style="background: url(../img/hot1.jpg);">
<p class="eng-1">JAPANESE</p>
<p class="eng-2">CHERRY</p>
<p class="cha">樱花</p>
</div>
</div>
<div class="title">
<p>日本樱花</p>
</div>
<div class="download">
<p>下载阅读</p>
</div>
</div>
<div class="item fl">
<div class="box">
<div class="pic" style="background: url(../img/hot2.jpg);">
<p class="eng-1">NEUSCHWANSTEIN</p>
<p class="eng-2">GERMANY</p>
<p class="cha">德国新天鹅堡</p>
</div>
</div>
<div class="title">
<p>德国新天鹅堡</p>
</div>
<div class="download">
<p>下载阅读</p>
</div>
</div>
<div class="item fl">
<div class="box">
<div class="pic" style="background: url(../img/hot3.jpg);">
<p class="eng-1">LAKE BAIKAL</p>
<p class="eng-2">RUSSIA</p>
<p class="cha">贝加尔湖</p>
</div>
</div>
<div class="title">
<p>俄罗斯贝加尔湖</p>
</div>
<div class="download">
<p>下载阅读</p>
</div>
</div>
<div class="item fl">
<div class="box">
<div class="pic" style="background: url(../img/hot4.jpg);">
<p class="eng-1">NEW ZEALAND</p>
<p class="eng-2">TE ANAU</p>
<p class="cha">新西兰蒂阿瑙</p>
</div>
</div>
<div class="title">
<p>新西兰蒂阿瑙</p>
</div>
<div class="download">
<p>下载阅读</p>
</div>
</div>
<div class="item fl">
<div class="box">
<div class="pic" style="background: url(../img/hot5.jpg);">
<p class="eng-1">FITZROY GARDENS</p>
<p class="eng-2">MELBOURNE</p>
<p class="cha">墨尔本菲兹罗花园</p>
</div>
</div>
<div class="title">
<p>墨尔本菲兹罗花园</p>
</div>
<div class="download">
<p>下载阅读</p>
</div>
</div>
</div>
</div>
<div class="mid clear" style="margin-top: 54px">
<div class="download-guide fl">
<p>他们刚刚下载了地区指南</p>
<div class="download-list ">
<div class="item first clear">
<div class="stamp fl">
<img src="../img/stamp1.jpg" alt="">
</div>
<div class="info fl">
<span>刚刚下载了</span><span class="kind">意大利建筑</span><span>地区指南</span>
</div>
</div>
<div class="item clear">
<div class="stamp fl">
<img src="../img/stamp2.jpg" alt="">
</div>
<div class="info fl">
<span>刚刚下载了</span><span class="kind">悉尼</span><span>地区指南</span>
</div>
</div>
<div class="item clear">
<div class="stamp fl">
<img src="../img/stamp3.jpg" alt="">
</div>
<div class="info fl">
<span>刚刚下载了</span><span class="kind">日本东北</span><span>地区指南</span>
</div>
</div>
<div class="item clear">
<div class="stamp fl">
<img src="../img/stamp4.jpg" alt="">
</div>
<div class="info fl">
<span>刚刚下载了</span><span class="kind">佛罗伦萨</span><span>地区指南</span>
</div>
</div>
<div class="item clear">
<div class="stamp fl">
<img src="../img/stamp5.jpg" alt="">
</div>
<div class="info fl">
<span>刚刚下载了</span><span class="kind">槟城</span><span>地区指南</span>
</div>
</div>
<div class="item clear">
<div class="stamp fl">
<img src="../img/stamp6.jpg" alt="">
</div>
<div class="info fl">
<span>刚刚下载了</span><span class="kind">班夫与贾斯珀国家公园</span><span>地区指南</span>
</div>
</div>
<div class="item clear">
<div class="stamp fl">
<img src="../img/stamp7.jpg" alt="">
</div>
<div class="info fl">
<span>一分钟前下载了</span><span class="kind">米兰</span><span>地区指南</span>
</div>
</div>
<div class="item clear">
<div class="stamp fl">
<img src="../img/stamp8.jpg" alt="">
</div>
<div class="info fl">
<span>一分钟前下载了</span><span class="kind">新加坡</span><span>地区指南</span>
</div>
</div>
<div class="item clear">
<div class="stamp fl">
<img src="../img/stamp9.jpg" alt="">
</div>
<div class="info fl">
<span>一分钟前下载了</span><span class="kind">博洛尼亚</span><span>地区指南</span>
</div>
</div>
<div class="item clear">
<div class="stamp fl">
<img src="../img/stamp10.jpg" alt="">
</div>
<div class="info fl">
<span>一分钟前下载了</span><span class="kind">意大利国家概览</span><span>地区指南</span>
</div>
</div>
</div>
<div class="collect"></div>
</div>
<div class="guide-list fr">
<p class="all">全部地区指南</p>
<div class="type">
<div class="time fl">
<span>按更新时间</span>
</div>
<div class="line fl"></div>
<div class="download fl">
<span>按下载量</span>
</div>
<div class="clear"></div>
</div>
<div class="list">
<div class="row row1 clear">
<div class="item fl first">
<div class="box">
<div class="pic" style="background: url(../img/list1.jpg);">
<p class="eng">OPERA HOUSE</p>
<p class="eng">SYDNEY</p>
<p class="cha">悉尼歌剧院</p>
</div>
<p class="title">悉尼歌剧院</p>
<p class="time">2018-02-01更新</p>
</div>
</div>
<div class="item fl">
<div class="box">
<div class="pic" style="background: url(../img/list2.jpg);">
<p class="eng">Singapore</p>
<p class="eng">Sentosa</p>
<p class="cha">新加坡圣淘沙</p>
</div>
<p class="title">新加坡圣淘沙</p>
<p class="time">2018-01-31更新</p>
</div>
</div>
<div class="item fl">
<div class="box">
<div class="pic" style="background: url(../img/list3.jpg);">
<p class="eng">Cathedral</p>
<p class="eng">Milan</p>
<p class="cha">米兰大教堂</p>
</div>
<p class="title">米兰大教堂</p>
<p class="time">2018-01-30更新</p>
</div>
</div><div class="item fl">
<div class="box">
<div class="pic" style="background: url(../img/list4.jpg);">
<p class="eng">Italian</p>
<p class="eng">palace</p>
<p class="cha">意大利宫殿</p>
</div>
<p class="title">意大利宫殿</p>
<p class="time">2018-01-30更新</p>
</div>
</div>
</div>
<div class="row clear">
<div class="item fl first">
<div class="box">
<div class="pic" style="background: url(../img/list5.jpg);">
<p class="eng">Bali</p>
<p class="eng">Indonesia</p>
<p class="cha">印度尼西亚巴厘岛</p>
</div>
<p class="title">印度尼西亚巴厘岛</p>
<p class="time">2018-02-01更新</p>
</div>
</div>
<div class="item fl">
<div class="box">
<div class="pic" style="background: url(../img/list6.jpg);">
<p class="eng">Hangzhou</p>
<p class="eng">China</p>
<p class="cha">中国杭州</p>
</div>
<p class="title">中国杭州</p>
<p class="time">2018-01-31更新</p>
</div>
</div>
<div class="item fl">
<div class="box">
<div class="pic" style="background: url(../img/list7.jpg);">
<p class="eng">Copenhagen</p>
<p class="eng">Denmark</p>
<p class="cha">丹麦哥本哈根</p>
</div>
<p class="title">丹麦哥本哈根</p>
<p class="time">2018-01-30更新</p>
</div>
</div><div class="item fl">
<div class="box">
<div class="pic" style="background: url(../img/list8.jpg);">
<p class="eng">Phuket</p>
<p class="eng">Thailand</p>
<p class="cha">泰国普吉岛</p>
</div>
<p class="title">泰国普吉岛</p>
<p class="time">2018-01-30更新</p>
</div>
</div>
</div>
<div class="row clear">
<div class="item fl first">
<div class="box">
<div class="pic" style="background: url(../img/list9.jpg);">
<p class="eng">Volcanic Island</p>
<p class="eng">American</p>
<p class="cha">美国火山岛</p>
</div>
<p class="title">美国火山岛</p>
<p class="time">2018-02-01更新</p>
</div>
</div>
<div class="item fl">
<div class="box">
<div class="pic" style="background: url(../img/list10.jpg);">
<p class="eng">windmill</p>
<p class="eng">Dutch</p>
<p class="cha">荷兰风车</p>
</div>
<p class="title">荷兰风车</p>
<p class="time">2018-01-31更新</p>
</div>
</div>
<div class="item fl">
<div class="box">
<div class="pic" style="background: url(../img/list11.jpg);">
<p class="eng">Eiffel Tower</p>
<p class="eng">France</p>
<p class="cha">法国埃菲尔铁塔</p>
</div>
<p class="title">法国埃菲尔铁塔</p>
<p class="time">2018-01-30更新</p>
</div>
</div><div class="item fl">
<div class="box">
<div class="pic" style="background: url(../img/list12.jpg);">
<p class="eng">Egyptian</p>
<p class="eng">Pyramids</p>
<p class="cha">埃及金字塔</p>
</div>
<p class="title">埃及金字塔</p>
<p class="time">2018-01-30更新</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="page mid">
<div class="box">
<div class="last button fl">
<p><上一页</p>
</div>
<p class="fl">1</p>
<p class="fl">2</p>
<p class="fl">3</p>
<p class="fl">4</p>
<p class="fl">5</p>
<p class="fl">6</p>
<p class="fl">7</p>
<p class="fl">...</p>
<p class="fl" style="margin-right: 22px;">30</p>
<div class="next button fl">
<p>下一页></p>
</div>
<div class="clear"></div>
</div>
</div>
<div class="bottom">
<div class="box">
<p>© 2017 Leyouyou.cn 粤ICP备12345678号 粤公网安备123456789012号 粤ICP证123456号</p>
<p>营业执照 新出网证(粤)字123号 全国统一客服电话：0000-123-456</p>
</div>
</div>
</div>
</body>
</html>css
*{margin: 0;padding: 0;}
body{background-color: #f3f3f3;}
.nav{height: 72px;width: 1200px;margin: auto;}
.logo{margin-right: 160px;margin-top: 7px;}
.logo>img{vertical-align: middle;}
.fl{float:left}
.fr{float:right}
.clear{clear:both}
.nav>.main>div{height: 72px;width: 80px;margin-left:25px ;}
.nav a{line-height: 72px;text-decoration: none;}
.main>.region{background-color: #5696ff;}
.region:hover{background-color: #5696ff;}
.discount:hover{background-color: #5696ff;}
.news:hover{background-color: #5696ff;}
.home:hover{background-color: #5696ff;}
.travels:hover{background-color: #5696ff;}
.main a{color:#3c3d46;font-size: 18px;}
.main>.region a{color:#fefeff}
.nav>.login{height:72px;width: 105px;}
.login a{text-decoration: none;text-align: center;color: #3c3d46;font-size: 18px;height: 18px;line-height: 72px;}
.login>.line{height: 14px;width: 1px;background-color: #999999;margin: 29px 10px;}
.grey-line{height:60px;background-color: #666666;}
.grey-line .box .line{width: 1px;height: 20px;background-color: #f3f1f1;}
.grey-line .box{width: 102px;text-align: center;margin-top: 18px;}
.mid{margin: auto;width: 1200px;}
.grey-line .box img{margin-left: 39px;}
.fl{float: left;}
.fr{float: right;}
.clear:after{content:""; display:block;clear:both;}
.banner .pic{background: url(../img/main.jpg);height: 560px;width: 970px;}
.banner{margin-top: 95px;}
.banner .list{width: 160px;height: 560px;background-color: #666666;}
.banner .list .item{text-align: center;font-size: 24px;color: #ffffff;margin-top: 24px;line-height: 24px;}
.banner .list .item .line{width: 70px;height: 1px;background-color: #fefefe;margin: auto;margin-top: 16px;}
.banner .list .first{margin-top: 37px;}
.hot>p{font-size: 24px;color: #333333;line-height: 24px;margin: 53px 0 26px;}
.hot .advice{height: 474px;box-sizing: border-box;border: #dcdcdc 1px solid;background-color: #ffffff;}
.hot .advice .item{margin-left: 35px}
.hot .advice .first{margin-left: 30px;}
.hot .advice .item .box{width: 184px;height: 258px;box-shadow: 1px 1px 8px rgba(4, 0, 0, 0.36);margin-top: 48px;padding: 11px 8px;}
.hot .advice .item .box .pic{width: 174px;height: 225px;color: #fefefe;padding-top: 33px;padding-left: 10px;}
.hot .advice .item .box .pic .eng-1{font-size: 18px;line-height: 18px;}
.hot .advice .item .box .pic .eng-2{font-size: 18px;line-height: 18px;margin-top: 17px;}
.hot .advice .item .box .pic .cha{font-size: 20px;line-height: 20px;margin-top: 17px;}
.hot .advice .item .title{font-size: 20px;color: #5696ff;line-height: 20px;margin-top: 20px;}
.hot .advice .item .download{border-radius: 4px;background-color: #5696ff;height: 40px;width: 200px;margin-top: 20px;text-align: center;}
.hot .advice .item .download{line-height: 40px;font-size: 18px;color: #ffffff;}
.download-guide{width: 355px;}
.guide-list{width: 811px;}
.download-guide>p{font-size: 18px;color: #333333;}
.download-guide .item{line-height: 40px;margin-top: 11px;}
.download-guide .item .info{margin-left: 12px;}
.download-guide .first{margin-top: 18px;}
.download-guide .item .info .kind{color: #5696ff;}
.download-guide .collect{width: 350px;height: 200px;background: url(../img/collect.jpg);margin-top: 37px;}
.guide-list .all{color: #333333;font-size: 24px;line-height: 24px;}
.guide-list .type{font-size: 18px;line-height: 18px;margin-top: 23px;}
.guide-list .type .line{width: 2px;height: 17px;background-color: #c3c3c3;margin: 1px 13px;}
.guide-list .type .time{color: #333333;}
.guide-list .type .download{color: #5696ff}
.guide-list .list .item{width: 164px;height: 230px;box-shadow: 1px 1px 8px rgba(4, 0, 0, 0.36);margin-top: 48px;padding: 10px 7px;margin-left: 33px;text-transform: uppercase}
.guide-list .list .item .box .pic{width: 155px;height: 199px;color: #fefefe;padding-top: 30px;padding-left: 9px;}
.guide-list .list .item .box .pic .eng{line-height: 27px;}
.guide-list .list .item .box .pic .cha{font-size: 18px;line-height: 31px}
.guide-list .list .item .title{color: #5696ff;font-size: 18px;line-height: 18px;margin-top: 27px;}
.guide-list .list .item .time{margin-top: 10px;color: #666666;}
.guide-list .list .first{margin-left: 0;}
.guide-list .list .row{margin-top: 34px;}
.guide-list .list .row1{margin-top:0;}
.page .box{width: 850px;}
.page .box .button{margin-right: 0 !important;}
.page .box .button{width: 198px;height: 59px;box-sizing: border-box;border: #dcdcdc 1px solid;margin-right: 22px ;}
.page .box .button p{line-height: 59px;text-align: center;font-size: 18px;color: #333333;}
.page .box>p{margin-right: 40px;line-height: 59px;}
.page{margin-top: 138px;}
.bottom{height: 94px;margin-top: 65px;background-color: #5696ff;padding-top: 36px;}
.bottom .box{width: 659px;height: 51px;margin: auto;}
.bottom .box p{font-size: 16px;color: #fafafc;margin-bottom:12px ;}
.page .box{margin-left: 389px;}
特惠
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>offer</title>
<link rel="stylesheet" href="../css/offer-style.css"/>
</head>
</head>
<body>
<div class="wrap">
<div class="nav">
<div class="logo fl">
<img src="../img/Logo.png"/>
<img src="../img/Logo-text.png">
</div>
<div class="main fl">
<div class="home fl">
<div style="text-align: center;">
<a href="https://razuberiii.github.io/html/travel/index/html/index.html">首页</a>
</div>
</div>
<div class="region fl">
<div style="text-align: center;">
<a href="https://razuberiii.github.io/html/travel/area/html/area.html">地区</a>
</div>
</div>
<div class="discount fl">
<div style="text-align: center;">
<a href="https://razuberiii.github.io/html/travel/offer/html/offer.html">特惠</a>
</div>
</div>
<div class="news fl">
<div style="text-align: center;">
<a href="https://razuberiii.github.io/html/travel/info/html/info.html">咨询</a>
</div>
</div>
<div class="travels fl">
<div style="text-align: center;">
<a href="https://razuberiii.github.io/html/travel/record/html/record.html">游记</a>
</div>
</div>
</div>
<div class="login fr">
<div class="fr">
<a href="https://razuberiii.github.io/html/travel/register/html/register.html">
<span>注册</span>
</a>
</div>
<div class="line fr"></div>
<div class="fr">
<a href="https://razuberiii.github.io/html/travel/login/html/login.html">
<span>登录</span>
</a>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
<div class="grey-line">
<div class="contains mid">
<div class="box fl">
<div class="line fl"></div>
<img class="fl" src="../img/search.png">
<div class="line fr"></div>
<div class="clear"></div>
</div>
<div class="box fr">
<img class="fl" src="../img/history.png">
<div class="line fr"></div>
<div class="clear"></div>
</div>
<div class="box fr">
<img class="fl" src="../img/comment.png">
<div class="line fr"></div>
<div class="clear"></div>
</div>
<div class="box fr">
<div class="line fl"></div>
<img class="fl" src="../img/person.png">
<div class="line fr"></div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
</div>
<div class="banner mid">
<div class="start">
<p class="fl guangzhou">广州</p>
<p class="fl from">出发</p>
<div class="clear"></div>
</div>
<div class="destination">
<p class="fl">请输入目的地</p>
<div class="fr">
<img src="../img/search.png">
</div>
<div class="clear"></div>
</div>
</div>
<div class="offer mid">
<div class="main-list fl">
<div class="item first">
<div class="box">
<div class="pic fl">
<img src="../img/main-pic1.jpg" alt="">
</div>
<div class="text fr">
<p class="saled">已售150</p>
<p class="main-text">【泼水节预售】广州直飞泰国曼谷+芭提雅+沙美岛6<br>天5晚跟团游（全程无自费+全程5星酒店+沙美岛出<br>海+国际人妖秀+送意外险）</p>
<p class="time">班期：清明五一03/30-06/30</p>
<div class="price">
<span class="money">￥2099</span>
<span class="as">起</span>
</div>
<div class="button">
<p>立刻预定</p>
</div>
</div>
<div class="clear"></div>
</div>
<div class="line"></div>
</div>
<div class="item">
<div class="box">
<div class="pic fl">
<img src="../img/main-pic2.jpg" alt="">
</div>
<div class="text fr">
<p class="saled">已售108</p>
<p class="main-text">广州直飞普吉岛6天4/5天4晚晚精致游（无自费+指<br>定4晚网评国际五星酒店+赠送流量卡+大堡礁浮潜+<br>蓝钻珊瑚岛+泰式风情人妖秀）</p>
<p class="time">班期：清明五一03/21-06/28</p>
<div class="price">
<span class="money">￥2899</span>
<span class="as">起</span>
</div>
<div class="button">
<p>立刻预定</p>
</div>
</div>
<div class="clear"></div>
</div>
<div class="line"></div>
</div>
<div class="item">
<div class="box">
<div class="pic fl">
<img src="../img/main-pic3.jpg" alt="">
</div>
<div class="text fr">
<p class="saled">已售150</p>
<p class="main-text">【全景游】广州直飞土耳其12天（女神节赠送玫瑰水<br>+五星酒店·泡温泉+番红花城特色民居+双海寻梦爱<br>琴海+外星美景卡帕多奇亚）</p>
<p class="time">班期：清明五一03/30-05/30</p>
<div class="price">
<span class="money">￥5999</span>
<span class="as">起</span>
</div>
<div class="button">
<p>立刻预定</p>
</div>
</div>
<div class="clear"></div>
</div>
<div class="line"></div>
</div>
<div class="item">
<div class="box">
<div class="pic fl">
<img src="../img/main-pic4.jpg" alt="">
</div>
<div class="text fr">
<p class="saled">已售150</p>
<p class="main-text">【樱花预售】广州直飞大阪+东京+京都+名古屋+富<br>士山6天5晚品质游（拒签全退+河口湖樱花祭+升级<br>1晚温泉酒店+日式酒店料理+浴衣体验）</p>
<p class="time">班期：清明五一04/03-05/31</p>
<div class="price">
<span class="money">￥4280</span>
<span class="as">起</span>
</div>
<div class="button">
<p>立刻预定</p>
</div>
</div>
<div class="clear"></div>
</div>
<div class="line"></div>
</div>
<div class="item">
<div class="box">
<div class="pic fl">
<img src="../img/main-pic5.jpg" alt="">
</div>
<div class="text fr">
<p class="saled">已售77</p>
<p class="main-text">广州直飞越柬6天5晚游/柬埔寨一地5天4晚经典文化<br>美食之旅（大小吴哥窟+高棉的微笑+金边皇宫+巴肯<br>山日落+赠送柬埔寨特色纪念品）</p>
<p class="time">班期：清明五一暑假04/03-07/28</p>
<div class="price">
<span class="money">￥3888</span>
<span class="as">起</span>
</div>
<div class="button">
<p>立刻预定</p>
</div>
</div>
<div class="clear"></div>
</div>
<div class="line"></div>
</div>
<div class="item">
<div class="box">
<div class="pic fl">
<img src="../img/main-pic6.jpg" alt="">
</div>
<div class="text fr">
<p class="saled">已售205</p>
<p class="main-text">【一价全含】广州飞哈尔滨+亚布力+雪乡+民俗村<br>6/7天5晚跟团游（百人销量+全程不带钱包+0购物0<br>自费+天天特色餐+4星5星住宿）</p>
<p class="time">班期：03/22-03/31</p>
<div class="price">
<span class="money">￥3980</span>
<span class="as">起</span>
</div>
<div class="button">
<p>立刻预定</p>
</div>
</div>
<div class="clear"></div>
</div>
<div class="line"></div>
</div>
</div>
<div class="branch-list fr">
<div class="seller">
<p>本周热卖</p>
</div>
<div class="branch-list">
<div class="item">
<div class="box">
<div class="pic fl">
<img src="../img/branch-pic1.jpg">
</div>
<div class="text fr">
<p class="main-text">上海直飞普吉岛5-6天自由行<br>（3套航班任意选择+可选...</p>
<div class="price">
<span class="money">￥1899</span>
<span class="as">起</span>
</div>
</div>
<div class="clear"></div>
</div>
<div class="line"></div>
</div>
<div class="item">
<div class="box">
<div class="pic fl">
<img src="../img/branch-pic2.jpg">
</div>
<div class="text fr">
<p class="main-text">上海直飞香港3-4天自由行（<br>地铁商圈附近酒店+航班...</p>
<div class="price">
<span class="money">￥1220</span>
<span class="as">起</span>
</div>
</div>
<div class="clear"></div>
</div>
<div class="line"></div>
</div>
<div class="item">
<div class="box">
<div class="pic fl">
<img src="../img/branch-pic3.jpg">
</div>
<div class="text fr">
<p class="main-text">上海直飞甲米6-7天自由行（<br>预售至5月+可选带无边泳...</p>
<div class="price">
<span class="money">￥1999</span>
<span class="as">起</span>
</div>
</div>
<div class="clear"></div>
</div>
<div class="line"></div>
</div>
<div class="item">
<div class="box">
<div class="pic fl">
<img src="../img/branch-pic4.jpg">
</div>
<div class="text fr">
<p class="main-text">上海直飞清迈5-6天自由行（<br>泼水节预售+古城/宁曼路...</p>
<div class="price">
<span class="money">￥1899</span>
<span class="as">起</span>
</div>
</div>
<div class="clear"></div>
</div>
<div class="line"></div>
</div>
<div class="item">
<div class="box">
<div class="pic fl">
<img src="../img/branch-pic5.jpg">
</div>
<div class="text fr">
<p class="main-text">全国往返苏梅岛5-7天自由行<br>（Code海景无边泳池+无...</p>
<div class="price">
<span class="money">￥3299</span>
<span class="as">起</span>
</div>
</div>
<div class="clear"></div>
</div>
<div class="line"></div>
</div>
</div>
</div>
<div class="clear"></div>
</div>
<div class="page">
<div class="box mid">
<div class="last button fl">
<p><上一页</p>
</div>
<p class="fl">1</p>
<p class="fl">2</p>
<p class="fl">3</p>
<p class="fl">4</p>
<p class="fl">5</p>
<p class="fl">6</p>
<p class="fl">7</p>
<p class="fl">...</p>
<p class="fl" style="margin-right: 22px;">30</p>
<div class="next button fl">
<p>下一页></p>
</div>
<div class="clear"></div>
</div>
</div>
<div class="bottom">
<div class="box">
<p>© 2017 Leyouyou.cn 粤ICP备12345678号 粤公网安备123456789012号 粤ICP证123456号</p>
<p>营业执照 新出网证(粤)字123号 全国统一客服电话：0000-123-456</p>
</div>
</div>
</div>
</body>
</html>css
*{margin: 0;padding: 0;}
body{background-color: #f3f3f3;}
.nav{height: 72px;width: 1200px;margin: auto;}
.logo{margin-right: 160px;margin-top: 7px;}
.logo>img{vertical-align: middle;}
.fl{float:left}
.fr{float:right}
.clear{clear:both}
.nav>.main>div{height: 72px;width: 80px;margin-left:25px ;}
.nav a{line-height: 72px;text-decoration: none;}
.main>.discount{background-color: #5696ff;}
.region:hover{background-color: #5696ff;}
.discount:hover{background-color: #5696ff;}
.news:hover{background-color: #5696ff;}
.travels:hover{background-color: #5696ff;}
.home:hover{background-color: #5696ff;}
.main a{color:#3c3d46;font-size: 18px;}
.main>.discount a{color:#fefeff}
.nav>.login{height:72px;width: 105px;}
.login a{text-decoration: none;text-align: center;color: #3c3d46;font-size: 18px;height: 18px;line-height: 72px;}
.login>.line{height: 14px;width: 1px;background-color: #999999;margin: 29px 10px;}
.grey-line{height:60px;background-color: #666666;}
.grey-line .box .line{width: 1px;height: 20px;background-color: #f3f1f1;}
.grey-line .box{width: 102px;text-align: center;margin-top: 18px;}
.mid{margin: auto;width: 1200px;}
.grey-line .box img{margin-left: 39px;}
.banner{background: url(../img/banner.jpg);height: 350px;margin-top: 55px;position: relative;}
.banner>div{height: 30px;width: 140px;border-radius: 4px;background-color: #f3f3f3;position:absolute;right: 30px;}
.destination{position: absolute;bottom: 43px;line-height: 30px;}
.start{position: absolute;bottom: 117px;line-height: 30px;color: #333333;}
.start .guangzhou{font-size: 14px;font-weight: bold;margin:0 8px 0 38px;}
.start .from{font-size: 12px;}
.destination p {color: #999999;font-size: 14px;margin-left:8px ;}
.destination .fr{height: 30px;width: 30px;border-radius: 0 4px 4px 0;background-color: #5696ff;}
.destination .fr img{height: 16px;width: 16px;line-height: 0;vertical-align: bottom !important;margin-left: 7px;margin-bottom: 7px;}
.main-list .main-list .pic{width: 322px;}
.main-list .text{width: 530px;margin-left: 28px;}
.main-list .main-list{width: 870px;}
.main-list .item .text .saled{color: #5696ff;font-size: 14px;text-decoration: underline;}
.main-list .item .text .main-text{color: #333333;font-size: 22px;line-height: 30px;margin-top: 8px;}
.main-list .item .text .time{color: #666666;margin-top: 18px;}
.main-list .item .text .price{color: #eb4c4d;margin-top: 16px;}
.main-list .item .text .price .money{font-size: 36px;}
.main-list .item .text .price .as{font-size: 18px;}
.offer .main-list .item{position: relative;}
.main-list .item .text .button{box-sizing: border-box;border: #5696ff 1px solid;width: 140px;height: 50px;position: absolute;right:0 ;top:157px}
.main-list .first{margin-top: 0 !important;}
.main-list .item .text .button p{color: #5696ff;font-size: 22px;text-align: center;line-height: 48px;}
.main-list .item .line{width: 804px;height: 1px;background-color: #e9e9e9;margin-top: 50px;}
.main-list .item{margin-top: 50px;}
.branch-list .seller{box-sizing: border-box;border: #5696ff 1px solid;width: 279px;height: 48px;}
.branch-list .seller p{color: #282828;line-height: 48px;text-align: center;}
.offer{margin-top: 62px;}
.branch-list{margin-top: 35px;}
.branch-list .main-text{color: #333333;font-size: 13px;}
.branch-list .price{color: #eb4c4d;font-size: 14px;margin-top: 20px;}
.branch-list .line{width: 277px;height: 1px;background-color: #e9e9e9;margin-top: 18px;}
.branch-list .item{margin-top: 18px;}
.page .box{width: 1200px;}
.page .box .button{width: 198px;height: 59px;box-sizing: border-box;border: #dcdcdc 1px solid;margin-right: 22px ;}
.page .box .button p{line-height: 59px;text-align: center;font-size: 18px;color: #333333;}
.page .box>p{margin-right: 40px;line-height: 59px;}
.page{margin-top: 78px;}
.bottom{height: 94px;margin-top: 65px;background-color: #5696ff;padding-top: 36px;}
.bottom .box{width: 659px;height: 51px;margin: auto;}
.bottom .box p{font-size: 16px;color: #fafafc;margin-bottom:12px ;}
资讯
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>info</title>
<link rel="stylesheet" href="../css/info-style.css">
</head>
<body>
<div class="wrap">
<div class="nav">
<div class="logo fl">
<img src="../img/Logo.png"/>
<img src="../img/Logo-text.png">
</div>
<div class="main fl">
<div class="home fl">
<div style="text-align: center;">
<a href="https://razuberiii.github.io/html/travel/index/html/index.html">首页</a>
</div>
</div>
<div class="region fl">
<div style="text-align: center;">
<a href="https://razuberiii.github.io/html/travel/area/html/area.html">地区</a>
</div>
</div>
<div class="discount fl">
<div style="text-align: center;">
<a href="https://razuberiii.github.io/html/travel/offer/html/offer.html">特惠</a>
</div>
</div>
<div class="news fl">
<div style="text-align: center;">
<a href="https://razuberiii.github.io/html/travel/info/html/info.html">资讯</a>
</div>
</div>
<div class="travels fl">
<div style="text-align: center;">
<a href="https://razuberiii.github.io/html/travel/record/html/record.html">游记</a>
</div>
</div>
</div>
<div class="login fr">
<div class="fr">
<a href="https://razuberiii.github.io/html/travel/register/html/register.html">
<span>注册</span>
</a>
</div>
<div class="line fr"></div>
<div class="fr">
<a href="https://razuberiii.github.io/html/travel/login/html/login.html">
<span>登录</span>
</a>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
<div class="grey-line">
<div class="contains mid">
<div class="box fl">
<div class="line fl"></div>
<img class="fl" src="../img/search.png">
<div class="line fr"></div>
<div class="clear"></div>
</div>
<div class="box fr">
<img class="fl" src="../img/history.png">
<div class="line fr"></div>
<div class="clear"></div>
</div>
<div class="box fr">
<img class="fl" src="../img/comment.png">
<div class="line fr"></div>
<div class="clear"></div>
</div>
<div class="box fr">
<div class="line fl"></div>
<img class="fl" src="../img/person.png">
<div class="line fr"></div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
</div>
<div class="banner mid clear">
<div class="pic fl"></div>
<div class="text fr">
<div class="item">
<div class="main first">
<div class="circle"></div>
<p>欧盟提出申根签证改革方案 将简化申请<br>
手续提高签证费</p>
</div>
<div class="line"></div>
</div>
<div class="item">
<div class="main">
<div class="circle"></div>
<p>新加坡樟宜机场离境乘客7月起须额外支<br>
付63.5元</p>
</div>
<div class="line"></div>
</div>
<div class="item">
<div class="main">
<div class="circle"></div>
<p>2018 HCFR国际越野跑挑战赛·诗画浦江<br>
站在京启动</p>
</div>
</div>
</div>
</div>
<div class="info mid clear">
<div class="main fl">
<div class="row row1 clear">
<div class="item first fl">
<div class="pic" style="background: url(../img/info1.jpg)">
<div class="box">
<p>15<br>Marth</p>
</div>
</div>
<p class="title">最新！加拿大留学签证申请大变动：从6个类..</p>
<div class="auth">
<span class="by">by</span><span class="site"> 悠悠旅游网</span><span> [加拿大]</span>
</div>
<div class="line"></div>
<div class="preview">随着加拿大不断放宽移民签证政策，选择前往加拿大求学的<br>中国留学生也越来越多。 目前正值留学申请季的关键阶...</div>
</div>
<div class="item fl">
<div class="pic" style="background: url(../img/info2.jpg)">
<div class="box">
<p>15<br>Marth</p>
</div>
</div>
<p class="title">新西兰签证递交方式巨大变更 不再接受自行..</p>
<div class="auth">
<span class="by">by</span><span class="site"> 海外网</span><span> [新西兰]</span>
</div>
<div class="line"></div>
<div class="preview">据新西兰移民局(INZ)在10月30日发布的内部消息称，移民<br>局惠灵顿办事处将于11月17日起，永久停止对外办公..</div>
</div>
</div>
<div class="row clear">
<div class="item first fl">
<div class="pic" style="background: url(../img/info3.jpg)">
<div class="box">
<p>14<br>Marth</p>
</div>
</div>
<p class="title">澳大利亚签证申请者太多 南澳将关闭部分签...</p>
<div class="auth">
<span class="by">by</span><span class="site"> 中国华侨网</span><span> [澳大利亚]</span>
</div>
<div class="line"></div>
<div class="preview">3月14日电 据澳洲网编译报道，澳大利亚移民问题一直是最<br>具争议的议题之一，澳大利亚人口研究所最新公布一份...</div>
</div>
<div class="item fl">
<div class="pic" style="background: url(../img/info4.jpg)">
<div class="box">
<p>13<br>Marth</p>
</div>
</div>
<p class="title">华媒：泰国喃邦府发现“大峡谷” 或将开发...</p>
<div class="auth">
<span class="by">by</span><span class="site"> 中新网</span><span> [泰国]</span>
</div>
<div class="line"></div>
<div class="preview">3月13日电 泰国《世界日报》刊发文章称，泰国喃邦府深岩<br>县发现了一处新的土柱形成区域，完全具备开发成新景...</div>
</div>
</div>
<div class="row clear">
<div class="item first fl">
<div class="pic" style="background: url(../img/info5.jpg)">
<div class="box">
<p>13<br>Marth</p>
</div>
</div>
<p class="title">外联出国：2018财年签证配额已用完？移民...</p>
<div class="auth">
<span class="by">by</span><span class="site"> 中国网</span><span> [美国]</span>
</div>
<div class="line"></div>
<div class="preview">今天(3月13日)早上，很多人被美国国家签证中心NVC网站<br>上的更新排期表吓了一跳，因为EB-1美国杰出人才移民...</div>
</div>
<div class="item fl">
<div class="pic" style="background: url(../img/info6.jpg)">
<div class="box">
<p>13<br>Marth</p>
</div>
</div>
<p class="title">死海可能2050年干涸</p>
<div class="auth">
<span class="by">by</span><span class="site"> 广州日报</span><span> [北京]</span>
</div>
<div class="line"></div>
<div class="preview">死海，全球海拔最低湖泊，大自然赐予神奇浮力，促成“死<br>海不死”神奇，再加丰富矿物质，吸引世界各地游客...</div>
</div>
</div>
</div>
<div class="action fr">
<div class="news">
<p>行业动态</p>
<div class="line"></div>
<div class="news-list">
<div class="item item1" >
<div class="pic" style="background: url(../img/news-list1.jpg)"></div>
<div class="text">
<p class="time time1">2018.02.27</p>
<p class="content">《南京市旅游条例》3月1日<br>
正式实施</p>
</div>
</div>
<div class="item" >
<div class="pic" style="background: url(../img/news-list2.jpg)"></div>
<div class="text">
<p class="time">2017.08.07</p>
<p class="content">《广东省旅游条例》11月1日<br>
施行，通过社交平台组团...</p>
</div>
</div>
<div class="item" >
<div class="pic" style="background: url(../img/news-list3.jpg)"></div>
<div class="text">
<p class="time">2017.08.02</p>
<p class="content">去夏威夷的同学注意了！过马<br>
路玩手机？罚款！</p>
</div>
</div>
<div class="item" >
<div class="pic" style="background: url(../img/news-list4.jpg)"></div>
<div class="text">
<p class="time">2017.08.02</p>
<p class="content">八月起这批新规来到：北京整<br>
顿规范旅游市场</p>
</div>
</div>
</div>
</div>
<div class="tag">
<p>行业动态</p>
<div class="line"></div>
<div class="list">
<div class="item item1">
<p class="visa">签证</p>
<p class="Germany">德国</p>
</div>
<div class="item">
<p class="Japan">日本</p>
<p class="plane">飞机票</p>
</div>
<div class="item">
<p class="visa2">签证</p>
<p class="policy">政策</p>
<p class="traffic">交通</p>
</div>
</div>
</div>
</div>
</div>
<div class="page">
<div class="box mid">
<div class="last button fl">
<p><上一页</p>
</div>
<p class="fl">1</p>
<p class="fl">2</p>
<p class="fl">3</p>
<p class="fl">4</p>
<p class="fl">5</p>
<p class="fl">6</p>
<p class="fl">7</p>
<p class="fl">...</p>
<p class="fl" style="margin-right: 22px;">30</p>
<div class="next button fl">
<p>下一页></p>
</div>
<div class="clear"></div>
</div>
</div>
<div class="bottom">
<div class="box">
<p>© 2017 Leyouyou.cn 粤ICP备12345678号 粤公网安备123456789012号 粤ICP证123456号</p>
<p>营业执照 新出网证(粤)字123号 全国统一客服电话：0000-123-456</p>
</div>
</div>
</div>css
*{margin: 0;padding: 0;}
body{background-color: #f3f3f3;}
.nav{height: 72px;width: 1200px;margin: auto;}
.logo{margin-right: 160px;margin-top: 7px;}
.logo>img{vertical-align: middle;}
.fl{float:left}
.fr{float:right}
.clear{clear:both}
.nav>.main>div{height: 72px;width: 80px;margin-left:25px ;}
.nav a{line-height: 72px;text-decoration: none;}
.main>.news{background-color: #5696ff;}
.region:hover{background-color: #5696ff;}
.discount:hover{background-color: #5696ff;}
.news:hover{background-color: #5696ff;}
.travels:hover{background-color: #5696ff;}
.home:hover{background-color: #5696ff;}
.main a{color:#3c3d46;font-size: 18px;}
.main>.news a{color:#fefeff}
.nav>.login{height:72px;width: 105px;}
.login a{text-decoration: none;text-align: center;color: #3c3d46;font-size: 18px;height: 18px;line-height: 72px;}
.login>.line{height: 14px;width: 1px;background-color: #999999;margin: 29px 10px;}
.grey-line{height:60px;background-color: #666666;}
.grey-line .box .line{width: 1px;height: 20px;background-color: #f3f1f1;}
.grey-line .box{width: 102px;text-align: center;margin-top: 18px;}
.mid{margin: auto;width: 1200px;}
.grey-line .box img{margin-left: 39px;}
.fl{float: left;}
.fr{float: right;}
.clear:after{content:""; display:block;clear:both;}
.banner{margin-top: 46px;}
.banner .main{display: flex;align-items: center;justify-content:center;margin-top: 22px;}
.banner .first{margin-top: 28px;}
.banner .pic{background: url(../img/banner.jpg);width: 778px;height: 350px;}
.banner .text{background-color:#ffffff ;width: 422px;font-size: 20px;color: #333333;line-height: 35px;height: 350px;}
.banner .text .circle{width: 12px;height: 12px;border-radius: 100%;background-color: #fe5308;margin-right: 9px;margin-top: -32px;}
.banner .text .line{background-color: #e8e7e7;width: 348px;height: 1px;margin: auto;margin-top: 20px;}
.info .main{width: 871px;}
.info{margin-top: 86px;}
.info .main .row{margin-top: 32px;}
.info .main .row1{margin-top: 0;}
.info .main .row .first{margin-right: 30px;}
.info .main .row .item .pic .box{color: #ffffff;
font-size: 18px;
line-height: 24px;
width: 58px;
height: 58px;
background-color: #5696ff;
text-align: center;
margin: 0 16px;
padding-top: 7px;}
.info .main .row .item .pic{width: 420px;height: 235px;padding-top: 18px;}
.info .main .row .item .line{width: 419px;height: 1px;background-color: #eaeaea;}
.info .main .row .item .title{line-height: 20px;font-size: 20px;color: #222222;margin-top: 24px;}
.info .main .row .item .auth{color: #5696ff;margin-top: 19px;line-height: 16px;margin-bottom: 21px;}
.info .main .row .item .auth .site{color:#646464}
.info .main .row .item .preview{line-height: 24px;margin-top: 9px;}
.info .action .news .line{height: 3px;width: 56px;background-color: #5696ff;margin-top: 18px;}
.info .action .news>p{font-size: 24px;line-height: 24px;color: #2e2e2e;}
.info .action{width: 270px;}
.info .action .news .news-list{margin-top: 26px;}
.info .action .news .news-list .item{display: flex;justify-content: space-between;margin-top: 23px;}
.info .action .news .news-list .item1{margin-top: 26px;}
.info .action .news .news-list .item .text{display: flex;flex-direction:column;justify-content:space-between}
.info .action .news .news-list .item .pic{width: 70px;height: 62px;}
.info .action .news .news-list .item .time{font-size: 15px;color: #5696ff;}
.info .action .news .news-list .item .time1{color: #01b1d7;}
.info .action .news .news-list .item .content{font-size: 14px;color: #222222;}
.info .action .tag{margin-top: 33px;}
.info .action .tag .line{height: 3px;width: 56px;background-color: #5696ff;margin-top: 18px;}
.info .action .tag>p{font-size: 24px;line-height: 24px;color: #2e2e2e;}
.info .action .tag .item{display: flex;text-align: center;line-height: 38px;color: #a1a1a1;}
.info .action .tag .item p{border: #dcdcdc 1px solid;box-sizing: border-box;height: 38px;}
.info .action .tag .item .visa{width: 141px;background-color: #5696ff;color: #ffffff;margin-right: 6px;}
.info .action .tag .item .Germany{width: 122px;}
.info .action .tag .list{margin-top: 32px;}
.info .action .tag .item{margin-top: 6px;}
.info .action .tag .item1{margin-top: 0;}
.info .action .tag .item .Japan{width: 122px;margin-right: 6px;}
.info .action .tag .item .plane{width: 141px;}
.info .action .tag .item .visa2{width: 82px;margin-right: 6px;}
.info .action .tag .item .policy{width: 91px;margin-right: 6px;}
.info .action .tag .item .traffic{width: 86px;}
.page .box{width: 1200px;}
.page .box .button{width: 198px;height: 59px;box-sizing: border-box;border: #dcdcdc 1px solid;margin-right: 22px ;}
.page .box .button p{line-height: 59px;text-align: center;font-size: 18px;color: #333333;}
.page .box>p{margin-right: 40px;line-height: 59px;}
.page{margin-top: 78px;}
.bottom{height: 94px;margin-top: 65px;background-color: #5696ff;padding-top: 36px;}
.bottom .box{width: 659px;height: 51px;margin: auto;}
.bottom .box p{font-size: 16px;color: #fafafc;margin-bottom:12px ;}游记
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>record</title>
<link rel="stylesheet" href="../css/record-style.css">
</head>
<body>
<div class="wrap">
<div class="nav">
<div class="logo fl">
<img src="../img/Logo.png"/>
<img src="../img/Logo-text.png">
</div>
<div class="main fl">
<div class="home fl">
<div style="text-align: center;">
<a href="https://razuberiii.github.io/html/travel/index/html/index.html">首页</a>
</div>
</div>
<div class="region fl">
<div style="text-align: center;">
<a href="https://razuberiii.github.io/html/travel/area/html/area.html">地区</a>
</div>
</div>
<div class="discount fl">
<div style="text-align: center;">
<a href="https://razuberiii.github.io/html/travel/offer/html/offer.html">特惠</a>
</div>
</div>
<div class="news fl">
<div style="text-align: center;">
<a href="https://razuberiii.github.io/html/travel/info/html/info.html">咨询</a>
</div>
</div>
<div class="travels fl">
<div style="text-align: center;">
<a href="https://razuberiii.github.io/html/travel/record/html/record.html">游记</a>
</div>
</div>
</div>
<div class="login fr">
<div class="fr">
<a href="https://razuberiii.github.io/html/travel/register/html/register.html">
<span>注册</span>
</a>
</div>
<div class="line fr"></div>
<div class="fr">
<a href="https://razuberiii.github.io/html/travel/login/html/login.html">
<span>登录</span>
</a>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
<div class="grey-line">
<div class="contains mid">
<div class="box fl">
<div class="line fl"></div>
<img class="fl" src="../img/search.png">
<div class="line fr"></div>
<div class="clear"></div>
</div>
<div class="box fr">
<img class="fl" src="../img/history.png">
<div class="line fr"></div>
<div class="clear"></div>
</div>
<div class="box fr">
<img class="fl" src="../img/comment.png">
<div class="line fr"></div>
<div class="clear"></div>
</div>
<div class="box fr">
<div class="line fl"></div>
<img class="fl" src="../img/person.png">
<div class="line fr"></div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
</div>
<div class="record mid clear">
<div class="chosen fl">
<div class="essay frame">
<div class="box clear">
<p class="fl">精选文章</p>
<img src="../img/array.png" class="fr">
</div>
</div>
<div class="photo frame">
<div class="box clear">
<p class="fl">精选照片</p>
<img src="../img/array.png" class="fr down">
</div>
</div>
<div class="line"></div>
<div class="list">
<div class="item item1">
<div class="pic" style="background: url(../img/list1.jpg)"></div>
<div class="clear">
<div class="fl">
<p class="title">小桥流水</p>
<p class="time">2017年03月06日</p>
</div>
<img src="../img/stamp1.png" alt="" class="fr">
</div>
</div>
<div class="item">
<div class="pic" style="background: url(../img/list2.jpg)"></div>
<div class="clear">
<div class="fl">
<p class="title">黄昏与山</p>
<p class="time">2017年03月06日</p>
</div>
<img src="../img/stamp2.png" alt="" class="fr">
</div>
</div>
<div class="item">
<div class="pic" style="background: url(../img/list3.jpg)"></div>
<div class="clear">
<div class="fl">
<p class="title">冰雪奇缘</p>
<p class="time">2017年03月06日</p>
</div>
<img src="../img/stamp3.png" alt="" class="fr">
</div>
</div>
</div>
<div class="line"></div>
<div class="branch-list">
<div class="item item1 clear">
<img src="../img/branch-list1.jpg" class="fl">
<div class="fl text">
<p class="title">夕阳西下</p>
<p class="time">2017年11月01日</p>
</div>
</div>
<div class="line"></div>
<div class="item clear">
<img src="../img/branch-list2.jpg" class="fl">
<div class="fl text">
<p class="title">寻找</p>
<p class="time">2017年02月01日</p>
</div>
</div>
<div class="line"></div>
<div class="item clear">
<img src="../img/branch-list3.jpg" class="fl">
<div class="fl text">
<p class="title">梦之旅</p>
<p class="time">2017年08月08日</p>
</div>
</div>
<div class="line"></div>
<div class="item clear">
<img src="../img/branch-list4.jpg" class="fl">
<div class="fl text">
<p class="title">古堡环绕</p>
<p class="time">2017年02月01日</p>
</div>
</div>
<div class="line"></div>
<div class="item clear">
<img src="../img/branch-list5.jpg" class="fl">
<div class="fl text">
<p class="title">梦幻童话</p>
<p class="time">2017年12月01日</p>
</div>
</div>
<div class="line"></div>
</div>
<div class="about">
<p class="us">关于我们</p>
<div class="main">
<p>悠游旅游是全球领先的旅游网站**，帮助旅行者发<br>
现每次旅行中的更多精彩。提供超过5.7亿条点评和<br>
建议，全面覆盖全球的旅游商户——超过730万个<br>
住宿、航空公司、景点和餐厅信息，汇集众智帮助<br>
旅行者选择吃住玩乐。悠游旅游还搜索超过200家<br>
网站，帮助旅行者找到当日优惠的酒店价格并预订，<br>
悠游旅游：懂得更多，订得更好，玩得更棒。</p>
</div>
<div class="more">
<p>了解更多</p>
</div>
</div>
</div>
<div class="fr article">
<div class="item item1">
<div class="head clear">
<div class="title fl">
<p class="main">将德国的美好时光与幸福心态定格</p>
<p class="sub">Determine the good time and happiness of Germany</p>
</div>
<div class="auth fl">
<p class="time">2017年12月23日</p>
<div class="user clear">
<img src="../img/user1.png" class="fr">
<p class="username fr">Ben</p>
</div>
</div>
</div>
<div class="main-pic" style="background: url(../img/main-pic1.jpg)"></div>
<p class="text">喜欢洪莉，先喜欢她的语言表达，后来喜欢她的拍照功力，出了书以后又喜欢上她的文字。“浑身<br>
金毛、通体雪白。”谈起老公日耳曼民族的起源，洪莉用这八个字形容他们从山林中向这个世界走<br>
来的景象。我被她诗一般的语言迷住。我喜欢文字，洪莉偏偏是一个语言能力极强的人，她总是用<br>
特别浅白的语言，说出抑扬顿挫的诗意。</p>
<div class="tool clear">
<div class="button fl">
<p class="continue">继续阅读</p>
</div>
<div class="commont icon fr">
<p class="count count1 fr">120</p>
<img src="../img/comment1.png" class="fr">
<div class="clear"></div>
</div>
<div class="line fr"></div>
<div class="like icon fr">
<p class="count fr">256</p>
<img src="../img/like.png" class="fr">
<div class="clear"></div>
</div>
<div class="line fr"></div>
<div class="star icon fr">
<p class="count fr">187</p>
<img src="../img/star.png" class="fr">
<div class="clear"></div>
</div>
</div>
</div>
<div class="item">
<div class="head clear">
<div class="title fl">
<p class="main">将德国的美好时光与幸福心态定格</p>
<p class="sub">Determine the good time and happiness of Germany</p>
</div>
<div class="auth fl">
<p class="time">2017年12月23日</p>
<div class="user clear">
<img src="../img/user2.png" class="fr">
<p class="username fr">万鄄</p>
</div>
</div>
</div>
<div class="main-pic" style="background: url(../img/main-pic2.jpg)"></div>
<p class="text">喜欢洪莉，先喜欢她的语言表达，后来喜欢她的拍照功力，出了书以后又喜欢上她的文字。“浑身<br>
金毛、通体雪白。”谈起老公日耳曼民族的起源，洪莉用这八个字形容他们从山林中向这个世界走<br>
来的景象。我被她诗一般的语言迷住。我喜欢文字，洪莉偏偏是一个语言能力极强的人，她总是用<br>
特别浅白的语言，说出抑扬顿挫的诗意。</p>
<div class="tool clear">
<div class="button fl">
<p class="continue">继续阅读</p>
</div>
<div class="commont icon fr">
<p class="count count1 fr">120</p>
<img src="../img/comment1.png" class="fr">
<div class="clear"></div>
</div>
<div class="line fr"></div>
<div class="like icon fr">
<p class="count fr">256</p>
<img src="../img/like.png" class="fr">
<div class="clear"></div>
</div>
<div class="line fr"></div>
<div class="star icon fr">
<p class="count fr">187</p>
<img src="../img/star.png" class="fr">
<div class="clear"></div>
</div>
</div>
</div>
<div class="item">
<div class="head clear">
<div class="title fl">
<p class="main">将德国的美好时光与幸福心态定格</p>
<p class="sub">Determine the good time and happiness of Germany</p>
</div>
<div class="auth fl">
<p class="time">2017年12月23日</p>
<div class="user clear">
<img src="../img/user3.png" class="fr">
<p class="username fr">木子</p>
</div>
</div>
</div>
<div class="main-pic" style="background: url(../img/main-pic3.jpg)"></div>
<p class="text">喜欢洪莉，先喜欢她的语言表达，后来喜欢她的拍照功力，出了书以后又喜欢上她的文字。“浑身<br>
金毛、通体雪白。”谈起老公日耳曼民族的起源，洪莉用这八个字形容他们从山林中向这个世界走<br>
来的景象。我被她诗一般的语言迷住。我喜欢文字，洪莉偏偏是一个语言能力极强的人，她总是用<br>
特别浅白的语言，说出抑扬顿挫的诗意。</p>
<div class="tool clear">
<div class="button fl">
<p class="continue">继续阅读</p>
</div>
<div class="commont icon fr">
<p class="count count1 fr">120</p>
<img src="../img/comment1.png" class="fr">
<div class="clear"></div>
</div>
<div class="line fr"></div>
<div class="like icon fr">
<p class="count fr">256</p>
<img src="../img/like.png" class="fr">
<div class="clear"></div>
</div>
<div class="line fr"></div>
<div class="star icon fr">
<p class="count fr">187</p>
<img src="../img/star.png" class="fr">
<div class="clear"></div>
</div>
</div>
</div>
</div>
</div>
<div class="page mid">
<div class="box">
<div class="last button fl">
<p><上一页</p>
</div>
<p class="fl">1</p>
<p class="fl" style="color: #5696ff;">2</p>
<p class="fl">3</p>
<p class="fl">4</p>
<p class="fl">5</p>
<p class="fl">6</p>
<div class="next button fl">
<p>下一页></p>
</div>
<div class="clear"></div>
</div>
</div>
<div class="bottom">
<div class="box">
<p>© 2017 Leyouyou.cn 粤ICP备12345678号 粤公网安备123456789012号 粤ICP证123456号</p>
<p>营业执照 新出网证(粤)字123号 全国统一客服电话：0000-123-456</p>
</div>
</div>
</div>
</body>
</html>css
*{margin: 0;padding: 0;}
body{background-color: #f3f3f3;}
.nav{height: 72px;width: 1200px;margin: auto;}
.logo{margin-right: 160px;margin-top: 7px;}
.logo>img{vertical-align: middle;}
.fl{float:left}
.fr{float:right}
.clear{clear:both}
.nav>.main>div{height: 72px;width: 80px;margin-left:25px ;}
.nav a{line-height: 72px;text-decoration: none;}
.main>.travels{background-color: #5696ff;}
.region:hover{background-color: #5696ff;}
.discount:hover{background-color: #5696ff;}
.nav .news:hover{background-color: #5696ff;}
.travels:hover{background-color: #5696ff;}
.home:hover{background-color: #5696ff;}
.main a{color:#3c3d46;font-size: 18px;}
.main>.travels a{color:#fefeff}
.nav>.login{height:72px;width: 105px;}
.login a{text-decoration: none;text-align: center;color: #3c3d46;font-size: 18px;height: 18px;line-height: 72px;}
.login>.line{height: 14px;width: 1px;background-color: #999999;margin: 29px 10px;}
.grey-line{height:60px;background-color: #666666;}
.grey-line .box .line{width: 1px;height: 20px;background-color: #f3f1f1;}
.grey-line .box{width: 102px;text-align: center;margin-top: 18px;}
.mid{margin: auto;width: 1200px;}
.grey-line .box img{margin-left: 39px;}
.fl{float: left;}
.fr{float: right;}
.clear:after{content:""; display:block;clear:both;}
.record{margin-top: 54px;}
.record .chosen{width:354px}
.recoed .article{width: 771px;}
.record .chosen .frame{width: 208px;height: 61px;box-sizing: border-box;border: #dcdcdc 1px solid;margin: auto;}
.record .chosen .photo{margin-top: 44px;}
.record .chosen .box{width: 142px;margin: auto;line-height: 26px;margin-top: 16px;}
.record .chosen .box p{font-size: 26px;color: #5696ff;}
.record .chosen .box img{margin-top: 6px;}
.record .chosen .box .down{transform: rotate(90deg);}
.record .chosen .line{height: 1px;background-color: #dcdcdc;margin-top: 55px;}
.record .chosen .list{margin-top: 55px;}
.record .chosen .list .item{width: 354px;height: 270px;background-color: #ffffff;box-sizing: border-box;border: #dcdcdc 1px solid;margin-top: 55px;}
.record .chosen .list .item1{margin-top: 0;}
.record .chosen .list .item .pic{width:354px ;height: 183px;}
.record .chosen .list .item .title{color: #333333;font-size: 20px;line-height: 20px;margin: 26px 0 11px 22px;letter-spacing:2px}
.record .chosen .list .item .time{color:#666666;font-size: 12px;line-height: 12px;margin-left: 22px;letter-spacing:2px}
.record .chosen .list .item img{margin-top: 21px;margin-right: 30px;}
.record .chosen .branch-list{margin-top: 55px;letter-spacing:2px}
.record .chosen .branch-list .text{display: flex;justify-content: center;flex-direction: column;height: 90px;}
.record .chosen .branch-list img{margin-right: 21px;}
.record .chosen .branch-list .title{color: #333333;font-size: 20px;line-height: 20px;}
.record .chosen .branch-list .time{color: #666666;font-size: 12px;line-height: 12px;margin-top: 10px;}
.record .chosen .branch-list .line{margin-top: 37px;}
.record .chosen .branch-list .item{margin-top: 37px;}
.record .chosen .branch-list .item1{margin-top: 0;}
.about{margin-top: 45px;width: 370px;}
.about .us{font-size: 22px;color: #333333;line-height: 22px;}
.about div{color: #666666;line-height: 30px;}
.about .main{margin-top: 15px;}
.about .more{width: 122px;height: 50px;box-sizing: border-box;border: #d1d0d0 1px solid;margin-top: 22px;color: #333333;line-height: 50px;text-align: center;font-size: 14px;}
.article .item{width: 772px;height: 731px;background-color: #ffffff;box-sizing: border-box;border: #dcdcdc 1px solid;margin-top: 69px;}
.article .head .title{width: 593px;border: #dcdcdc 1px solid;height: 110px;box-sizing: border-box;margin: -1px 0 0 -1px;padding-left: 38px;}
.article .head .title .main{color: #333333;font-size: 22px;line-height: 22px;margin-top: 32px;}
.article .head .title .sub{font-size: 12px;line-height: 12px;color: #999999;margin-top: 14px;}
.article .head .auth{width: 179px;box-sizing: border-box;border: #dcdcdc 1px solid;border-left: none;height: 110px;margin: -1px -1px 0 0;padding-right: 38px;}
.article .head .auth .time{color: #333333;font-size: 12px;line-height: 12px;text-align: right;margin-top: 32px;}
.article .head .auth .user{margin-top: 7px;color: #666666;font-size: 12px;line-height: 12px;}
.article .head .auth .user .username{margin-top: 15px;margin-right: 13px;}
.article .item .main-pic{width: 696px;height: 310px;margin: auto;margin-top: 59px;}
.article .item>.text{color: #666666;line-height: 28px;margin-top: 25px;margin-left: 37px;}
.article .item .tool .line{width: 1px;height: 16px;background-color: #dcdcdc;margin: 0 29px 0 23px;}
.article .item .tool{color: #999999;font-size: 18px;line-height: 18px;margin-top: 40px;}
.clear{clear:both}
.article .item .tool img{margin-right: 16px;}
.article .item .tool .button{width: 110px;
height: 50px;
box-sizing: border-box;
border: #dcdcdc 1px solid;
color: #333333;
text-align: center;
font-size: 14px;
line-height: 50px;
margin-left: 36px;
margin-top: -16px;}
.article .item .tool .count1{margin-right: 38px;}
.article .item1{margin-top: 0;}
.page .box{width: 1200px;}
.page .box .button{width: 198px;height: 59px;box-sizing: border-box;border: #dcdcdc 1px solid;margin-right: 22px ;}
.page .box .button p{line-height: 59px;text-align: center;font-size: 18px;color: #333333;}
.page .box>p{margin-right: 50px;line-height: 59px;}
.page{margin-top: -58px;}
.bottom{height: 94px;margin-top: 65px;background-color: #5696ff;padding-top: 36px;}
.bottom .box{width: 659px;height: 51px;margin: auto;}
.bottom .box p{font-size: 16px;color: #fafafc;margin-bottom:12px ;}
.page .box{margin-left: 425px;}登录
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>login</title>
<link rel="stylesheet" href="../css/login-style.css">
</head>
<body>
<div class="wrap">
<div class="logo">
<img src="../img/logo.png">
</div>
<div class="login">
<div class="login-part">
<input class="username" type="text" placeholder="您的邮箱/手机号">
<input class="password" type="password" placeholder="您的密码">
<div class="forget">
<a href="about:blank">忘记密码</a>
</div>
<input class="login-button" type="button" value="登录">
<div class="line"></div>
</div>
<div class="pranter">
<p>用合作网站账户直接登录</p>
<div class="website clear">
<div class="item fl">
<img src="../img/sina.png" alt="">
<p>新浪微博</p>
</div>
<div class="item fl">
<img src="../img/tencent.png" alt="">
<p>QQ</p>
</div>
<div class="item fl">
<img src="../img/wechat.png" alt="">
<p>微信</p>
</div>
</div>
</div>
</div>
<div class="register">
<span>还没有账号？</span>
<a href="https://razuberiii.github.io/html/travel/register/html/register.html">马上注册</a>
</div>
</div>
</body>
</html>css
*{margin: 0;padding: 0;}
body {
background: url(../img/background.jpg) no-repeat;
background-size: 100% 100%;
background-attachment: fixed;
}
.logo{width: 93px;margin: auto;margin-top: 20px;}
.login{width: 380px;
height: 380px;
box-sizing: border-box;
border-radius: 8px;
background-color: #ffffff;
box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.4);
margin: auto;
margin-top: 22px;}
.username,.password{width: 300px;height: 40px;border-radius: 4px;border: #cecece 1px solid;box-sizing: border-box;margin: 40px 0 18px 40px;outline:none}
.password{margin-top: 0;margin-bottom: 15px;}
.forget{text-align: right;}
.login-part a{text-decoration: none;color: #5696ff;margin-right:40px ;font-size: 12px;}
.login-button{width: 300px;
height: 40px;
background-color: #5696ff;
border: none;
border-radius: 4px;color: #ffffff;
font-size: 18px;
margin-left: 40px;
margin-top: 15px;}
.login-part .line{height: 1px;background-color: #cecece;margin-top: 30px;}
.pranter{width: 300px;margin: auto;}
.pranter>p{color: #999999;font-size: 12px;margin-top: 16px;}
.fl{float: left;}
.clear:after{content:"";display: block;clear:both}
.website .item{height: 60px;color: #999999;font-size: 12px;margin-top: 20px;text-align: center;margin-right: 50px;}
.website .item img{display: block;margin: auto;}
.register{margin: auto;width: 160px;height: 26px;
line-height: 26px;
background-color: rgba(0, 0, 0, 0.2);
text-align: center;color: #ffffff;font-size: 12px;
border-radius: 8px;margin-top: 18px;}
.register a{text-decoration: none;color:#5696ff}
注册
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>register</title>
<link rel="stylesheet" href="../css/register-style.css">
</head>
<body>
<div class="wrap">
<div class="logo">
<img src="../img/logo.png">
</div>
<div class="login">
<div class="login-part">
<input class="username" type="text" placeholder="您的手机号">
<input class="login-button" type="button" value="登录">
<div class="accord">
<span style="color:#cecece">注册视为为同意</span><span style="color:#999999">《悠游用户使用协议》</span>
</div>
<div class="line"></div>
</div>
<div class="pranter">
<p>用合作网站账户直接登录</p>
<div class="website clear">
<div class="item fl">
<img src="../img/sina.png" alt="">
<p>新浪微博</p>
</div>
<div class="item fl">
<img src="../img/tencent.png" alt="">
<p>QQ</p>
</div>
<div class="item fl">
<img src="../img/wechat.png" alt="">
<p>微信</p>
</div>
</div>
</div>
</div>
<div class="register">
<span>已有账号？</span>
<a href="https://razuberiii.github.io/html/travel/login/html/login.html">马上登录</a>
</div>
</div>
</body>
</html>css
*{margin: 0;padding: 0;}
body {
background: url(../img/background.jpg) no-repeat;
background-size: 100% 100%;
background-attachment: fixed;
}
.logo{width: 93px;margin: auto;margin-top: 20px;}
.login{width: 380px;
height: 310px;
box-sizing: border-box;
border-radius: 8px;
background-color: #ffffff;
box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.4);
margin: auto;
margin-top: 22px;}
.username{width: 300px;height: 40px;border-radius: 4px;border: #cecece 1px solid;box-sizing: border-box;margin: 40px 0 0px 40px;outline:none}
.login-part a{text-decoration: none;color: #5696ff;margin-right:40px ;font-size: 12px;}
.login-button{width: 300px;
height: 40px;
background-color: #5696ff;
border: none;
border-radius: 4px;color: #ffffff;
font-size: 18px;
margin-left: 40px;
margin-top: 18px;}
.login-part .line{height: 1px;background-color: #cecece;margin-top: 14px;}
.pranter{width: 300px;margin: auto;}
.pranter>p{color: #999999;font-size: 12px;margin-top: 16px;}
.fl{float: left;}
.clear:after{content: "";display: block;clear:both}
.website .item{height: 60px;color: #999999;font-size: 12px;margin-top: 20px;text-align: center;margin-right: 50px;}
.website .item img{display: block;margin: auto;}
.register{margin: auto;width: 160px;height: 26px;
line-height: 26px;
background-color: rgba(0, 0, 0, 0.2);
text-align: center;color: #ffffff;font-size: 12px;
border-radius: 8px;margin-top: 18px;}
.register a{text-decoration: none;color:#5696ff}
.accord{text-align: right;margin-right: 40px;margin-top:15px;font-size: 12px;}