今天第二课15
继续完成相关内容
style
<style>
*{margin: 0;padding: 0;}
.fl{float: left;}
.fr{float: right;}
.clear{clear: both;}
body{background-color: #f3f3f3;}
.head{width: 1200px;margin: auto;font-size: 18px;color: #3c3d46;}
li{list-style: none;}
.nav li{float: left;width: 80px;height: 72px;line-height: 72px;margin-right: 24px;text-align: center;}
.nav{margin-left: 159px;}
.logo{margin-top: 7px;}
.logo img{vertical-align: middle;}
.act{background-color: #5096ff;color: #fff !important;}
.login{line-height: 72px;}
.head .line{margin: 0 10px;}
.banner{height: 600px;background: url(img/main_pic.jpg) no-repeat center;position: relative;}
.change{width: 53px;position: absolute;left: 50%;top: 552px;margin-left:-27px;}
.cir{width: 16px;height: 16px;border-radius: 50%;}
.circle1{background-color: #fcfcfd;}
.circle2{border: #fcfcfd 2px solid;box-sizing: border-box;}
.title .line{width: 78px;height: 6px;background-color: #666666;margin-top: 18px;}
.area{width: 327px;margin: auto;margin-top: 60px;}
.title h1{margin-left: 14px;font-size: 36px;color: #5096ff;}
.second_title{text-align: center;font-size: 22px;color: #666666;margin-top: 24px;}
.search{width: 350px;margin: auto;position: relative;margin-top: 70px;}
.search input{width: 350px;height: 40px;border: #666666 1px solid;border-radius: 5px;}
.search img{position: absolute;right: 13px;top: 8px;}
.pic{width: 118px;height: 373px;float: left;margin-right: 3px;}
.areapic_list{width: 1202px;margin: auto;margin-top: 55px;}
.denmark{width: 596px;background: url(img/denmark.jpg);}
.sichuan{background: url(img/sichuan.jpg);}
.dali{background: url(img/dali.jpg);}
.japan{background: url(img/japan.jpg);}
.italy{background: url(img/italy.jpg);}
.france{background: url(img/france.jpg);margin-right: 0;}
.areapic_list .shadow{height: 303px;background-color: rgba(51,51,51,0.5);padding-left: 30px;padding-top: 70px;}
.areapic_list .shadow p{font-size: 28px;color: #fcfcfd;line-height: 30px;}
.more{width: 160px;height: 54px;border: #5096ff 2px solid;border-radius: 5px;font-size: 26px;color: #5096ff;background: none;text-align: center;line-height: 54px;margin: auto;margin-top: 72px;}
.tour_news{width: 1200px;background: url(img/news_bg.jpg);height: 745px;margin: auto;margin-top: 402px;position: relative;}
.tour_news img{border: #f3f3f3 41px solid;position: absolute;right: 0;top: -176px;}
.rule .line{width: 132px;height: 7px;background-color: #666666;margin-left: auto;margin-bottom: 28px;}
.w1200{width: 1200px;margin: auto;}
.rule{margin-top: 50px;}
.rule p{width: 561px;font-size: 24px;line-height: 48px;color: #333333;text-indent: 2em;}
.rule h3{text-align: right;font-size: 30px;color: #333333;font-weight: 500;}
.art_tit{margin-left: 158px;}
.main_art{width: 730px;height: 965px;background: url(img/art_bg.jpg);}
.main_art .shadow{width: 501px;height: 965px;background: rgba(0,0,0,0.3);}
.photo{width: 1164px;height: 472px;box-shadow: #979797 0px 0px 20px 5px;padding:26px 18px 0 18px;}
</style>
body
<body>
<div class="wrap">
<!-- 头部导航 -->
<div class="head">
<div class="logo fl">
<img src="img/logo.png">
<img src="img/logo_name.png">
</div>
<ul class="nav fl">
<li class="act">首页</li>
<li>地区</li>
<li>特惠</li>
<li>资讯</li>
<li>游记</li>
<div class="clear"></div>
</ul>
<div class="login fr">
<span>登录</span>
<span class="line">|</span>
<span>注册</span>
</div>
<div class="clear"></div>
</div>
<!-- banner图 -->
<div class="banner">
<div class="change">
<div class="circle1 cir fl"></div>
<div class="circle2 cir fr"></div>
<div class="clear"></div>
</div>
</div>
<!-- 搜索框 -->
<div class="search">
<input placeholder="开启你的旅程吧!">
<img src="img/search_icon.png">
</div>
<!-- 地区旅游 -->
<div class="area">
<div class="title">
<div class="line fl"></div>
<h1 class="fl">地区旅游</h1>
<div class="line fr"></div>
<div class="clear"></div>
</div>
<div class="second_title">从这开始有意思的地方</div>
</div>
<!-- 图片列表 -->
<div class="areapic_list">
<div class="pic sichuan">
<div class="shadow">
<p>四<br>川</p>
</div>
</div>
<div class="pic dali"></div>
<div class="pic denmark"></div>
<div class="pic japan"></div>
<div class="pic italy"></div>
<div class="pic france"></div>
<div class="clear"></div>
</div>
<!-- 按钮 -->
<div class="more">More></div>
<!-- 旅游资讯 -->
<div class="tour_news">
<img src="img/pic.jpg">
</div>
<div class="rule w1200">
<div class="fl art_tit">
<div class="line"></div>
<h3>墨西哥关于<br>外国公民入境的有关规定</h3>
</div>
<div class="fr">
<p style="text-indent: 0em;">墨西哥对外国公民入境有严格的规定。为便于中国公民准备入境材料,驻墨西哥使馆将墨移民
局提供的部分规定摘译整理如下,供来墨人员参考(以下规定最终解释权属墨方有关部门):
</p>
<p>一、墨西哥《移民法》规定,外国公民入境墨西哥应满足如下要求:</p>
<p>1、向墨西哥移民官员出示如下证件:</p>
<p>(1)护照或现行国际法认可有效的身份和旅行证件;</p>
<p>(2)合法有效签证(如需)......</p>
</div>
<div class="clear"></div>
</div>
<!-- 游记分享 -->
<div class="w1200">
<div class="main_art fl">
<div class="shadow">
<p>云南 | 大理 | 洱海</p>
</div>
</div>
<div class="art_list fr"></div>
<div class="clear"></div>
</div>
<!-- 精选照片 -->
<div class="w1200 photo">
<div class="photo_tit"></div>
<div class="photo_list"></div>
</div>
</div>
</body>