html网页制作期末大作业-旅游旅行网站html+css+javascript 10个页面适用学生作业 课程设计在线电影影网、期末作业电影网、毕业设计在线电影网
一、部分页面截图
1.首页
二、部分页面源代码
1.首页代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>穷游网主页</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="hander">
<div class="hander_han">
<div class="hander_logo">
<a href="index.html"><img alt="" src="images/index_logo.png"></a>
</div>
<ul class="hander_nav">
<li class="hander_nav_li">
<a href="depth.html">
<span>独家深度</span>
</a>
<img alt="" src="images/index_icon_bottom.png">
<ul class="hander_nav_li_ul">
<li>
<span>特色长线</span>
</li>
<li>
<span>独家日游</span>
</li>
<li>
<span>Q-Home</span>
</li>
</ul>
</li>
<li class="hander_nav_li"><a href="destination.html"><span>目的地</span></a></li>
<li class="hander_nav_li">
<a href="community.html"><span>社区</span></a>
<img alt="" src="images/index_icon_bottom.png">
<ul class="hander_nav_li_ul">
<li>
<span>旅行论坛</span>
</li>
<li>
<span>旅行问答</span>
</li>
<li>
<span>JNE旅行生活美学</span>
</li>
<li>
<span>结伴同游</span>
</li>
<li>
<span>负责任的旅行</span>
</li>
<li>
<span>特别策划</span>
</li>
<li>
<span>灵感短视频</span>
</li>
</ul>
</li>
<li class="hander_nav_li"><a href="questions.html"><span>穷游问答</span></a></li>
<li class="hander_nav_li"><a href="air.html"><span>机票</span></a></li>
<li class="hander_nav_li">
<a href="hotel.html"><span>酒店.民宿</span></a>
<img alt="" src="images/index_icon_bottom.png">
<ul class="hander_nav_li_ul">
<li>
<span>酒店</span>
</li>
<li>
<span>爱彼迎</span>
</li>
<li>
<span>华人旅馆</span>
</li>
</ul>
</li>
<li class="hander_nav_li">
<a href="app.html"><span>穷游APP</span></a>
<img alt="" src="images/index_icon_bottom.png">
<ul class="hander_nav_li_ul">
<li>
<span>穷游APP</span>
</li>
<li>
<span>行程助手APP</span>
</li>
<li>
<span>穷游锦囊APP</span>
</li>
</ul>
</li>
<div class="hand_right">
<span><a href="register.html" target="_blank">注册</a></span>
<span><a href="login.html" target="_blank">登录</a></span>
</div>
</ul>
</div>
<div class="hander_img">
<ul class="hander_img_ul">
<li class="current"><img alt="" src="images/index_hander01.jpg"></li>
<li><img alt="" src="images/index_hander02.jpg"></li>
<li><img alt="" src="images/index_hander03.jpg"></li>
<li><img alt="" src="images/index_hander04.jpg"></li>
<li><img alt="" src="images/index_hander01.jpg"></li>
</ul>
<div class="img_search">
<ul>
<li><img src="images/locall.png" alt="">目的地</li>
<li><img src="images/bag.png" alt="">做行程</li>
<li><img src="images/tag.png" alt="">买折扣</li>
<li><img src="images/sleep.png" alt="">酒店</li>
</ul>
<div class="search_input">
<input type="text" placeholder="智利" class="txt">
<input type="button" value="搜索" class="btn">
</div>
</div>
<div class="text_paint" style="display:block">
<span><em>1</em> / 4</span>
<p>穷游锦囊 | 复活节岛</p>
<span>在距大陆最遥远的岛屿，与巨石像有个秘密约会</span>
</div>
<div class="text_paint">
<span><em>2</em> / 4</span>
<p>从本州骑到四国，漫步兔子岛、猫咪街，在空中为濑户大桥庆生</p>
<span>磨人哒小栗砸</span>
</div>
<div class="text_paint">
<span><em>3</em> / 4</span>
<p>穷游锦囊 | 复活节岛</p>
<span>在距大陆最遥远的岛屿，与巨石像有个秘密约会</span>
</div>
<div class="text_paint">
<span><em>4</em> / 4</span>
<p>穷游锦囊 | 复活节岛</p>
<span>在距大陆最遥远的岛屿，与巨石像有个秘密约会</span>
</div>
<div class="change left">
<img src="images/index_right.png" alt="">
</div>
<div class="change right">
<img src="images/index_left.png" alt="">
</div>
</div>
<div class="hander_footer">
<div class="center">
<span>
<img alt="" src="images/index_h_f01.jpg">
<img alt="" src="images/index_h_f02.jpg">
</span>
</div>
</div>
</div>
<div class="container">
<div class="con_1 center">
<h2 class="title">今日推荐</h2>
<ul class="con_1_ul">
<li>
<div class="con_1_img"><img src="images/index_con1_01.jpg"></div>
<div class="mgs">
<p>[暑期热卖]天津直飞大阪/东京6天往返含税机票(可选两点往返)</p>
<span>会安</span>
<span>天津</span>
</div>
</li>
<li>
<div class="con_1_img"><img src="images/index_con1_02.jpg"></div>
<div class="mgs">
<p>[暑期热卖]天津直飞大阪/东京6天往返含税机票(可选两点往返)</p>
<span>天津</span>
<span>会安</span>
</div>
</li>
<li>
<div class="con_1_img"><img src="images/index_con1_03.jpg"></div>
<div class="mgs">
<p>[暑期热卖]天津直飞大阪/东京6天往返含税机票(可选两点往返)</p>
<span>天津</span>
<span>会安</span>
</div>
</li>
<li>
<div class="con_1_img"><img src="images/index_con1_04.jpg"></div>
<div class="mgs">
<p>[暑期热卖]天津直飞大阪/东京6天往返含税机票(可选两点往返)</p>
<span>天津</span>
<span>会安</span>
</div>
</li>
<li>
<div class="con_1_img"><img src="images/index_con1_04.jpg"></div>
<div class="mgs">
<p>[暑期热卖]天津直飞大阪/东京6天往返含税机票(可选两点往返)</p>
<span>天津</span>
<span>会安</span>
</div>
</li>
<li>
<div class="con_1_img"><img src="images/index_con1_05.jpg"></div>
<div class="mgs">
<p>[暑期热卖]天津直飞大阪/东京6天往返含税机票(可选两点往返)</p>
<span>天津</span>
<span>会安</span>
</div>
</li>
<li>
<div class="con_1_img"><img src="images/index_con1_06.jpg"></div>
<div class="mgs">
<p>[暑期热卖]天津直飞大阪/东京6天往返含税机票(可选两点往返)</p>
<span>天津</span>
<span>会安</span>
</div>
</li>
<li>
<div class="con_1_img"><img src="images/index_con1_07.jpg"></div>
<div class="mgs">
<p>[暑期热卖]天津直飞大阪/东京6天往返含税机票(可选两点往返)</p>
<span>会安</span>
<span>天津</span>
</div>
</li>
</ul>
</div>
<div class="con_2">
<h2 class="title">穷游商城</h2>
<div class="con_2_box1 center">
<ul class="box_1_ul_1" style="display:block">
<li>
<div class="box1_title">
<h3>限时低价</h3>
</div>
<div class="box1_img">
<img src="images/index_box1_01.jpg">
<span>上海直飞重庆5天往返含税机票（赠送首晚酒店住宿）</span>
</div>
<div class="box1_pri">
<p><span>1499</span>元起</p>
<button>立即抢购</button>
</div>
<div class="box1_more">更多低价：<a href="#">[暑期]北京直飞柬埔寨吴哥5天3晚半自助游</a></div>
</li>
<li>
<div class="box1_title">
<h3>限时低价</h3>
</div>
<div class="box1_img">
<img src="images/index_box1_02.jpg">
<span>[上海领区]东南亚8国个人旅游签证套餐(任选3国办理)</span>
</div>
<div class="box1_pri">
<p><span>799</span>元起</p>
<button>立即抢购</button>
</div>
<div class="box1_more">更多低价：<a href="#">【全国受理】马来西亚个人旅游签证</a></div>
</li>
<li>
<div class="box1_title">
<h3>限时低价</h3>
</div>
<div class="box1_img">
<img src="images/index_box1_03.jpg">
<span>约会圣诞老人 跨越北境临冬国<br>芬兰多城玩法大集合</span>
</div>
<div class="box1_pri">
<p><span>190</span>元起</p>
<button>立即抢购</button>
</div>
<div class="box1_more">更多低价：
<a href="#"> 绝美枫叶国 给美食胜景“加”点料</a></div>
</li>
</ul>
<ul class="box_1_ul_2 box_same ">
<li>
<img alt="" src="images/index_box2_01.jpg">
<div class="b_ifo">美国个人旅游签证(全国受理,可加急办理,EVUS更新,顺丰包回邮)</div>
<div class="b_time">
<span>签证</span>
<span>1970/01-2017/08</span>
</div>
<div class="b_pri">
<span>1188</span>元起
</div>
</li>
<li>
<img alt="" src="images/index_box2_02.jpg">
<div class="b_ifo">加拿大个人旅游签证(全国收取)</div>
<div class="b_time">
<span>签证</span>
<span>2016/06-2017/06</span>
</div>
<div class="b_pri">
<span>970</span>元起
</div>
</li>
<li>
<img alt="" src="images/index_box2_03.jpg">
<div class="b_ifo">串根16国个人旅游签证（全国受理）</div>
<div class="b_time">
<span>签证</span>
<span>2015/08-2016/05</span>
</div>
<div class="b_pri">
<span>750</span>元起
</div>
</li>
<li>
<img alt="" src="images/index_box2_04.jpg">
<div class="b_ifo">【北京领区,限量抢购】日本个人旅游签证(单次/多次/简化办理;拒签退款)</div>
<div class="b_time">
<span>签证</span>
<span>长期有效</span>
</div>
<div class="b_pri">
<span>285</span>元起
</div>
</li>
<li>
<img alt="" src="images/index_box2_05.jpg">
<div class="b_ifo">日本个人旅游签证(上海领区,拒签退款;单次/多次可选;送1日Wi-Fi)</div>
<div class="b_time">
<span>签证</span>
<span>2015/12-2016/12</span>
</div>
<div class="b_pri">
<span>79</span>元起
</div>
</li>
<li>
<img alt="" src="images/index_box2_06.jpg">
<div class="b_ifo">(四星,功孟海滩)甲米毕安酒店 Beyond Resort Krabi(含双早)</div>
<div class="b_time">
<span>签证</span>
<span>2016/04-2018/06</span>
</div>
<div class="b_pri">
<span>80</span>元起
</div>
</li>
</ul>
<ul class="box_1_ul_3 box_same ">
<li>
<img alt="" src="images/index_box3_01.jpg">
<div class="b_ifo">美国个人旅游签证(全国受理,可加急办理,EVUS更新,顺丰包回邮)</div>
<div class="b_time">
<span>签证</span>
<span>1970/01-2017/08</span>
</div>
<div class="b_pri">
<span>1188</span>元起
</div>
</li>
<li>
<img alt="" src="images/index_box3_02.jpg">
<div class="b_ifo">加拿大个人旅游签证(全国收取)</div>
<div class="b_time">
<span>签证</span>
<span>2016/06-2017/06</span>
</div>
<div class="b_pri">
<span>970</span>元起
</div>
</li>
<li>
<img alt="" src="images/index_box3_03.jpg">
<div class="b_ifo">串根16国个人旅游签证（全国受理）</div>
<div class="b_time">
<span>签证</span>
<span>2015/08-2016/05</span>
</div>
<div class="b_pri">
<span>750</span>元起
</div>
</li>
<li>
<img alt="" src="images/index_box3_04.jpg">
<div class="b_ifo">【北京领区,限量抢购】日本个人旅游签证(单次/多次/简化办理;拒签退款)</div>
<div class="b_time">
<span>签证</span>
<span>长期有效</span>
</div>
<div class="b_pri">
<span>285</span>元起
</div>
</li>
<li>
<img alt="" src="images/index_box3_05.jpg">
<div class="b_ifo">日本个人旅游签证(上海领区,拒签退款;单次/多次可选;送1日Wi-Fi)</div>
<div class="b_time">
<span>签证</span>
<span>2015/12-2016/12</span>
</div>
<div class="b_pri">
<span>79</span>元起
</div>
</li>
<li>
<img alt="" src="images/index_box3_06.jpg">
<div class="b_ifo">(四星,功孟海滩)甲米毕安酒店 Beyond Resort Krabi(含双早)</div>
<div class="b_time">
<span>签证</span>
<span>2016/04-2018/06</span>
</div>
<div class="b_pri">
<span>80</span>元起
</div>
</li>
</ul>
<ul class="box_1_ul_4 box_same ">
<li>
<img alt="" src="images/index_box4_01.jpg">
<div class="b_ifo">美国个人旅游签证(全国受理,可加急办理,EVUS更新,顺丰包回邮)</div>
<div class="b_time">
<span>签证</span>
<span>1970/01-2017/08</span>
</div>
<div class="b_pri">
<span>1188</span>元起
</div>
</li>
<li>
<img alt="" src="images/index_box4_02.jpg">
<div class="b_ifo">加拿大个人旅游签证(全国收取)</div>
<div class="b_time">
<span>签证</span>
<span>2016/06-2017/06</span>
</div>
<div class="b_pri">
<span>970</span>元起
</div>
</li>
<li>
<img alt="" src="images/index_box4_03.jpg">
<div class="b_ifo">串根16国个人旅游签证（全国受理）</div>
<div class="b_time">
<span>签证</span>
<span>2015/08-2016/05</span>
</div>
<div class="b_pri">
<span>750</span>元起
</div>
</li>
<li>
<img alt="" src="images/index_box4_04.jpg">
<div class="b_ifo">【北京领区,限量抢购】日本个人旅游签证(单次/多次/简化办理;拒签退款)</div>
<div class="b_time">
<span>签证</span>
<span>长期有效</span>
</div>
<div class="b_pri">
<span>285</span>元起
</div>
</li>
<li>
<img alt="" src="images/index_box4_05.png">
<div class="b_ifo">日本个人旅游签证(上海领区,拒签退款;单次/多次可选;送1日Wi-Fi)</div>
<div class="b_time">
<span>签证</span>
<span>2015/12-2016/12</span>
</div>
<div class="b_pri">
<span>79</span>元起
</div>
</li>
<li>
<img alt="" src="images/index_box4_06.jpg">
<div class="b_ifo">(四星,功孟海滩)甲米毕安酒店 Beyond Resort Krabi(含双早)</div>
<div class="b_time">
<span>签证</span>
<span>2016/04-2018/06</span>
</div>
<div class="b_pri">
<span>80</span>元起
</div>
</li>
</ul>
<ul class="box_1_ul_5 box_same ">
<li>
<img alt="" src="images/index_box5_01.jpg">
<div class="b_ifo">美国个人旅游签证(全国受理,可加急办理,EVUS更新,顺丰包回邮)</div>
<div class="b_time">
<span>签证</span>
<span>1970/01-2017/08</span>
</div>
<div class="b_pri">
<span>1188</span>元起
</div>
</li>
<li>
<img alt="" src="images/index_box5_02.jpg">
<div class="b_ifo">加拿大个人旅游签证(全国收取)</div>
<div class="b_time">
<span>签证</span>
<span>2016/06-2017/06</span>
</div>
<div class="b_pri">
<span>970</span>元起
</div>
</li>
<li>
<img alt="" src="images/index_box5_03.jpg">
<div class="b_ifo">串根16国个人旅游签证（全国受理）</div>
<div class="b_time">
<span>签证</span>
<span>2015/08-2016/05</span>
</div>
<div class="b_pri">
<span>750</span>元起
</div>
</li>
<li>
<img alt="" src="images/index_box5_04.jpg">
<div class="b_ifo">【北京领区,限量抢购】日本个人旅游签证(单次/多次/简化办理;拒签退款)</div>
<div class="b_time">
<span>签证</span>
<span>长期有效</span>
</div>
<div class="b_pri">
<span>285</span>元起
</div>
</li>
<li>
<img alt="" src="images/index_box5_05.jpg">
<div class="b_ifo">日本个人旅游签证(上海领区,拒签退款;单次/多次可选;送1日Wi-Fi)</div>
<div class="b_time">
<span>签证</span>
<span>2015/12-2016/12</span>
</div>
<div class="b_pri">
<span>79</span>元起
</div>
</li>
<li>
<img alt="" src="images/index_box5_06.jpg">
<div class="b_ifo">(四星,功孟海滩)甲米毕安酒店 Beyond Resort Krabi(含双早)</div>
<div class="b_time">
<span>签证</span>
<span>2016/04-2018/06</span>
</div>
<div class="b_pri">
<span>80</span>元起
</div>
</li>
</ul>
<div class="box_1_ctr">
<span class="current"></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="box_1_mr">
<a href="#">查看更多折扣</a>
</div>
</div>
</div>
<div class="con_3">
<h2 class="title">热门游记与话题</h2>
<div class="con3_box1 center">
<ul class="con_3_ul current">
<li>
<div class="con3_img">
<img src="images/index_con3_ul1_hand01.jpg" alt="">
</div>
<div class="con3_inner">
<div class="c3_inner_title">
<span class="con3_inr_hand">
<img src="images/index_con3_ul1_hand01_01.jpg" alt="">
</span>
<span class="con3_inr_title">穷游大秘书</span>
</div>
<div class="con3_inner_p">
今日话题|你多久没休假旅行了？
</div>
</div>
</li>
<li>
<div class="con3_img">
<img src="images/index_con3_ul1_hand02.jpg" alt="">
</div>
<div class="con3_inner">
<div class="c3_inner_title">
<span class="con3_inr_hand">
<img src="images/index_con3_ul1_hand01_02.jpg" alt="">
</span>
<span class="con3_inr_title">穷游大秘书</span>
</div>
<div class="con3_inner_p">
时光的调色板-考拉12日埃及环游记（开罗，阿斯旺，卢克索，胡尔哥达）
</div>
</div>
<span>精选</span>
</li>
<li>
<div class="con3_img">
<img src="images/index_con3_ul1_hand03.jpg" alt="">
</div>
<div class="con3_inner">
<div class="c3_inner_title">
<span class="con3_inr_hand">
<img src="images/index_con3_ul1_hand01_03.jpg" alt="">
</span>
<span class="con3_inr_title">穷游大秘书</span>
</div>
<div class="con3_inner_p">
今日话题|你多久没休假旅行了？
</div>
</div>
<span>精选</span>
</li>
<li>
<div class="con3_img">
<img src="images/index_con3_ul1_hand04.jpg" alt="">
</div>
<div class="con3_inner">
<div class="c3_inner_title">
<span class="con3_inr_hand">
<img src="images/index_con3_ul1_hand01_04.jpg" alt="">
</span>
<span class="con3_inr_title">穷游大秘书</span>
</div>
<div class="con3_inner_p">
今日话题|你多久没休假旅行了？
</div>
</div>
<span>精选</span>
</li>
<li>
<div class="con3_img">
<img src="images/index_con3_ul1_hand05.jpg" alt="">
</div>
<div class="con3_inner">
<div class="c3_inner_title">
<span class="con3_inr_hand">
<img src="images/index_con3_ul1_hand01_05.jpg" alt="">
</span>
<span class="con3_inr_title">穷游大秘书</span>
</div>
<div class="con3_inner_p">
今日话题|你多久没休假旅行了？
</div>
</div>
<span>精选</span>
</li>
<li>
<div class="con3_img">
<img src="images/index_con3_ul1_hand06.jpg" alt="">
</div>
<div class="con3_inner">
<div class="c3_inner_title">
<span class="con3_inr_hand">
<img src="images/index_con3_ul1_hand01_06.jpg" alt="">
</span>
<span class="con3_inr_title">穷游大秘书</span>
</div>
<div class="con3_inner_p">
今日话题|你多久没休假旅行了？
</div>
</div>
<span>精选</span>
</li>
<li>
<div class="con3_img">
<img src="images/index_con3_ul1_hand07.jpg" alt="">
</div>
<div class="con3_inner">
<div class="c3_inner_title">
<span class="con3_inr_hand">
<img src="images/index_con3_ul1_hand01_07.jpg" alt="">
</span>
<span class="con3_inr_title">穷游大秘书</span>
</div>
<div class="con3_inner_p">
今日话题|你多久没休假旅行了？
</div>
</div>
<span>精选</span>
</li>
<li>
<div class="con3_img">
<img src="images/index_con3_ul1_hand08.jpg" alt="">
</div>
<div class="con3_inner">
<div class="c3_inner_title">
<span class="con3_inr_hand">
<img src="images/index_con3_ul1_hand01_08.jpg" alt="">
</span>
<span class="con3_inr_title">穷游大秘书</span>
</div>
<div class="con3_inner_p">
今日话题|你多久没休假旅行了？
</div>
</div>
<span>精选</span>
</li>
</ul>
<ul class="con_3_ul">
<li>
<div class="con3_img">
<img src="images/index_con3_ul2_hand01.jpg" alt="">
</div>
<div class="con3_inner">
<div class="c3_inner_title">
<span class="con3_inr_hand">
<img src="images/index_con3_ul2_hand01_01.jpg" alt="">
</span>
<span class="con3_inr_title">穷游大秘书</span>
</div>
<div class="con3_inner_p">
今日话题|你多久没休假旅行了？
</div>
</div>
</li>
<li>
<div class="con3_img">
<img src="images/index_con3_ul2_hand02.jpg" alt="">
</div>
<div class="con3_inner">
<div class="c3_inner_title">
<span class="con3_inr_hand">
<img src="images/index_con3_ul2_hand01_02.jpg" alt="">
</span>
<span class="con3_inr_title">穷游大秘书</span>
</div>
<div class="con3_inner_p">
时光的调色板-考拉12日埃及环游记（开罗，阿斯旺，卢克索，胡尔哥达）
</div>
</div>
<span>精选</span>
</li>
<li>
<div class="con3_img">
<img src="images/index_con3_ul2_hand03.jpg" alt="">
</div>
<div class="con3_inner">
<div class="c3_inner_title">
<span class="con3_inr_hand">
<img src="images/index_con3_ul2_hand01_03.jpg" alt="">
</span>
<span class="con3_inr_title">穷游大秘书</span>
</div>
<div class="con3_inner_p">
今日话题|你多久没休假旅行了？
</div>
</div>
<span>精选</span>
</li>
<li>
<div class="con3_img">
<img src="images/index_con3_ul2_hand04.jpg" alt="">
</div>
<div class="con3_inner">
<div class="c3_inner_title">
<span class="con3_inr_hand">
<img src="images/index_con3_ul2_hand01_04.jpg" alt="">
</span>
<span class="con3_inr_title">穷游大秘书</span>
</div>
<div class="con3_inner_p">
今日话题|你多久没休假旅行了？
</div>
</div>
<span>精选</span>
</li>
<li>
<div class="con3_img">
<img src="images/index_con3_ul2_hand05.jpg" alt="">
</div>
<div class="con3_inner">
<div class="c3_inner_title">
<span class="con3_inr_hand">
<img src="images/index_con3_ul1_hand01_05.jpg" alt="">
</span>
<span class="con3_inr_title">穷游大秘书</span>
</div>
<div class="con3_inner_p">
今日话题|你多久没休假旅行了？
</div>
</div>
<span>精选</span>
</li>
<li>
<div class="con3_img">
<img src="images/index_con3_ul2_hand06.jpg" alt="">
</div>
<div class="con3_inner">
<div class="c3_inner_title">
<span class="con3_inr_hand">
<img src="images/index_con3_ul1_hand01_06.jpg" alt="">
</span>
<span class="con3_inr_title">穷游大秘书</span>
</div>
<div class="con3_inner_p">
今日话题|你多久没休假旅行了？
</div>
</div>
<span>精选</span>
</li>
<li>
<div class="con3_img">
<img src="images/index_con3_ul2_hand07.jpg" alt="">
</div>
<div class="con3_inner">
<div class="c3_inner_title">
<span class="con3_inr_hand">
<img src="images/index_con3_ul1_hand01_07.jpg" alt="">
</span>
<span class="con3_inr_title">穷游大秘书</span>
</div>
<div class="con3_inner_p">
今日话题|你多久没休假旅行了？
</div>
</div>
<span>精选</span>
</li>
<li>
<div class="con3_img">
<img src="images/index_con3_ul2_hand08.jpg" alt="">
</div>
<div class="con3_inner">
<div class="c3_inner_title">
<span class="con3_inr_hand">
<img src="images/index_con3_ul1_hand01_08.jpg" alt="">
</span>
<span class="con3_inr_title">穷游大秘书</span>
</div>
<div class="con3_inner_p">
今日话题|你多久没休假旅行了？
</div>
</div>
<span>精选</span>
</li>
</ul>
<ul class="con_3_ul">
<li>
<div class="con3_img">
<img src="images/index_con3_ul3_hand01.jpg" alt="">
</div>
<div class="con3_inner">
<div class="c3_inner_title">
<span class="con3_inr_hand">
<img src="images/index_con3_ul2_hand01_01.jpg" alt="">
</span>
<span class="con3_inr_title">穷游大秘书</span>
</div>
<div class="con3_inner_p">
今日话题|你多久没休假旅行了？
</div>
</div>
</li>
<li>
<div class="con3_img">
<img src="images/index_con3_ul3_hand02.jpg" alt="">
</div>
<div class="con3_inner">
<div class="c3_inner_title">
<span class="con3_inr_hand">
<img src="images/index_con3_ul2_hand01_02.jpg" alt="">
</span>
<span class="con3_inr_title">穷游大秘书</span>
</div>
<div class="con3_inner_p">
时光的调色板-考拉12日埃及环游记（开罗，阿斯旺，卢克索，胡尔哥达）
</div>
</div>
<span>精选</span>
</li>
<li>
<div class="con3_img">
<img src="images/index_con3_ul3_hand03.jpg" alt="">
</div>
<div class="con3_inner">
<div class="c3_inner_title">
<span class="con3_inr_hand">
<img src="images/index_con3_ul2_hand01_03.jpg" alt="">
</span>
<span class="con3_inr_title">穷游大秘书</span>
</div>
<div class="con3_inner_p">
今日话题|你多久没休假旅行了？
</div>
</div>
<span>精选</span>
</li>
<li>
<div class="con3_img">
<img src="images/index_con3_ul3_hand04.jpg" alt="">
</div>
<div class="con3_inner">
<div class="c3_inner_title">
<span class="con3_inr_hand">
<img src="images/index_con3_ul2_hand01_04.jpg" alt="">
</span>
<span class="con3_inr_title">穷游大秘书</span>
</div>
<div class="con3_inner_p">
今日话题|你多久没休假旅行了？
</div>
</div>
<span>精选</span>
</li>
<li>
<div class="con3_img">
<img src="images/index_con3_ul3_hand05.jpg" alt="">
</div>
<div class="con3_inner">
<div class="c3_inner_title">
<span class="con3_inr_hand">
<img src="images/index_con3_ul1_hand01_05.jpg" alt="">
</span>
<span class="con3_inr_title">穷游大秘书</span>
</div>
<div class="con3_inner_p">
今日话题|你多久没休假旅行了？
</div>
</div>
<span>精选</span>
</li>
<li>
<div class="con3_img">
<img src="images/index_con3_ul3_hand06.jpg" alt="">
</div>
<div class="con3_inner">
<div class="c3_inner_title">
<span class="con3_inr_hand">
<img src="images/index_con3_ul1_hand01_06.jpg" alt="">
</span>
<span class="con3_inr_title">穷游大秘书</span>
</div>
<div class="con3_inner_p">
今日话题|你多久没休假旅行了？
</div>
</div>
<span>精选</span>
</li>
<li>
<div class="con3_img">
<img src="images/index_con3_ul3_hand07.jpg" alt="">
</div>
<div class="con3_inner">
<div class="c3_inner_title">
<span class="con3_inr_hand">
<img src="images/index_con3_ul1_hand01_07.jpg" alt="">
</span>
<span class="con3_inr_title">穷游大秘书</span>
</div>
<div class="con3_inner_p">
今日话题|你多久没休假旅行了？
</div>
</div>
<span>精选</span>
</li>
<li>
<div class="con3_img">
<img src="images/index_con3_ul3_hand08.jpg" alt="">
</div>
<div class="con3_inner">
<div class="c3_inner_title">
<span class="con3_inr_hand">
<img src="images/index_con3_ul1_hand01_08.jpg" alt="">
</span>
<span class="con3_inr_title">穷游大秘书</span>
</div>
<div class="con3_inner_p">
今日话题|你多久没休假旅行了？
</div>
</div>
<span>精选</span>
</li>
</ul>
<ul class="con_3_ul">
<li>
<div class="con3_img">
<img src="images/index_con3_ul4_hand01.jpg" alt="">
</div>
<div class="con3_inner">
<div class="c3_inner_title">
<span class="con3_inr_hand">
<img src="images/index_con3_ul2_hand01_01.jpg" alt="">
</span>
<span class="con3_inr_title">穷游大秘书</span>
</div>
<div class="con3_inner_p">
今日话题|你多久没休假旅行了？
</div>
</div>
</li>
<li>
<div class="con3_img">
<img src="images/index_con3_ul4_hand02.jpg" alt="">
</div>
<div class="con3_inner">
<div class="c3_inner_title">
<span class="con3_inr_hand">
<img src="images/index_con3_ul2_hand01_02.jpg" alt="">
</span>
<span class="con3_inr_title">穷游大秘书</span>
</div>
<div class="con3_inner_p">
时光的调色板-考拉12日埃及环游记（开罗，阿斯旺，卢克索，胡尔哥达）
</div>
</div>
<span>精选</span>
</li>
<li>
<div class="con3_img">
<img src="images/index_con3_ul4_hand03.jpg" alt="">
</div>
<div class="con3_inner">
<div class="c3_inner_title">
<span class="con3_inr_hand">
<img src="images/index_con3_ul2_hand01_03.jpg" alt="">
</span>
<span class="con3_inr_title">穷游大秘书</span>
</div>
<div class="con3_inner_p">
今日话题|你多久没休假旅行了？
</div>
</div>
<span>精选</span>
</li>
<li>
<div class="con3_img">
<img src="images/index_con3_ul4_hand04.jpg" alt="">
</div>
<div class="con3_inner">
<div class="c3_inner_title">
<span class="con3_inr_hand">
<img src="images/index_con3_ul2_hand01_04.jpg" alt="">
</span>
<span class="con3_inr_title">穷游大秘书</span>
</div>
<div class="con3_inner_p">
今日话题|你多久没休假旅行了？
</div>
</div>
<span>精选</span>
</li>
<li>
<div class="con3_img">
<img src="images/index_con3_ul4_hand05.jpg" alt="">
</div>
<div class="con3_inner">
<div class="c3_inner_title">
<span class="con3_inr_hand">
<img src="images/index_con3_ul1_hand01_05.jpg" alt="">
</span>
<span class="con3_inr_title">穷游大秘书</span>
</div>
<div class="con3_inner_p">
今日话题|你多久没休假旅行了？
</div>
</div>
<span>精选</span>
</li>
<li>
<div class="con3_img">
<img src="images/index_con3_ul4_hand06.jpg" alt="">
</div>
<div class="con3_inner">
<div class="c3_inner_title">
<span class="con3_inr_hand">
<img src="images/index_con3_ul1_hand01_06.jpg" alt="">
</span>
<span class="con3_inr_title">穷游大秘书</span>
</div>
<div class="con3_inner_p">
今日话题|你多久没休假旅行了？
</div>
</div>
<span>精选</span>
</li>
<li>
<div class="con3_img">
<img src="images/index_con3_ul4_hand07.jpg" alt="">
</div>
<div class="con3_inner">
<div class="c3_inner_title">
<span class="con3_inr_hand">
<img src="images/index_con3_ul1_hand01_07.jpg" alt="">
</span>
<span class="con3_inr_title">穷游大秘书</span>
</div>
<div class="con3_inner_p">
今日话题|你多久没休假旅行了？
</div>
</div>
<span>精选</span>
</li>
<li>
<div class="con3_img">
<img src="images/index_con3_ul4_hand08.jpg" alt="">
</div>
<div class="con3_inner">
<div class="c3_inner_title">
<span class="con3_inr_hand">
<img src="images/index_con3_ul1_hand01_08.jpg" alt="">
</span>
<span class="con3_inr_title">穷游大秘书</span>
</div>
<div class="con3_inner_p">
今日话题|你多久没休假旅行了？
</div>
</div>
<span>精选</span>
</li>
</ul>
<ul class="con_3_ul">
<li>
<div class="con3_img">
<img src="images/index_con3_ul5_hand01.jpg" alt="">
</div>
<div class="con3_inner">
<div class="c3_inner_title">
<span class="con3_inr_hand">
<img src="images/index_con3_ul2_hand01_01.jpg" alt="">
</span>
<span class="con3_inr_title">穷游大秘书</span>
</div>
<div class="con3_inner_p">
今日话题|你多久没休假旅行了？
</div>
</div>
</li>
<li>
<div class="con3_img">
<img src="images/index_con3_ul5_hand02.jpg" alt="">
</div>
<div class="con3_inner">
<div class="c3_inner_title">
<span class="con3_inr_hand">
<img src="images/index_con3_ul2_hand01_02.jpg" alt="">
</span>
<span class="con3_inr_title">穷游大秘书</span>
</div>
<div class="con3_inner_p">
时光的调色板-考拉12日埃及环游记（开罗，阿斯旺，卢克索，胡尔哥达）
</div>
</div>
<span>精选</span>
</li>
<li>
<div class="con3_img">
<img src="images/index_con3_ul5_hand03.jpg" alt="">
</div>
<div class="con3_inner">
<div class="c3_inner_title">
<span class="con3_inr_hand">
<img src="images/index_con3_ul2_hand01_03.jpg" alt="">
</span>
<span class="con3_inr_title">穷游大秘书</span>
</div>
<div class="con3_inner_p">
今日话题|你多久没休假旅行了？
</div>
</div>
<span>精选</span>
</li>
<li>
<div class="con3_img">
<img src="images/index_con3_ul5_hand04.jpg" alt="">
</div>
<div class="con3_inner">
<div class="c3_inner_title">
<span class="con3_inr_hand">
<img src="images/index_con3_ul2_hand01_04.jpg" alt="">
</span>
<span class="con3_inr_title">穷游大秘书</span>
</div>
<div class="con3_inner_p">
今日话题|你多久没休假旅行了？
</div>
</div>
<span>精选</span>
</li>
<li>
<div class="con3_img">
<img src="images/index_con3_ul5_hand05.jpg" alt="">
</div>
<div class="con3_inner">
<div class="c3_inner_title">
<span class="con3_inr_hand">
<img src="images/index_con3_ul1_hand01_05.jpg" alt="">
</span>
<span class="con3_inr_title">穷游大秘书</span>
</div>
<div class="con3_inner_p">
今日话题|你多久没休假旅行了？
</div>
</div>
<span>精选</span>
</li>
<li>
<div class="con3_img">
<img src="images/index_con3_ul5_hand06.jpg" alt="">
</div>
<div class="con3_inner">
<div class="c3_inner_title">
<span class="con3_inr_hand">
<img src="images/index_con3_ul1_hand01_06.jpg" alt="">
</span>
<span class="con3_inr_title">穷游大秘书</span>
</div>
<div class="con3_inner_p">
今日话题|你多久没休假旅行了？
</div>
</div>
<span>精选</span>
</li>
<li>
<div class="con3_img">
<img src="images/index_con3_ul5_hand07.jpg" alt="">
</div>
<div class="con3_inner">
<div class="c3_inner_title">
<span class="con3_inr_hand">
<img src="images/index_con3_ul1_hand01_07.jpg" alt="">
</span>
<span class="con3_inr_title">穷游大秘书</span>
</div>
<div class="con3_inner_p">
今日话题|你多久没休假旅行了？
</div>
</div>
<span>精选</span>
</li>
<li>
<div class="con3_img">
<img src="images/index_con3_ul5_hand08.jpg" alt="">
</div>
<div class="con3_inner">
<div class="c3_inner_title">
<span class="con3_inr_hand">
<img src="images/index_con3_ul1_hand01_08.jpg" alt="">
</span>
<span class="con3_inr_title">穷游大秘书</span>
</div>
<div class="con3_inner_p">
今日话题|你多久没休假旅行了？
</div>
</div>
<span>精选</span>
</li>
</ul>
</div>
<div class="box_3_ctr">
<span class="current"></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="box_3_mr">
<a href="#">查看更多游记</a>
</div>
</div>
<div class="con_4">
<div class=" con4_main center">
<div class="con_m_left">
<p>免费体验，限时申领中</p>
<div class="l_left">
<div class="l_img">
<img alt="" src="images/index_con4_left01.jpg">
</div>
<div class="l_msg">
<p>租租车—环球旅行官招募</p>
<div>
<span>价值 ￥3000.00</span>
<span>免费体验名额 3 个</span>
<span>查看详情</span>
</div>
</div>
</div>
<div class="l_right">
<img alt="" src="images/index_con4_left02.png">
<div class="right1">
<div class="img"><img src="images/index_con4_left03.jpg" alt=""></div>
<div class="mgs">
<span>JNE蒲公英超轻折叠包</span>
<span>价值 ￥198.00</span>
<span>免费体验名额 5 个</span>
</div>
</div>
<div class="right2">
<span>近期参与</span>
<div class="right2_roll">
<ul>
<li><img src="images/index_right_roll01.jpg" alt=""> </li>
<li><img src="images/index_right_roll02.jpg" alt=""></li>
<li><img src="images/index_right_roll03.jpg" alt=""></li>
<li><img src="images/index_right_roll04.jpg" alt=""></li>
<li><img src="images/index_right_roll05.jpg" alt=""></li>
<li><img src="images/index_right_roll03.jpg" alt=""></li>
<li><img src="images/index_right_roll02.jpg" alt=""></li>
<li><img src="images/index_right_roll01.jpg" alt=""> </li>
<li><img src="images/index_right_roll03.jpg" alt=""></li>
<li><img src="images/index_right_roll01.jpg" alt=""> </li>
<li><img src="images/index_right_roll02.jpg" alt=""></li>
<li><img src="images/index_right_roll03.jpg" alt=""></li>
<li><img src="images/index_right_roll04.jpg" alt=""></li>
<li><img src="images/index_right_roll05.jpg" alt=""></li>
</ul>
</div>
</div>
</div>
</div>
<div class="con_m_right">
<p>特别策划</p>
<div class="wapper">
<ul class="title">
<li class="current">地球研习社</li>
<li>Q-story</li>
<li>去 也</li>
</ul>
<ul class="w_img">
<li class="current"><img src="images/index_wapper01.jpg" alt=""></li>
<li><img src="images/index_wapper02.jpg" alt=""></li>
<li><img src="images/index_wapper03.jpg" alt=""></li>
</ul>
</div>
<div class="more">查看更多</div>
</div>
</div>
</div>
<div class="con_5">
<div class="center con_5_box">
<div class="app">
<span>穷游APP</span>
<ul>
<li>
<img src="images/index_logo1.png" alt="">
<span>穷游app</span>
</li>
<li>
<img src="images/index_logo2.png" alt="">
<span>行程助手</span>
</li>
<li>
<img src="images/index_logo3.png" alt="">
<span>穷游锦囊</span>
</li>
</ul>
</div>
<div class="er_ma">
<span>微信号</span>
<ul>
<li>
<img src="images/index_ma1.png" alt="">
<span>穷游网</span>
</li>
<li>
<img src="images/index_ma2.png" alt="">
<span>穷游最世界</span>
</li>
<li>
<img src="images/index_ma3.png" alt="">
<span>穷游锦囊</span>
</li>
<li>
<img src="images/index_ma4.png" alt="">
<span>行程助手</span>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="footer_wapper1 center">
<ul>
<li>关于我们</li>
<li>穷游简介</li>
<li>联系我们</li>
<li>合作伙伴</li>
</ul>
<ul>
<li>加入穷游</li>
<li>招聘职位</li>
</ul>
<ul>
<li>网络条款</li>
<li>会员条款</li>
<li>社区指南</li>
<li>版权声明</li>
<li>免责声明</li>
</ul>
<ul>
<li>帮助中心</li>
<li>新手上路</li>
<li>使用帮助</li>
<li>网站地图</li>
<li>旅行工具</li>
</ul>
</div>
<div class="footer_wapper2">
<div class="center">
<div class="center_logo">
<img src="images/index_footer_logo1.png" alt="">
<p>2004-2018 © 穷游网® qyer.com All rights reserved. Version v5.57 京ICP备12003524号 京公网安备11010102001935 京ICP证140673号 营业执照 经营许可证
</p>
<p>穷游网为旅行者提供原创实用的出境游旅行指南和旅游攻略、旅行社区和问答交流平台，并提供签证、保险、机票、酒店预订、租车等服务。</p>
<div><img src="images/index_footer_logo2.png" alt="">
<img src="images/index_footer_logo3.jpg" alt=""></div>
</div>
<div class="center_link">
<span>友情链接</span>
<p>
<a href="#" target="_blank">交通查询</a>
<a href="#">租租车</a>
<a href="#" target="_blank">美术教育</a>
<a href="#" target="_blank">中国交通网</a>
<a href="#" target="_blank">长途汽车票</a>
<a href="#" target="_blank">旅游网</a>
<a href="#" target="_blank">首都航空</a>
<a href="#" target="_blank">在线教育</a>
<a href="#" target="_blank">金运之旅</a>
<a href="#" target="_blank">豌豆荚安卓市场</a>
<a href="#" target="_blank">凤凰网旅游</a>
<a href="#" target="_blank">凯撒旅游</a>
<a href="#" target="_blank">神州租车</a>
<a href="#" target="_blank">国际租车</a>
<a href="#" target="_blank">携程攻略社区</a>
<a href="#" target="_blank">蜂鸟网</a>
<a href="#" target="_blank">天巡国际机票</a>
<a href="#" target="_blank">游谱旅行网 </a>
<a href="#" target="_blank">中国签证资讯网</a>
<a href="#" target="_blank">梦之旅</a>
<a href="#" target="_blank">九游网</a>
<a href="#" target="_blank">北京国旅官网</a>
<a href="#" target="_blank">同程旅游</a>
<a href="#" target="_blank">相约久久旅游网</a>
<a href="#" target="_blank">途牛旅游网</a>
<a href="#" target="_blank">日租房</a>
<a href="#" target="_blank">遨游网</a>
<a href="#" target="_blank">携程旅游网</a>
<a href="#" target="_blank">春秋航空</a>
<a href="#" target="_blank">搜狗壁纸</a>
<a href="#" target="_blank">户外资料网</a>
<a href="#" target="_blank">爱旅行网</a>
<a href="#" target="_blank">途风网</a>
<a href="#" target="_blank">神舟国旅</a>
<a href="#" target="_blank">拉拉勾旅游网</a>
<a href="#" target="_blank">火车票</a>
<a href="#" target="_blank">劲旅网</a>
<a href="#" target="_blank">米胖旅游网</a>
<a href="#" target="_blank">五分旅游网</a>
<a href="#" target="_blank">绿野网</a>
<a href="#" target="_blank">天气预报15天查询</a>
<a href="#" target="_blank">走遍欧洲</a>
<a href="#" target="_blank">酒店预订</a>
<a href="#" target="_blank">欣欣旅游网</a>
<a href="#" target="_blank">驴妈妈旅游网</a>
<a href="#" target="_blank">多多驿站</a>
<a href="#" target="_blank">艺龙旅游指南</a>
</p>
</div>
</div>
</div>
</div>
<div class="tour_fixed">
<ul>
<li>
<img src="images/fix1.png" alt="">
<span>返回顶部</span>
</li>
<li>
<img src="images/fix2.png" alt="">
<span>扫码下载</span>
<div class="tour_app">
<p>下载穷游APP</p >
<img src="images/icon_app.png" alt="">
</div>
</li>
<li>
<img src="images/fix3.png" alt="">
<span>意见反馈</span>
</li>
</ul>
</div>
<script src='js/jquery-2.0.3.min.js'></script>
<script src='js/index.js'></script>
</body>
</html>2.登陆页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>注册</title>
<link rel="stylesheet" href="css/register.css">
</head>
<body>
<div class="box">
<input type="text" value="86">
<input type="text" value="输入用于登录的手机号码">
<input type="text" value="图片识别码">
<img src="images/login_look.JPG" alt="" width="124px" height="40px">
<input type="text" value="起一个具有辨识度的用户名">
<input type="text" value="输入8-16位密码，需包含字母及数字">
<button>注册</button>
<ol>
<li>已有穷游账号？</li>
<a href="login.html"><li style='color: #3f9f5f'>登录</li></a>
<li>同意<i>会员条款</i>和<i>免责声明</i></li>
</ol>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/register.js"></script>
</body>
</html>3.目的地源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>目的地</title>
<link rel="stylesheet" href="css/iconfont.css">
<link rel="stylesheet" href="css/destination_style.css">
<link rel="stylesheet" href="css/nav_style.css">
</head>
<body>
<div class="header">
<div class="h_left">
<a href="index.html">
<img src="images/s_logo.png" alt="">
</a>
</div>
<div class="h_center">
<ul class="nav">
<li>
<a href="depth.html">
<span>独家深度</span>
<span class="s_icon">
<i class="iconfont icon-xiala"></i>
</span>
</a>
<div class="h_menu">
<ul>
<li>特色长线</li>
<li>独家日游</li>
<li>Q-Home</li>
</ul>
</div>
</li>
<li>
<a href="destination.html">
<span style="color:#10b041">目的地</span>
</a>
</li>
<li>
<a href="community.html">
<span>社区</span>
<span class="s_icon">
<i class="iconfont icon-xiala"></i>
</span>
</a>
<div class="h_menu">
<ul>
<li>旅行论坛</li>
<li>JNE旅行生活美</li>
<li>结伴同行</li>
<li>负责任的旅行</li>
<li>特别策划</li>
<li>灵感短视频</li>
</ul>
</div>
</li>
<li>
<a href="questions.html">
<span>旅游问答</span>
</a>
</li>
<li>
<a href="air.html">
<span>机票</span>
</a>
</li>
<li>
<a href="hotel.html">
<span>酒店/民宿</span>
<span class="s_icon">
<i class="iconfont icon-xiala""></i>
</span>
</a>
<div class="h_menu">
<ul>
<li>酒店</li>
<li>爱彼迎</li>
<li>华人旅馆</li>
</ul>
</div>
</li>
<li>
<a href="app.html">
<span>穷游app</span>
<span class="s_icon">
<i class="iconfont icon-xiala"></i>
</span>
</a>
<div class="h_menu">
<ul>
<li>穷游App</li>
<li>行程助手App</li>
<li>穷游锦囊App</li>
</ul>
</div>
</li>
</ul>
</div>
<div class="h_right">
<a href="">
<i class="iconfont icon-qq"></i>
</a>
<a href="">
<i class="iconfont icon-weibo"></i>
</a>
<a href="">
<i class="iconfont icon-wechat"></i>
</a>
<a href="register.html" target="_blank">
<span>注册</span>
</a>
<a href="login.html" target="_blank">
<span>登录</span>
</a>
</div>
<div class="nav_search">
<input type="text">
<i class="iconfont icon-sousuo"></i>
<span>|</span>
</div>
</div>
<!-- *********nav******** -->
<div class="des_cover">
<h1>你好，世界！</h1>
<div class="des_input">
<input type="text" placeholder="搜索国家、城市、目的地">
<a>搜索</a>
</div>
</div>
<!-- *********cover******** -->
<div class="des_hot">
<p class="hot_p">热门城市介绍</p>
<ul class="hot_list hot_ul">
<li class="list_main">热门推荐</li>
<li>日韩 港澳台</li>
<li>东南亚及亚洲其他</li>
<li>欧洲</li>
<li>大洋洲 北美</li>
<li style="margin:0px">非洲 南美</li>
</ul>
<div class="hot_table">
<dl>
<dt>
全球Top 10 城市
</dt>
<dd>
<p>东京</p>
<p>曼谷</p>
<p>香港</p>
<p>台北</p>
<p>新加坡</p>
<p>巴黎</p>
<p>罗马</p>
<p>伦敦</p>
<p>首尔</p>
<p>洛杉矶</p>
</dd>
</dl>
<dl>
<dt>
免签及落地签最热旅行地
</dt>
<dd>
<p>济州岛</p>
<p>印度尼西亚</p>
<p>泰国</p>
<p>塞班岛</p>
<p>摩洛哥</p>
<p>卡塔尔</p>
<p>毛里求斯</p>
<p>柬埔寨</p>
<p>厄瓜多尔</p>
</dd>
</dl>
<dl>
<dt>
热门海岛
</dt>
<dd>
<p>塞班岛</p>
<p>长滩岛</p>
<p>马尔代夫</p>
<p>沙巴</p>
<p>普吉岛</p>
<p>巴厘岛</p>
<p>芽庄</p>
<p>帕劳</p>
<p>冲绳市</p>
</dd>
</dl>
</div>
<div class="hot_table">
<dl>
<dt>
港澳台
</dt>
<dd>
<p>香港</p>
<p>澳门</p>
<p>台北</p>
<p>垦丁</p>
<p>花莲</p>
<p>高雄市</p>
<p>台中市</p>
<p>九份</p>
<p>台南</p>
<p>淡水</p>
<p>宜兰</p>
</dd>
</dl>
<dl>
<dt>
日本
</dt>
<dd>
<p>东京</p>
<p>大阪</p>
<p>京都</p>
<p>冲绳</p>
<p>北海道</p>
<p>名古屋</p>
<p>奈良</p>
<p>札幌</p>
<p>富士山</p>
<p>箱根</p>
<p>镰仓</p>
<p>神户</p>
</dd>
</dl>
<dl>
<dt>
韩国
</dt>
<dd>
<p>首尔</p>
<p>济州岛</p>
<p>釜山</p>
</dd>
</dl>
</div>
<div class="hot_table">
<dl>
<dt>
泰国
</dt>
<dd>
<p>曼谷</p>
<p>普吉岛</p>
<p>清迈</p>
<p>苏梅岛</p>
<p>芭提雅</p>
<p>甲米</p>
<p>华欣</p>
<p>皮皮岛</p>
<p>泰国象岛</p>
<p>拜县</p>
</dd>
</dl>
<dl>
<dt>
新加坡
</dt>
<dd>
<p>新加坡</p>
</dd>
</dl>
<dl>
<dt>
越南
</dt>
<dd>
<p>芽庄</p>
<p>岘港</p>
<p>胡志明市</p>
<p>河内</p>
<p>美奈</p>
<p>大叻</p>
<p>富国岛</p>
<p>下龙湾</p>
</dd>
</dl>
<dl>
<dt>
马来西亚
</dt>
<dd>
<p>沙巴</p>
<p>吉隆坡</p>
<p>槟城</p>
<p>亚庇</p>
<p>兰卡威</p>
<p>马六甲</p>
<p>仙本那</p>
</dd>
</dl>
<dl>
<dt>
印度尼西亚
</dt>
<dd>
<p>巴厘岛</p>
<p>美娜多</p>
<p>乌布德</p>
</dd>
</dl>
<dl>
<dt>
菲律宾
</dt>
<dd>
<p>长滩岛</p>
<p>马尼拉</p>
<p>薄荷岛</p>
<p>杜马盖地</p>
<p>宿雾市</p>
</dd>
</dl>
<dl>
<dt>
斯里兰卡
</dt>
<dd>
<p>科伦坡</p>
<p>斯里兰卡康堤</p>
</dd>
</dl>
<dl>
<dt>
柬埔寨
</dt>
<dd>
<p>暹粒</p>
<p>金边亚</p>
</dd>
</dl>
<dl>
<dt>
亚洲其他
</dt>
<dd>
<p>迪拜</p>
<p>马尔代夫</p>
<p>阿布扎比</p>
<p>耶路撒冷</p>
<p>基什岛</p>
<p>加德满都</p>
<p>德里</p>
<p>仰光</p>
<p>多哈</p>
</dd>
</dl>
</div>
<div class="hot_table">
<dl>
<dt>
意大利
</dt>
<dd>
<p>罗马</p>
<p>佛罗伦萨</p>
<p>威尼斯</p>
<p>米兰</p>
<p>五渔村</p>
<p>那不勒斯</p>
<p>西西里岛</p>
<p>比萨</p>
<p>维罗纳</p>
<p>锡耶纳</p>
</dd>
</dl>
<dl>
<dt>
英国
</dt>
<dd>
<p>伦敦</p>
<p>爱丁堡</p>
<p>剑桥</p>
<p>牛津</p>
<p>英国湖区</p>
<p>曼彻斯特</p>
<p>巴斯</p>
<p>约克</p>
<p>苏格兰</p>
</dd>
</dl>
<dl>
<dt>
德国
</dt>
<dd>
<p>慕尼黑</p>
<p>法兰克福</p>
<p>柏林</p>
<p>科隆</p>
<p>海德堡</p>
<p>汉堡</p>
<p>斯图加特</p>
<p>杜塞尔多夫</p>
<p>纽伦堡</p>
<p>德累斯顿</p>
</dd>
</dl>
<dl>
<dt>
法国
</dt>
<dd>
<p>巴黎</p>
<p>尼斯</p>
<p>普罗旺斯</p>
<p>阿维尼翁</p>
<p>里昂</p>
<p>马赛</p>
<p>波尔多</p>
<p>斯特拉斯堡</p>
<p>戛纳</p>
</dd>
</dl>
<dl>
<dt>
西班牙
</dt>
<dd>
<p>巴塞罗那</p>
<p>马德里</p>
<p>塞维利亚</p>
<p>格拉纳达</p>
<p>瓦伦西亚</p>
<p>托莱多</p>
<p>西班牙龙达</p>
<p>马略卡岛</p>
</dd>
</dl>
<dl>
<dt>
瑞士
</dt>
<dd>
<p>苏黎世</p>
<p>卢塞恩</p>
<p>因特拉肯</p>
<p>日内瓦</p>
<p>伯尔尼</p>
<p>洛桑</p>
</dd>
</dl>
<dl>
<dt>
奥地利
</dt>
<dd>
<p>维也纳</p>
<p>萨尔茨堡</p>
<p>哈尔施塔特</p>
<p>因斯布鲁克</p>
</dd>
</dl>
<dl>
<dt>
俄罗斯
</dt>
<dd>
<p>莫斯科</p>
<p>贝加尔湖</p>
<p>圣彼得堡</p>
<p>伊尔库茨克</p>
<p>符拉迪沃斯托克(海参崴)</p>
</dd>
</dl>
<dl>
<dt>
捷克
</dt>
<dd>
<p>布拉格</p>
<p>捷克克鲁姆洛夫</p>
</dd>
</dl>
<dl>
<dt>
荷兰
</dt>
<dd>
<p>阿姆斯特丹</p>
<p>羊角村</p>
<p>鹿特丹</p>
<p>海牙</p>
</dd>
</dl>
<dl>
<dt>
希腊
</dt>
<dd>
<p>圣托里尼</p>
<p>雅典</p>
<p>克里特岛</p>
<p>米科诺斯岛</p>
</dd>
</dl>
</div>
<div class="hot_table">
<dl>
<dt>
澳大利亚
</dt>
<dd>
<p>墨尔本</p>
<p>悉尼</p>
<p>黄金海岸</p>
<p>布里斯班</p>
<p>凯恩斯</p>
<p>珀斯</p>
<p>塔斯马尼亚岛</p>
<p>阿德莱德</p>
<p>袋鼠岛</p>
</dd>
</dl>
<dl>
<dt>
新西兰
</dt>
<dd>
<p>奥克兰</p>
<p>皇后镇</p>
<p>基督城</p>
<p>新西兰南岛</p>
</dd>
</dl>
<dl>
<dt>
美国
</dt>
<dd>
<p>洛杉矶</p>
<p>纽约</p>
<p>塞班岛</p>
<p>旧金山</p>
<p>拉斯维加斯</p>
<p>圣迭戈</p>
<p>波士顿</p>
<p>华盛顿</p>
<p>黄石国家公园</p>
<p>夏威夷</p>
<p>西雅图</p>
<p>关岛</p>
</dd>
</dl>
<dl>
<dt>
加拿大
</dt>
<dd>
<p>温哥华</p>
<p>班夫国家公园</p>
<p>多伦多</p>
<p>蒙特利尔</p>
<p>加拿大尼亚加拉瀑布城</p>
</dd>
</dl>
<dl>
<dt>
其他
</dt>
<dd>
<p>帕劳</p>
<p>坎昆</p>
<p>墨西哥城</p>
<p>哈瓦那</p>
</dd>
</dl>
</div>
<div class="hot_table">
<dl>
<dt>
摩洛哥
</dt>
<dd>
<p>卡萨布兰卡</p>
<p>马拉喀什</p>
<p>菲斯</p>
<p>舍夫沙万</p>
</dd>
</dl>
<dl>
<dt>
埃及
</dt>
<dd>
<p>开罗</p>
<p>卢克索</p>
</dd>
</dl>
<dl>
<dt>
南非
</dt>
<dd>
<p>开普敦</p>
<p>约翰内斯堡</p>
</dd>
</dl>
<dl>
<dt>
肯尼亚
</dt>
<dd>
<p>内罗毕</p>
<p>马赛马拉国家保护区</p>
</dd>
</dl>
<dl>
<dt>
秘鲁
</dt>
<dd>
<p>马丘比丘</p>
<p>利马</p>
</dd>
</dl>
<dl>
<dt>
阿根廷
</dt>
<dd>
<p>布宜诺斯艾利斯</p>
<p>乌斯怀亚</p>
<p>埃尔卡拉法特</p>
</dd>
</dl>
<dl>
<dt>
毛里求斯
</dt>
<dd>
<p>毛里求斯</p>
</dd>
</dl>
<dl>
<dt>
智利
</dt>
<dd>
<p>圣地亚哥</p>
<p>复活节岛</p>
</dd>
</dl>
<dl>
<dt>
巴西
</dt>
<dd>
<p>里约热内卢</p>
<p>圣保罗</p>
<p>萨尔瓦多</p>
</dd>
</dl>
<dl>
<dt>
玻利维亚
</dt>
<dd>
<p>乌尤尼</p>
<p>拉巴斯</p>
</dd>
</dl>
<dl>
<dt>
厄瓜多尔
</dt>
<dd>
<p>加拉帕戈斯群岛</p>
<p>基多</p>
<p>瓜亚基尔</p>
</dd>
</dl>
</div>
<div class="hot_all">
<a href="">查看全部国家</a>
</div>
</div>
<!-- *********hot******** -->
<div class="des_theme">
<p class="hot_p">主题目的地</p>
<ul class="hot_list theme_list">
<li class="list_main">俯瞰城市</li>
<li>怀旧时光</li>
<li>魅力夜色</li>
<li>神秘遗址</li>
<li>跳蚤市场</li>
<li style="margin:0px">最爱小镇</li>
</ul>
<div class="free_destination free_1">
<div class="f_d_left con1_1">
<a href="" class="a_txt">
<p class="p_txt">
洛克菲勒观景台
</p>
<div class="con_txt">
这里是欣赏曼哈顿天际线的绝佳位置，观景台一共有三层，不仅可以将帝国大厦、新世贸中心大楼等摩天大楼尽收眼底，向北可鸟瞰中央公园，甚至可以看到自由女神像的绰约风姿。
</div>
</a>
</div>
<div class="f_d_rigth">
<div class="f_d_r_con con1_2">
<a href="" class="a_txt">
<p class="p_txt">
碎片大厦
</p>
<div class="con_txt">
天气晴朗的日子里，在碎片大厦观景台可以将伦敦市景一收眼底，伦敦眼、大本钟、泰晤士河……只描摹出城市轮廓的夕阳景色更是出众。
</div>
</a>
</div>
<div class="f_d_r_con con1_3">
<a href="" class="a_txt">
<p class="p_txt">
太平山
</p>
<div class="con_txt">
太平山是香港岛最高山峰，也是俯瞰香港的必到处，太平山顶可饱览维多利亚港全貌和薄扶林水塘的自然美景。
</div>
</a>
</div>
<div class="f_d_r_con con1_4">
<a href="" class="a_txt">
<p class="p_txt">
六本木新城
</p>
<div class="con_txt">
六本木Hills建成于2003年，54层楼的玻璃大厦内有200多家店铺，餐饮、购物、娱乐一应俱全，很多日本人将它当做六本木的代名词。
</div>
</a>
</div>
<div class="f_d_r_con con1_5">
<a href="" class="a_txt">
<p class="p_txt">
米开朗琪罗广场
</p>
<div class="con_txt">
米开朗基罗广场位于佛罗伦萨市区南端的高地上，广场雄据半山腰，坐视整个佛罗伦萨城及远处起伏不断的丘陵，气势非凡，风光无限。
</div>
</a>
</div>
<div class="f_d_r_con con1_6">
<a href="" class="a_txt">
<p class="p_txt">
象山
</p>
<div class="con_txt">
山不高，但前无屏障，台北盆地一览无遗，不仅是登高眺望的好据点，也是拍摄101高楼的绝佳地点。
</div>
</a>
</div>
<div class="f_d_r_con con1_7">
<a href="" class="a_txt">
<p class="p_txt">
蒙帕纳斯大楼
</p>
<div class="con_txt">
蒙帕纳斯大楼(又称蒙巴纳斯高楼)建于1972年，共59层，高209米，是巴黎市区除埃菲尔铁塔外最高的建筑，也是市区唯一的一座摩天大楼。
</div>
</a>
</div>
</div>
</div>
<div class="free_destination free_2">
<div class="f_d_left con1_1">
<a href="" class="a_txt">
<p class="p_txt">
洛克菲勒观景台
</p>
<div class="con_txt">
这里是欣赏曼哈顿天际线的绝佳位置，观景台一共有三层，不仅可以将帝国大厦、新世贸中心大楼等摩天大楼尽收眼底，向北可鸟瞰中央公园，甚至可以看到自由女神像的绰约风姿。
</div>
</a>
</div>
<div class="f_d_rigth">
<div class="f_d_r_con con1_2">
<a href="" class="a_txt">
<p class="p_txt">
碎片大厦
</p>
<div class="con_txt">
天气晴朗的日子里，在碎片大厦观景台可以将伦敦市景一收眼底，伦敦眼、大本钟、泰晤士河……只描摹出城市轮廓的夕阳景色更是出众。
</div>
</a>
</div>
<div class="f_d_r_con con1_3">
<a href="" class="a_txt">
<p class="p_txt">
太平山
</p>
<div class="con_txt">
太平山是香港岛最高山峰，也是俯瞰香港的必到处，太平山顶可饱览维多利亚港全貌和薄扶林水塘的自然美景。
</div>
</a>
</div>
<div class="f_d_r_con con1_4">
<a href="" class="a_txt">
<p class="p_txt">
六本木新城
</p>
<div class="con_txt">
六本木Hills建成于2003年，54层楼的玻璃大厦内有200多家店铺，餐饮、购物、娱乐一应俱全，很多日本人将它当做六本木的代名词。
</div>
</a>
</div>
<div class="f_d_r_con con1_5">
<a href="" class="a_txt">
<p class="p_txt">
米开朗琪罗广场
</p>
<div class="con_txt">
米开朗基罗广场位于佛罗伦萨市区南端的高地上，广场雄据半山腰，坐视整个佛罗伦萨城及远处起伏不断的丘陵，气势非凡，风光无限。
</div>
</a>
</div>
<div class="f_d_r_con con1_6">
<a href="" class="a_txt">
<p class="p_txt">
象山
</p>
<div class="con_txt">
山不高，但前无屏障，台北盆地一览无遗，不仅是登高眺望的好据点，也是拍摄101高楼的绝佳地点。
</div>
</a>
</div>
<div class="f_d_r_con con1_7">
<a href="" class="a_txt">
<p class="p_txt">
蒙帕纳斯大楼
</p>
<div class="con_txt">
蒙帕纳斯大楼(又称蒙巴纳斯高楼)建于1972年，共59层，高209米，是巴黎市区除埃菲尔铁塔外最高的建筑，也是市区唯一的一座摩天大楼。
</div>
</a>
</div>
</div>
</div>
<div class="free_destination free_3">
<div class="f_d_left con1_1">
<a href="" class="a_txt">
<p class="p_txt">
洛克菲勒观景台
</p>
<div class="con_txt">
这里是欣赏曼哈顿天际线的绝佳位置，观景台一共有三层，不仅可以将帝国大厦、新世贸中心大楼等摩天大楼尽收眼底，向北可鸟瞰中央公园，甚至可以看到自由女神像的绰约风姿。
</div>
</a>
</div>
<div class="f_d_rigth">
<div class="f_d_r_con con1_2">
<a href="" class="a_txt">
<p class="p_txt">
碎片大厦
</p>
<div class="con_txt">
天气晴朗的日子里，在碎片大厦观景台可以将伦敦市景一收眼底，伦敦眼、大本钟、泰晤士河……只描摹出城市轮廓的夕阳景色更是出众。
</div>
</a>
</div>
<div class="f_d_r_con con1_3">
<a href="" class="a_txt">
<p class="p_txt">
太平山
</p>
<div class="con_txt">
太平山是香港岛最高山峰，也是俯瞰香港的必到处，太平山顶可饱览维多利亚港全貌和薄扶林水塘的自然美景。
</div>
</a>
</div>
<div class="f_d_r_con con1_4">
<a href="" class="a_txt">
<p class="p_txt">
六本木新城
</p>
<div class="con_txt">
六本木Hills建成于2003年，54层楼的玻璃大厦内有200多家店铺，餐饮、购物、娱乐一应俱全，很多日本人将它当做六本木的代名词。
</div>
</a>
</div>
<div class="f_d_r_con con1_5">
<a href="" class="a_txt">
<p class="p_txt">
米开朗琪罗广场
</p>
<div class="con_txt">
米开朗基罗广场位于佛罗伦萨市区南端的高地上，广场雄据半山腰，坐视整个佛罗伦萨城及远处起伏不断的丘陵，气势非凡，风光无限。
</div>
</a>
</div>
<div class="f_d_r_con con1_6">
<a href="" class="a_txt">
<p class="p_txt">
象山
</p>
<div class="con_txt">
山不高，但前无屏障，台北盆地一览无遗，不仅是登高眺望的好据点，也是拍摄101高楼的绝佳地点。
</div>
</a>
</div>
<div class="f_d_r_con con1_7">
<a href="" class="a_txt">
<p class="p_txt">
蒙帕纳斯大楼
</p>
<div class="con_txt">
蒙帕纳斯大楼(又称蒙巴纳斯高楼)建于1972年，共59层，高209米，是巴黎市区除埃菲尔铁塔外最高的建筑，也是市区唯一的一座摩天大楼。
</div>
</a>
</div>
</div>
</div>
<div class="free_destination free_4">
<div class="f_d_left con1_1">
<a href="" class="a_txt">
<p class="p_txt">
洛克菲勒观景台
</p>
<div class="con_txt">
这里是欣赏曼哈顿天际线的绝佳位置，观景台一共有三层，不仅可以将帝国大厦、新世贸中心大楼等摩天大楼尽收眼底，向北可鸟瞰中央公园，甚至可以看到自由女神像的绰约风姿。
</div>
</a>
</div>
<div class="f_d_rigth">
<div class="f_d_r_con con1_2">
<a href="" class="a_txt">
<p class="p_txt">
碎片大厦
</p>
<div class="con_txt">
天气晴朗的日子里，在碎片大厦观景台可以将伦敦市景一收眼底，伦敦眼、大本钟、泰晤士河……只描摹出城市轮廓的夕阳景色更是出众。
</div>
</a>
</div>
<div class="f_d_r_con con1_3">
<a href="" class="a_txt">
<p class="p_txt">
太平山
</p>
<div class="con_txt">
太平山是香港岛最高山峰，也是俯瞰香港的必到处，太平山顶可饱览维多利亚港全貌和薄扶林水塘的自然美景。
</div>
</a>
</div>
<div class="f_d_r_con con1_4">
<a href="" class="a_txt">
<p class="p_txt">
六本木新城
</p>
<div class="con_txt">
六本木Hills建成于2003年，54层楼的玻璃大厦内有200多家店铺，餐饮、购物、娱乐一应俱全，很多日本人将它当做六本木的代名词。
</div>
</a>
</div>
<div class="f_d_r_con con1_5">
<a href="" class="a_txt">
<p class="p_txt">
米开朗琪罗广场
</p>
<div class="con_txt">
米开朗基罗广场位于佛罗伦萨市区南端的高地上，广场雄据半山腰，坐视整个佛罗伦萨城及远处起伏不断的丘陵，气势非凡，风光无限。
</div>
</a>
</div>
<div class="f_d_r_con con1_6">
<a href="" class="a_txt">
<p class="p_txt">
象山
</p>
<div class="con_txt">
山不高，但前无屏障，台北盆地一览无遗，不仅是登高眺望的好据点，也是拍摄101高楼的绝佳地点。
</div>
</a>
</div>
<div class="f_d_r_con con1_7">
<a href="" class="a_txt">
<p class="p_txt">
蒙帕纳斯大楼
</p>
<div class="con_txt">
蒙帕纳斯大楼(又称蒙巴纳斯高楼)建于1972年，共59层，高209米，是巴黎市区除埃菲尔铁塔外最高的建筑，也是市区唯一的一座摩天大楼。
</div>
</a>
</div>
</div>
</div>
<div class="free_destination free_5">
<div class="f_d_left con1_1">
<a href="" class="a_txt">
<p class="p_txt">
洛克菲勒观景台
</p>
<div class="con_txt">
这里是欣赏曼哈顿天际线的绝佳位置，观景台一共有三层，不仅可以将帝国大厦、新世贸中心大楼等摩天大楼尽收眼底，向北可鸟瞰中央公园，甚至可以看到自由女神像的绰约风姿。
</div>
</a>
</div>
<div class="f_d_rigth">
<div class="f_d_r_con con1_2">
<a href="" class="a_txt">
<p class="p_txt">
碎片大厦
</p>
<div class="con_txt">
天气晴朗的日子里，在碎片大厦观景台可以将伦敦市景一收眼底，伦敦眼、大本钟、泰晤士河……只描摹出城市轮廓的夕阳景色更是出众。
</div>
</a>
</div>
<div class="f_d_r_con con1_3">
<a href="" class="a_txt">
<p class="p_txt">
太平山
</p>
<div class="con_txt">
太平山是香港岛最高山峰，也是俯瞰香港的必到处，太平山顶可饱览维多利亚港全貌和薄扶林水塘的自然美景。
</div>
</a>
</div>
<div class="f_d_r_con con1_4">
<a href="" class="a_txt">
<p class="p_txt">
六本木新城
</p>
<div class="con_txt">
六本木Hills建成于2003年，54层楼的玻璃大厦内有200多家店铺，餐饮、购物、娱乐一应俱全，很多日本人将它当做六本木的代名词。
</div>
</a>
</div>
<div class="f_d_r_con con1_5">
<a href="" class="a_txt">
<p class="p_txt">
米开朗琪罗广场
</p>
<div class="con_txt">
米开朗基罗广场位于佛罗伦萨市区南端的高地上，广场雄据半山腰，坐视整个佛罗伦萨城及远处起伏不断的丘陵，气势非凡，风光无限。
</div>
</a>
</div>
<div class="f_d_r_con con1_6">
<a href="" class="a_txt">
<p class="p_txt">
象山
</p>
<div class="con_txt">
山不高，但前无屏障，台北盆地一览无遗，不仅是登高眺望的好据点，也是拍摄101高楼的绝佳地点。
</div>
</a>
</div>
<div class="f_d_r_con con1_7">
<a href="" class="a_txt">
<p class="p_txt">
蒙帕纳斯大楼
</p>
<div class="con_txt">
蒙帕纳斯大楼(又称蒙巴纳斯高楼)建于1972年，共59层，高209米，是巴黎市区除埃菲尔铁塔外最高的建筑，也是市区唯一的一座摩天大楼。
</div>
</a>
</div>
</div>
</div>
<div class="free_destination free_6">
<div class="f_d_left con1_1">
<a href="" class="a_txt">
<p class="p_txt">
洛克菲勒观景台
</p>
<div class="con_txt">
这里是欣赏曼哈顿天际线的绝佳位置，观景台一共有三层，不仅可以将帝国大厦、新世贸中心大楼等摩天大楼尽收眼底，向北可鸟瞰中央公园，甚至可以看到自由女神像的绰约风姿。
</div>
</a>
</div>
<div class="f_d_rigth">
<div class="f_d_r_con con1_2">
<a href="" class="a_txt">
<p class="p_txt">
碎片大厦
</p>
<div class="con_txt">
天气晴朗的日子里，在碎片大厦观景台可以将伦敦市景一收眼底，伦敦眼、大本钟、泰晤士河……只描摹出城市轮廓的夕阳景色更是出众。
</div>
</a>
</div>
<div class="f_d_r_con con1_3">
<a href="" class="a_txt">
<p class="p_txt">
太平山
</p>
<div class="con_txt">
太平山是香港岛最高山峰，也是俯瞰香港的必到处，太平山顶可饱览维多利亚港全貌和薄扶林水塘的自然美景。
</div>
</a>
</div>
<div class="f_d_r_con con1_4">
<a href="" class="a_txt">
<p class="p_txt">
六本木新城
</p>
<div class="con_txt">
六本木Hills建成于2003年，54层楼的玻璃大厦内有200多家店铺，餐饮、购物、娱乐一应俱全，很多日本人将它当做六本木的代名词。
</div>
</a>
</div>
<div class="f_d_r_con con1_5">
<a href="" class="a_txt">
<p class="p_txt">
米开朗琪罗广场
</p>
<div class="con_txt">
米开朗基罗广场位于佛罗伦萨市区南端的高地上，广场雄据半山腰，坐视整个佛罗伦萨城及远处起伏不断的丘陵，气势非凡，风光无限。
</div>
</a>
</div>
<div class="f_d_r_con con1_6">
<a href="" class="a_txt">
<p class="p_txt">
象山
</p>
<div class="con_txt">
山不高，但前无屏障，台北盆地一览无遗，不仅是登高眺望的好据点，也是拍摄101高楼的绝佳地点。
</div>
</a>
</div>
<div class="f_d_r_con con1_7">
<a href="" class="a_txt">
<p class="p_txt">
蒙帕纳斯大楼
</p>
<div class="con_txt">
蒙帕纳斯大楼(又称蒙巴纳斯高楼)建于1972年，共59层，高209米，是巴黎市区除埃菲尔铁塔外最高的建筑，也是市区唯一的一座摩天大楼。
</div>
</a>
</div>
</div>
</div>
</div>
<!-- ********theme******* -->
<div class="des_monthly">
<p class="hot_p">月度推荐</p>
<ul class="month_ul">
<li>
<span class="monthly_main">1月</span>
</li>
<li>
<span>2月</span>
</li>
<li>
<span>3月</span>
</li>
<li>
<span>4月</span>
</li>
<li>
<span>5月</span>
</li>
<li>
<span>6月</span>
</li>
<li>
<span>7月</span>
</li>
<li>
<span>8月</span>
</li>
<li>
<span>9月</span>
</li>
<li>
<span>10月</span>
</li>
<li>
<span>11月</span>
</li>
<li>
<span>12月</span>
</li>
</ul>
<ul class="month_img_ul">
<li>
<img src="images/monthly01.jpg" alt="">
<div class="month_img_txt">
<h4>
俄罗斯·圣彼得堡
</h4>
<p>
6月的俄罗斯清凉宜人，十分适合避暑度假。特别是圣彼得堡——这个世界上少数有“白夜”的城市，会在每年6月21日迎来盛大的节日——白昼节。
</p>
</div>
</li>
<li>
<img src="images/monthly02.jpg" alt="">
<div class="month_img_txt">
<h4>
澳大利亚·塔斯马尼亚
</h4>
<p>
正在发愁夏天看不到极光？不要怕，没有北极光，还可以有南极光。塔斯马尼亚岛，是澳洲最接近南极圈的地方，也是观赏南极光的最佳位置。现在出发，还能拥有极夜的独特体验。
</p>
</div>
</li>
<li>
<img src="images/monthly03.jpg" alt="">
<div class="month_img_txt">
<h4>
坦桑尼亚
</h4>
<p>
6月-9月的非洲，由于旱季的到来，数以百万计的野生动物将会上演地球上最壮观的大迁徙场面——从坦桑尼亚的塞伦盖蒂保护区前往肯尼亚的马赛马拉国家公园。
</p>
</div>
</li>
<li>
<img src="images/monthly04.jpg" alt="">
<div class="month_img_txt">
<h4>
巴厘岛
</h4>
<p>
6月的巴厘岛，迎来了一年当中最舒适的凉季——天气干爽，气候宜人。几乎不会下雨，夜晚清凉舒适。无论是阿勇河上的漂流、金巴兰海滩上完美的落日、还是圣泉寺里信徒虔诚的洗礼，都是一次最净化心灵的旅行。
</p>
</div>
</li>
<li>
<img src="images/monthly05.jpg" alt="">
<div class="month_img_txt">
<h4>
阿根廷
</h4>
<p>
每年六月阿根廷开始进入滑雪季，大部分滑雪胜地都全面开放，想要避暑滑雪，就不要错过六月的阿根廷啦。更何况，前些日子，阿根廷刚对中国开放了十年往返签证，是时候去世界的尽头看看了。
</p>
</div>
</li>
</ul>
</div>
<!-- ********monthly******** -->
<div class="des_country">
<p class="hot_p">国家列表</p>
<ul class="hot_list country_list">
<li class="list_main">亚洲</li>
<li>欧洲</li>
<li>非洲</li>
<li>北美</li>
<li>南美</li>
<li>大洋洲</li>
<li style="margin:0px">南极洲</li>
</ul>
<div class="tip">
拼音首字母顺序
</div>
<ul class="des_center">
<li>
<span class="item">
<span>
阿富汗
</span>
<em>
Afghanistan
</em>
</span>
</li>
<li>
<span class="item">
<span>
阿富汗
</span>
<em>
Afghanistan
</em>
</span>
</li>
<li>
<span class="item">
<span>
阿富汗
</span>
<em>
Afghanistan
</em>
</span>
</li>
<li>
<span class="item">
<span>
阿富汗
</span>
<em>
Afghanistan
</em>
</span>
</li>
<li>
<span class="item">
<span>
阿富汗
</span>
<em>
Afghanistan
</em>
</span>
</li>
<li>
<span class="item">
<span>
阿富汗
</span>
<em>
Afghanistan
</em>
</span>
</li>
<li>
<span class="item">
<span>
阿富汗
</span>
<em>
Afghanistan
</em>
</span>
</li>
<li>
<span class="item">
<span>
阿富汗
</span>
<em>
Afghanistan
</em>
</span>
</li>
<li>
<span class="item">
<span>
阿富汗
</span>
<em>
Afghanistan
</em>
</span>
</li>
<li>
<span class="item">
<span>
阿富汗
</span>
<em>
Afghanistan
</em>
</span>
</li>
<li>
<span class="item">
<span>
阿富汗
</span>
<em>
Afghanistan
</em>
</span>
</li>
<li>
<span class="item">
<span>
阿富汗
</span>
<em>
Afghanistan
</em>
</span>
</li>
<li>
<span class="item">
<span>
阿富汗
</span>
<em>
Afghanistan
</em>
</span>
</li>
<li>
<span class="item">
<span>
阿富汗
</span>
<em>
Afghanistan
</em>
</span>
</li>
<li>
<span class="item">
<span>
阿富汗
</span>
<em>
Afghanistan
</em>
</span>
</li>
<li>
<span class="item">
<span>
阿富汗
</span>
<em>
Afghanistan
</em>
</span>
</li>
<li>
<span class="item">
<span>
阿富汗
</span>
<em>
Afghanistan
</em>
</span>
</li>
<li>
<span class="item">
<span>
阿富汗
</span>
<em>
Afghanistan
</em>
</span>
</li>
<li>
<span class="item">
<span>
阿富汗
</span>
<em>
Afghanistan
</em>
</span>
</li>
<li>
<span class="item">
<span>
阿富汗
</span>
<em>
Afghanistan
</em>
</span>
</li>
<li>
<span class="item">
<span>
阿富汗
</span>
<em>
Afghanistan
</em>
</span>
</li>
<li>
<span class="item">
<span>
阿富汗
</span>
<em>
Afghanistan
</em>
</span>
</li>
<li>
<span class="item">
<span>
阿富汗
</span>
<em>
Afghanistan
</em>
</span>
</li>
<li>
<span class="item">
<span>
阿富汗
</span>
<em>
Afghanistan
</em>
</span>
</li>
<li>
<span class="item">
<span>
阿富汗
</span>
<em>
Afghanistan
</em>
</span>
</li>
<li>
<span class="item">
<span>
阿富汗
</span>
<em>
Afghanistan
</em>
</span>
</li>
</ul>
</div>
<div class="tour_fixed">
<ul>
<li>
<!-- <img src="images/fix1.png" alt=""> -->
<i class="iconfont icon-xiangshang"></i>
<span>返回顶部</span>
</li>
<li>
<!-- <img src="images/fix2.png" alt=""> -->
<i class="iconfont icon-saoma"></i>
<span>扫码下载</span>
<div class="tour_app">
<p>下载穷游APP</p>
<img src="images/icon_app.png" alt="">
</div>
</li>
<li>
<!-- <img src="images/fix3.png" alt=""> -->
<i class="iconfont icon-yijianfankui"></i>
<span>意见反馈</span>
</li>
</ul>
</div>
<div class="footer">
<ul>
<li>穷游简历</li>
<li>合作伙伴</li>
<li>加入我们</li>
<li>新手上路</li>
<li>使用帮助</li>
<li>网站地图</li>
<li>会员条款</li>
<li>社区指南</li>
<li>版权声明</li>
<li>负责声明</li>
<li>联系我们</li>
</ul>
<p>2004-2018 穷游网 qyer.com All rights reserved. Version v5.57 京ICP备12003524号 京公网安备11010102001935号 京ICP证140673号 营业执照 经营许可证</p >
</div>
<script src="js/jquery.min.js"></script>
<script src="js/destination_jq.js"></script>
</body>
</html>4.css代码
/*
* @Author: admin
* @Date: 2018-06-19 14:27:22
* @Last Modified by: Mo
* @Last Modified time: 2018-09-07 17:18:11
*/
*{
margin: 0px;
padding: 0px;
list-style: none;
font-family: 微软雅黑;
}
a{
text-decoration: none;
}
.header{
height: 30px;
width: 100%;
background: #323232;
overflow: hidden;
min-width: 1000px;
}
.h_left{
margin-top: 6px;
margin-left: 30px;
float: left;
}
.h_left a img{
width: 58px;
height: 18px;
}
.h_center{
/* background: blue; */
width: 600px;
height: 30px;
float: left;
}
.nav{
width: 600px;
height: 30px;
margin-left: 18px;
}
.nav a{
overflow: hidden;
}
.nav>li{
float: left;
line-height: 30px;
font-size: 14px;
padding: 0 13px;
margin-right: 10px;
}
.nav li a span{
color: silver;
font-weight: 900;
float: left;
}
.nav .icon-xiala{
font-size: 12px;
margin-left: 4px;
}
.span_color{
color: silver;
}
.h_menu{
display: none;
background: #fff;
padding: 10px 0px;
position: absolute;
top: 30px;
z-index: 200;
border-radius: 4px;
border: 1px solid #999;
}
.h_menu ul li{
margin: 2px 0;
padding: 0 20px;
height: 30px;
line-height: 30px;
font-size: 16px;
color: #636363;
}
.h_right{
width: 150px;
height: 30px;
float: right;
line-height: 30px;
margin-left: 13px;
margin-right: 25px;
}
.h_right a{
color: silver;
font-weight: 900;
font-size: 14px;
margin-left: 5px;
}
.nav_search{
float: right;
/* background: pink; */
position: relative;
margin-right: 10px;
}
.nav_search input{
width: 0px;
height: 22px;
margin-top: 4px;
border-radius: 4px;
border: 0px;
/* display: none; */
position: absolute;
right: 10px;
/* top: 0; */
outline: none;
}
.nav_search .icon-sousuo{
position: absolute;
right: 15px;
top: 8px;
color: silver;
font-weight: 600;
}
.nav_search span{
color: silver;
display: block;
margin-top: 7px;
font-size: 12px;
font-weight: bold;
}
/* -----------nav------------- */
.des_cover{
height: 500px;
width: 100%;
background: url('../images/destination_cover.jpg') no-repeat;
background-size: cover;
background-position: top;
position: relative;
overflow: hidden;
}
h1{
font-size: 56px;
color: #fff;
font-weight: 700;
text-shadow: 0 5px 5px rgba(0,0,0,.1);
text-align: center;
margin-top: 162px;
}
.des_input{
width: 765px;
margin: auto;
margin-top: 30px;
}
.des_input input{
height: 20px;
width: 620px;
padding: 20px 0;
display: block;
border: none;
font-size: 18px;
text-indent: 31px;
background-color: #fff;
border-radius: 4px 0px 0px 4px;
float: left;
}
.des_input a{
display: block;
width: 138px;
height: 58px;
line-height: 58px;
text-align: center;
font-size: 18px;
font-weight: 700;
color: #fff;
background: #28b76c;
border: 1px solid #27ad66;
text-decoration: none;
border-radius: 0px 4px 4px 0px;
padding-left: 5px;
float: left;
}
/* ------------cover--------------- */
.des_hot{
width: 1000px;
margin: auto;
}
.hot_p{
font-size: 24px;
text-align: center;
margin: 50px auto;
}
.hot_list{
width: 800px;
height: 31px;
margin: auto;
border-bottom: 1px solid #e5e5e5;
}
.hot_list li{
font-size: 18px;
margin-right: 50px;
float: left;
height: 30px;
line-height: 20px;
color: #929292;
cursor: pointer;
}
.hot_list .list_main{
color: #000;
border-bottom: 2px solid #28b76c;
}
.hot_table{
overflow: hidden;
display: none;
}
.hot_table:nth-of-type(1){
display: block;
}
dl{
padding-right: 20px;
width: 306px;
float: left;
min-height: 125px;
}
.hot_table:nth-of-type(6) dl{
min-height: 0px;
}
dt{
font-size: 16px;
height: 20px;
line-height: 20px;
margin-bottom: 12px;
font-weight: 500;
margin-top: 40px;
}
dd{
font-size: 15px;
overflow: hidden;
line-height: 26px;
}
dd p{
display: inline-block;
padding-right: 10px;
}
.hot_all{
width: 212px;
margin: auto;
margin-top: 40px;
}
.hot_all a{
width: 211px;
height: 50px;
line-height: 50px;
border: 1px solid #2fba71;
display: inline-block;
text-align: center;
background-color: #fff;
color: #28b76c;
font-size: 18px;
border-radius: 3px;
text-decoration: none;
}
.hot_all a:hover{
border: 1px solid #2fba71;
background-color: #2fba71;
color: #fff;
}
/* -----------hot-------------- */
.des_theme{
width: 1000px;
margin: auto;
padding-top: 20px;
overflow: hidden;
}
.free_destination{
width: 992px;
height: 400px;
margin: 50px auto;
display: none;
}
.free_destination:nth-of-type(1){
display: block;
}
.f_d_left{
width: 236px;
height: 400px;
margin-right: 12px;
float: left;
overflow: hidden;
}
.free_1 .con1_1{
background: url('../images/free_1.jpg');
background-size: cover;
}
.a_txt{
width: 236px;
height: 400px;
position: relative;
top: 100%;
margin-top: -58px;
display: block;
transition: all 0.5s;
}
.p_txt{
font-size: 16px;
color: #fff;
height: 18px;
line-height: 18px;
text-align: left;
padding: 20px 0px;
margin: 0px 12px;
border-bottom: 1px solid #fff;
}
.con_txt{
color: #fff;
text-align: left;
padding: 20px 0px;
margin: 0px 12px;
font-size: 12px;
}
.f_d_rigth{
width: 744px;
height: 400px;
float: left;
}
.f_d_r_con{
width: 236px;
height: 194px;
float: left;
margin-right: 12px;
margin-bottom: 12px;
overflow: hidden;
}
.free_1 .con1_2{
background: url('../images/free_2.png');
background-size: cover;
}
.free_1 .con1_3{
background: url('../images/free_3.jpg');
background-size: cover;
}
.free_1 .con1_4{
background: url('../images/free_4.png');
background-size: cover;
}
.free_1 .con1_5{
background: url('../images/free_5.jpg');
background-size: cover;
}
.free_1 .con1_6{
background: url('../images/free_6.png');
background-size: cover;
}
.free_1 .con1_7{
background: url('../images/free_7.jpg');
background-size: cover;
}
.free_2 .con1_1{
background: url('../images/free_2-1.jpg');
background-size: cover;
}
.free_2 .con1_2{
background: url('../images/free_2-2.jpg');
background-size: cover;
}
.free_2 .con1_3{
background: url('../images/free_2-3.jpg');
background-size: cover;
}
.free_2 .con1_4{
background: url('../images/free_2-4.jpg');
background-size: cover;
}
.free_2 .con1_5{
background: url('../images/free_2-5.jpg');
background-size: cover;
}
.free_2 .con1_6{
background: url('../images/free_2-6.jpg');
background-size: cover;
}
.free_2 .con1_7{
background: url('../images/free_2-7.jpg');
background-size: cover;
}
.free_3 .con1_1{
background: url('../images/free_3-1.jpg');
background-size: cover;
}
.free_3 .con1_2{
background: url('../images/free_3-2.jpg');
background-size: cover;
}
.free_3 .con1_3{
background: url('../images/free_3-3.jpg');
background-size: cover;
}
.free_3 .con1_4{
background: url('../images/free_3-4.jpg');
background-size: cover;
}
.free_3 .con1_5{
background: url('../images/free_3-5.jpg');
background-size: cover;
}
.free_3 .con1_6{
background: url('../images/free_3-6.jpg');
background-size: cover;
}
.free_3 .con1_7{
background: url('../images/free_3-7.jpg');
background-size: cover;
}
.free_4 .con1_1{
background: url('../images/free_4-1.jpg');
background-size: cover;
}
.free_4 .con1_2{
background: url('../images/free_4-2.jpg');
background-size: cover;
}
.free_4 .con1_3{
background: url('../images/free_4-3.jpg');
background-size: cover;
}
.free_4 .con1_4{
background: url('../images/free_4-4.jpg');
background-size: cover;
}
.free_4 .con1_5{
background: url('../images/free_4-5.jpg');
background-size: cover;
}
.free_4 .con1_6{
background: url('../images/free_4-6.jpg');
background-size: cover;
}
.free_4 .con1_7{
background: url('../images/free_4-7.jpg');
background-size: cover;
}
.free_5 .con1_1{
background: url('../images/free_5-1.jpg');
background-size: cover;
}
.free_5 .con1_2{
background: url('../images/free_5-2.png');
background-size: cover;
}
.free_5 .con1_3{
background: url('../images/free_5-3.jpg');
background-size: cover;
}
.free_5 .con1_4{
background: url('../images/free_5-4.jpg');
background-size: cover;
}
.free_5 .con1_5{
background: url('../images/free_5-5.jpg');
background-size: cover;
}
.free_5 .con1_6{
background: url('../images/free_5-6.jpg');
background-size: cover;
}
.free_5 .con1_7{
background: url('../images/free_5-7.jpg');
background-size: cover;
}
.free_6 .con1_1{
background: url('../images/free_6-1.jpg');
background-size: cover;
}
.free_6 .con1_2{
background: url('../images/free_6-2.jpg');
background-size: cover;
}
.free_6 .con1_3{
background: url('../images/free_6-3.jpg');
background-size: cover;
}
.free_6 .con1_4{
background: url('../images/free_6-4.png');
background-size: cover;
}
.free_6 .con1_5{
background: url('../images/free_6-5.jpg');
background-size: cover;
}
.free_6 .con1_6{
background: url('../images/free_6-6.jpg');
background-size: cover;
}
.free_6 .con1_7{
background: url('../images/free_6-7.jpg');
background-size: cover;
}
/* ------------theme------------------------ */
.des_monthly{
width: 1000px;
margin: auto;
padding-top: 20px;
overflow: hidden;
/* background: pink; */
}
.month_ul{
height: 50px;
overflow: hidden;
line-height: 50px;
width: 953px;
margin: auto;
}
.month_ul li{
display: inline-block;
height: 50px;
line-height: 52px;
overflow: hidden;
padding-right: 25px;
text-align: center;
}
.month_ul li span{
height: 50px;
overflow: hidden;
display: inline-block;
width: 50px;
font-size: 18px;
color: #929292;
}
.month_ul .monthly_main{
color: #fff;
border-radius: 50%;
background-color: #21bf6a;
}
.month_img_ul{
margin-top: 20px;
}
.month_img_ul li{
/* overflow: hidden; */
width: 190px;
height: 300px;
position: relative;
float: left;
margin-right: 8px;
position: relative;
}
.month_img_ul img{
width: 190px;
height: 300px;
}
.month_img_txt{
width: 190px;
height: 300px;
position: absolute;
top: 245px;
left: 0px;
transition: all 0.5s;
}
h4{
font-size: 16px;
height: 18px;
line-height: 18px;
margin-top: 22px;
padding-bottom: 5px;
color: #fff;
font-weight: 500;
margin-left: 10px;
}
.month_img_txt>p{
font-size: 12px;
line-height: 1.5;
color: #fff;
padding-top: 10px;
margin-left: 12px;
margin-right: 15px;
text-align: left;
}
/* -------monthly------------ */
.des_country{
width: 1000px;
margin: auto;
padding-top: 20px;
overflow: hidden;
margin-bottom: 200px;
}
.country_list{
width: 590px;
}
.tip{
padding-bottom: 20px;
color: #959595;
font-size: 12px;
margin-top: 30px;
}
.des_center li{
float: left;
width: 33.33%;
height: 30px;
}
.item{
line-height: 16px;
margin-bottom: 14px;
}
.item span{
color: #000;
font-size: 14px;
margin-right: 3px;
}
.item em{
color: #959595;
font-weight: 100;
font-style: normal;
}
/* -------country-------- */
.tour_fixed{
width: 55px;
box-sizing: border-box;
position: fixed;
bottom: 120px;
right: 40px;
background: #fff;
z-index: 1000;
box-shadow: rgba(0,0,0,0.1) 0px 0px 4px;
display: none;
}
.tour_fixed li{
width: 55px;
height: 55px;
box-sizing: border-box;
border: solid 1px #e2e2e2;
color: #b2b2b2;
text-align: center;
position: relative;
margin-top: -1px;
cursor: pointer;
}
.tour_fixed img{
margin-top: 5px;
height: 30px;
}
.tour_fixed ul li>span{
font-size: 12px;
position: absolute;
bottom: 1px;
left: 0;
width: 100%;
}
.tour_fixed .iconfont{
font-size: 20px;
display: block;
margin-top: 6px;
}
.tour_fixed .icon-yijianfankui{
font-size: 30px;
}
.tour_shake{
animation:shake 0.4s;
}
@keyframes shake{
0%{
transform: rotate(0deg)
}
25%{
transform: rotate(-20deg)
}
50%{
transform: rotate(20deg)
}
75%{
transform: rotate(-20deg)
}
100%{
transform: rotate(0deg)
}
}
.tour_app{
display: none;
padding: 14px;
text-align: center;
position: absolute;
left: -160px;
top: -126px;
border: 1px solid rgb(221,221,221);
background: #fff;
box-shadow: rgba(0,0,0,0.1) 0px 0px 4px;
}
.tour_app p{
font-size: 14px;
color: #323232;
}
.tour_app img{
width: 120px;
height: 120px;
margin-top: 9px;
}
/* ----------fixed------------- */
.footer{
width: 100%;
height: 120px;
margin-top: 10px;
background: #323232;
min-width: 1000px;
border-top: 3px solid #25a851;
padding-top: 25px;
box-sizing: border-box;
text-align: center;
}
.footer ul{
height: 40px;
width: 950px;
margin: 5px auto;
}
.footer ul li{
color: #c0c0c0;
float: left;
border-left: 2px solid #636363;
padding-left: 10px;
padding-right: 10px;
font-size: 14px;
font-weight: bold;
}
.footer ul li:nth-of-type(1){
border-left: 3px solid #25a851;
}
.footer p{
color: #636363;
font-size: 12px;
margin-left: -65px;
}
.free_2{
display: none;
}三、运行教程
运行及查看代码
接收网页作品压缩包后，将压缩包放到电脑桌面 ，右键压缩包文件，解压即可。解压后的文件夹中index等HTML文件双击可在浏览器运行，修改或查看代码可用编辑软件打开。
如果不会解压，不会查看源代码，或者找不到网页源代码可以点击这里查看具体教程。
修改文件夹名称
解压后的文件夹名称修改一下，文件夹名称默认是 作品编号 例 JP01 ，直接右键文件夹重命名即可。有的网页作业要求以学号命名，没要求的可以改成WEB 或者 其他任意。
修改图片素材
一般图片文件都存放在images/img/image等文件夹中！
1、在该文件夹中找到你要修改的图片，然后查看该图片的宽与高！
2、将要自己准备的图片改成与要替换的图片一样的宽与高！
3、将自己的图片名称与格式改成 要替换的图片一样！比如bg.jpg 格式和名称要一样！
4、复制你的图片，粘贴到images文件夹中，替换覆盖掉原图即可！
修改音乐视频
一般网页音乐/视频文件存放在music/video等文件夹中！
1、将要自己准备的音乐或视频文件改成与要替换的文件一样的名称与格式！
2、复制你的音乐或视频文件，到music/video文件夹中，替换覆盖掉原文件即可！
修改文字内容
用DW、hbuilder、notepad++等任意html编辑软件，打开对应的html文件。CTRL+F 查找到你要修改的字，然后直接修改字即可！
首页一般为index.html 其他页面文件名一般均为 汉字的拼音 或 简拼 或 英文 命名。也可通过浏览器地址栏查看，然后找到对应文件，进行修改即可！
修改文件时间
我们可以对网页模板中的文件进行逐个编辑修改，这样文件的修改时间就可以变成当前电脑的时间了。也可以借助小工具一键批量修改文件的创建时间、修改时间和访问时间。点此查看>>
导入软件教程
有的同学需要导入Dreamweaver或HBuilderX 等软件中进行管理或运行，每个软件的方法大体一样，这里列出常用的两款软件，教程如下：
https://blog.csdn.net/qq_41101110/article/details/133788646?spm=1001.2014.3001.5501四、常见问题
很多同学下载静态网页成品后不知道网页源代码在哪里，还有些同学dreamweaver打开css文件后截图纳闷为啥进不了实时视图界面。今天我对这些十分基础的问题，进行统一讲解。
先把文件压缩包解压
下载的网页作品通常为 zip 或 rar 的压缩包文件，把下载的网页压缩包放到电脑桌面，然后右键解压（电脑一般都有解压软件，如果你没安装解压软件，自行百度下载安装即可）如下图：
查看网页HTML源代码
如下图，解压后文件夹中的 index 等此类文件为HTML源代码文件。（如果你的电脑设置了显示文件扩展名，则可以直观的看到文件类型，HTML类型的文件就是源代码文件）
用Dreamweaver、HBuilder、NotePAD等软件打开 index 等此类型文件即可看到源代码或者进入实时视图模式，如下图：
浏览器中运行网页
如果要在浏览器中运行网页，直接双击文件夹中的 index 文件 或 右键选择你指定的浏览器打开，即可在浏览器运行。
五、源码下载
扫面下面获取源码