html+css+js网页设计 旅游 厦门旅游网11个页面 大学生HTML5期末作业 Web前端网页制作 html5+css3+js
网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
获取源码
1，访问该网站 https://download.csdn.net/download/qq_42431718/89748620
2，点击上方下载
目录1
html+css+js网页设计 旅游 厦门旅游网11个页面
项目视频
html+css+js网页设计 旅游 厦门旅游网11个页面
页面展示
页面1
页面2
页面3
页面4
页面5
页面6
页面7
页面8
页面9
页面10
代码展示
<body>
<div class="box">
<div class="samllBox1">
<div class="black">
<!-- 选择语言 -->
<div class="language">
<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#">
<div class="weather">
<img src="./images/shouye/b0.png" alt="">
<span>15~23</span>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class=" samllBox2">
<div class="blue">
<!-- 导航栏 -->
<div class="head">
<a href="./index.html"><img src="./images/shouye/logo.png" alt=""></a>
<ul>
<li><a href="./index.html">首页</a></li>
<li><a href="./survey.html">厦门概况</a></li>
<li><a href="./consult.html">旅游咨询</a></li>
<li class="suspend">
<a href="./scenic .html">景区</a>
<div class="viscidity">
<ul>
<li><a href="./scenic .html">5A级景区</a></li>
<li><a href="./scenic .html">4A级景区</a></li>
<li><a href="./scenic .html">3A级景区</a></li>
<li><a href="./scenic .html">厦门新24景区</a></li>
<li><a href="./scenic .html">文博教科</a></li>
<li><a href="./scenic .html">遗产古迹</a></li>
<li><a href="./scenic .html">主体乐园</a></li>
<li><a href="./scenic .html">展览场馆</a></li>
</ul>
</div>
</li>
<li class="suspend">
<a href="./line.html">线路</a>
<div class="viscidity">
<ul>
<li><a href="./line.html">金砖压游</a></li>
<li><a href="./line.html">夜游厦门</a></li>
<li><a href="./line.html">鼓浪屿世界经典遗产</a></li>
<li><a href="./line.html">自驾游</a></li>
<li><a href="./line.html">周边游</a></li>
<li><a href="./line.html">其他路线</a></li>
</ul>
</div>
</li>
<li class="suspend">
<a href="./food.html">美食</a>
<div class="viscidity">
<ul>
<li><a href="./food.html">地道小吃</a></li>
<li><a href="./food.html">海鲜排挡</a></li>
<li><a href="./food.html">养生素菜</a></li>
<li><a href="./food.html">私房佳肴</a></li>
<li><a href="./food.html">午茶晚茶</a></li>
</ul>
</div>
</li>
<li class="suspend">
<a href="./hotel.html">酒店</a>
<div class="viscidity">
<ul>
<li><a href="./hotel.html">5星级酒店</a></li>
<li><a href="./hotel.html">4星级酒店</a></li>
<li><a href="./hotel.html">3星级酒店</a></li>
<li><a href="./hotel.html">星高级酒店</a></li>
<li><a href="./hotel.html">其他</a></li>
</ul>
</div>
</li>
<li class="suspend">
<a href="./shop.html">购物</a>
<div class="viscidity">
<ul>
<li><a href="./shop.html">时尚</a></li>
<li><a href="./shop.html">4A级景区</a></li>
<li><a href="./shop.html">3A级景区</a></li>
<li><a href="./shop.html">厦门新24景区</a></li>
<li><a href="./shop.html">文博教科</a></li>
</ul>
</div>
</li>
<li class="suspend">
<a href="./traffic.html">交通</a>
<div class="viscidity">
<ul>
<li><a href="./traffic.html">5A级景区</a></li>
<li><a href="./traffic.html">4A级景区</a></li>
<li><a href="./traffic.html">3A级景区</a></li>
<li><a href="./traffic.html">厦门新24景区</a></li>
<li><a href="./traffic.html">文博教科</a></li>
<li><a href="./traffic.html">遗产古迹</a></li>
<li><a href="./traffic.html">主体乐园</a></li>
<li><a href="./traffic.html">展览场馆</a></li>
</ul>
</div>
</li>
<li><a href="./show.html">演出</a></li>
<li><a href="./find.html">发现金门</a></li>
</ul>
</div>
</div>
</div>
<!-- 背景图片加文字 -->
<div class="bigbox">
<div class="typeArea">
<p>海上花园 诗意厦门</p>
</div>
</div>
<!-- 厦门旅游 -->
<div class="content">
<div class="typeArea2">
<div class="tour">
<h3>厦门旅游</h3>
<ul>
<li><a href="#">节庆活动</a></li>
<li><a href="#">会议展览</a></li>
<li><a href="#">旅游攻略</a></li>
<li><a href="#">旅游贴士</a></li>
<li><a href="#">图片</a></li>
<li><a href="#">视频</a></li>
</ul>
</div>
<!-- 轮播图 -->
<!-- <div class="picture">
</div> -->
<!-- 轮播图 -->
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<a href="#"><img src="./images/shouye/1.jpg" alt=""></a>
</div>
<div class="swiper-slide">
<a href="#"><img src="./images/shouye/2.jpg" alt=""></a>
</div>
<div class="swiper-slide">
<a href="#"><img src="./images/shouye/3.jpg" alt=""></a>
</div>
<div class="swiper-slide">
<a href="#"><img src="./images/shouye/4.jpg" alt=""></a>
</div>
<div class="swiper-slide">
<a href="#"><img src="./images/shouye/5.jpg" alt=""></a>
</div>
<div class="swiper-slide">
<a href="#"><img src="./images/shouye/6.jpg" alt=""></a>
</div>
<div class="swiper-slide">
<a href="#"><img src="./images/shouye/7.jpg" alt=""></a>
</div>
<div class="swiper-slide">
<a href="#"><img src="./images/shouye/8.jpg" alt=""></a>
</div>
</div>
<div class="swiper-pagination "></div>
</div>
<!-- 最新资讯 -->
<div class="message">
<div>
<h3>最新资讯</h3>
<a href="#"><i>更多资讯></i> </a>
</div>
<ul>
<li><a href="#">在线“种草” 夏天到鹭岛来玩海</a></li>
<li><a href="#">放慢脚步“走读”厦门</a></li>
<li><a href="#">筼筜湖畔多了座公园</a></li>
<li><a href="#">厦门今天雨水送爽 明起晴热回归</a></li>
<li><a href="#">张韶涵！拉着拉杆箱来听演唱会→</a></li>
<li><a href="#">守护记忆 鼓浪屿老建筑“立此存照”焕</a></li>
<li><a href="#">促进音乐文化交流 鼓浪屿签约4个音乐</a></li>
<li><a href="#">南湖公园西园对外开放</a></li>
</ul>
</div>
</div>
</div>
<div class="content">
<div class="bigLine">
<!-- 精品线路导航栏 -->
<div class="samllLine">
<ul>
<li id="li">精品线路</li>
<li><a href="#">诗意厦门</a></li>
<li><a href="#">夜游厦门</a></li>
<li><a href="#">鼓浪屿世界文化遗产</a></li>
<li><a href="#">自驾游</a></li>
<li><a href="#">周边游</a></li>
</ul>
<a href="#"><i>其他线路></i></a>
</div>
<div class="line">
<div class="right1">
<a href="#">
<div class="samllRight1">
<span><i>01</i></span>
<span>万国建筑世界遗址</span>
<span id="discolor">荟萃了千万坐中西合璧、风格各异 中外建筑
</span>
</div>
<img src="./images/shouye/kd.jpg" alt="">
</a>
</div>
<div class="content1">
<ul>
<li>
<a href="#">
<img src="./images/shouye/hsd.jpg" alt="">
<span class="ztys">
<i>02</i>
</span>
上海看厦门
<p>鼓浪屿犹如一张美丽的画卷展现在眼前，美不胜收</p>
</a>
</li>
<li>
<a href="#">
<img src="./images/shouye/sjd.jpg" alt="">
<span class="ztys">
<i>03</i>
</span>
赏经典华屋
<p>
设计博彩中西文化之长，看成中西合并之经典
</p>
</a>
</li>
<li>
<a href="#">
<img src="./images/shouye/36022f1a09174c25867be8d76af0ccdb.jpg" alt="">
<span class="ztys">
<i>04</i>
</span>
街巷寻味、体旅研学
<p>
六大精品运动休闲旅游路线，带你玩转暖冬思明
</p>
</a>
</li>
</ul>
</div>
</div>
<div class="left1">
<ul>
<li><a href="#">
<img src="./images/shouye/45-2.jpg" alt="">
</a></li>
<li><a href="#">
<img src="./images/shouye/honse.jpg" alt="">
</a></li>
<li><a href="#">
<img src="./images/shouye/wx3.jpg" alt="">
</a></li>
</ul>
</div>
</div>
</div>
<!-- 旅游向导 -->
<div class="content">
<div class="guide">
<div class="icon1"></div>
<div class="icon2"></div>
<h1>旅游向导</h1>
<div class="guideDiv">
<div class="guide1">
<div class="guideImg">
<a href="#"><img src="./images/shouye/travel_guider_p001.jpg" alt=""></a>
</div>
<div class="guideUl">
<ul>
<li><a href="#">5A级景区</a></li>
<li><a href="#">4A级景区</a></li>
<li><a href="#">厦门新24景</a></li>
<li><a href="#">主题乐园</a></li>
<li><a href="#">文博科教</a></li>
<li><a href="#">遗产古迹</a></li>
</ul>
<h3>景区</h3>
</div>
</div>
<div class="guide1">
<div class="guideImg">
<a href="#"><img src="./images/shouye/travel_guider_p002.jpg" alt=""></a>
</div>
<div class="guideUl">
<ul>
<li><a href="#">金砖雅游</a></li>
<li><a href="#">自驾游</a></li>
<li><a href="#">夜游厦门</a></li>
<li><a href="#">周边游</a></li>
<li id="guideUlid1"><a href="#">鼓浪屿世界经典遗产</a></li>
</ul>
<h3>线路</h3>
</div>
</div>
<div class="guide1">
<div class="guideImg">
<a href="#"><img src="./images/shouye/travel_guider_p003.jpg" alt=""></a>
</div>
<div class="guideUl">
<ul>
<li><a href="#">地道美食</a></li>
<li><a href="#">海鲜排挡</a></li>
<li><a href="#">养生素菜</a></li>
<li><a href="#">私房佳肴</a></li>
<li><a href="#">午茶晚茶</a></li>
</ul>
<h3>美食</h3>
</div>
</div>
<div class="guide1">
<div class="guideImg">
<a href="#"><img src="./images/shouye/travel_guider_p004.jpg" alt=""></a>
</div>
<div class="guideUl">
<ul>
<li><a href="#">5星级酒店</a></li>
<li><a href="#">4星级酒</a></li>
<li><a href="#">3星级酒</a></li>
<li><a href="#">高级酒店</a></li>
</ul>
<h3>酒店</h3>
</div>
</div>
<div class="guide1">
<div class="guideImg">
<a href="#"><img src="./images/shouye/travel_guider_p005.jpg" alt=""></a>
</div>
<div class="guideUl">
<ul>
<li><a href="#">时尚商圈</a></li>
<li><a href="#">特色街区</a></li>
<li><a href="#">地道伴手礼</a></li>
<li><a href="#">跨境海淘</a></li>
<li id="guideUlid2"><a href="#">离境退税政策</a></li>
</ul>
<h3>购物</h3>
</div>
</div>
</div>
</div>
</div>
<!-- 热门推荐 -->
<div class="content">
<div class="recom">
<h1>热门推荐</h1>
<div class="recomUl">
<ul>
<li><a href="#"><img src="./images/shouye/yl.jpg" alt="">
</a>
</li>
<li><a href="#"><img src="./images/shouye/cyd5.jpg" alt=""></a></li>
<li><a href="#"><img src="./images/shouye/rygwqd.jpg" alt=""></a></li>
<li><a href="#"><img src="images/shouye/mhhd.jpg" alt=""></a></li>
<li><a href="#"><img src="./images/shouye/des_pic00012.jpg" alt=""></a></li>
<li><a href="#"><img src="./images/shouye/des_pic00006.jpg" alt=""></a></li>
<li><a href="#"><img src="./images/shouye/21437ea9-2804-44de-99a6-d4e9e84ea13f.jpg" alt=""
width="230px" height="230px"></a>
</li>
<li><a href="#"><img src="./images/shouye/720e5bcb-6148-4c22-b4f7-d801190098d2.jpg" alt=""
width="230px" height="230px"></a>
</li>
<li><a href="#"><img src="./images/shouye/z3d.jpg" alt=""></a></li>
</ul>
<h3 class="h31">厦门市园林植物园</h3>
<h3 class="h32">成毅科技探索中心</h3>
<h3 class="h33">日月谷温泉度假村</h3>
<h3 class="h34">梦幻海岸</h3>
<h3 class="h35">云上厦门</h3>
<h3 class="h36">胡同里炮台</h3>
<h3 class="h37">北辰山</h3>
<h3 class="h38">古龙酱文化</h3>
<h3 class="h39">曾厝垵</h3>
</div>
</div>
</div>
<!-- 游记攻略 -->
<div class="content">
<div class="strategy">
<h1>游记攻略</h1>
<h3><i>独行或同游，聪明的人与你在一起</i></h3>
<a href="#">
<i>
<h3>MORE>></h3>
</i>
</a>
<div class="strategyUl">
<ul>
<li>
<img src="./images/shouye/strategy_p36.jpg" alt="">
<div class="strategyImg">
<img src="./images/shouye/strategy_msk.png" alt="">
</div>
<div class="strategyP">
<p>文艺</p>
<p>打卡圣地</p>
</div>
<div class="span">
<img src="./images/shouye/strategy_pos.png" alt=""><span>厦门</span>
</div>
</li>
<li>
<img src="./images/shouye/strategy_p12.jpg" alt="">
<div>
<img src="./images/shouye/strategy_msk.png" alt="">
</div>
<div id="tow">
<p>超梦幻夜景，美醉了！</p>
</div>
<div class="span">
<img src="./images/shouye/strategy_pos.png" alt=""><span>厦门</span>
</div>
</li>
<li>
<img src="./images/shouye/strategy_p37.jpg" alt="">
<div>
<img src="./images/shouye/strategy_msk.png" alt="">
</div>
<div class="strategyP">
<p>"藏猫于岛"</p>
<p>"画猫充饥"</p>
</div>
<div class="span">
<img src="./images/shouye/strategy_pos.png" alt=""><span>厦门</span>
</div>
</li>
<li>
<img src="./images/shouye/strategy_p38.jpg" alt="">
<div>
<img src="./images/shouye/strategy_msk.png" alt="">
</div>
<div id="four">
<p>遇见了"生态美"</p>
</div>
<div class="span">
<img src="./images/shouye/strategy_pos.png" alt=""><span>厦门</span>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- 底部 -->
<div class="bigbuttom">
<div class="content">
<div class="bottom">
<div class="left">
<div class="div1">
<h1>厦门旅游网</h1>
<p>厦门市文化和旅游局</p>
<p>文旅宣传推广官方网站</p>
<p>全国十佳旅游目的地网站</p>
</div>
<div class="div2">
<img src="./images/shouye/qrcode.jpg" alt="">
<p>
更多精彩内容请关注
</p>
<p>
厦门市文旅局官方微信
</p>
</div>
</div>
<div class="centre">
<div>
<h3>WWW.VISITXM.COM</h3>
</div>
<ul>
<li><a href="#">厦门概况</a></li>
<li><a href="#">景区 线路 美食 酒店 购物 交通</a></li>
<li><a href="#">会议展览</a></li>
<li><a href="#">旅游资讯</a></li>
<li><a href="#">全域推广联盟</a></li>
<li><a href="#">节庆活动</a></li>
<li><a href="#">旅游线路</a></li>
<li><a href="#">发现金门</a></li>
<li><a href="#">旅游攻略</a></li>
<li><a href="#">图片 视频</a></li>
<li><a href="#">旅游贴士</a></li>
<li><a href="#">厦门市文旅局官方微博</a></li>
</ul>
</div>
<div class="right">
<div>
<h3>联系我们</h3>
</div>
<div class="email">
<div class="samllEmail1">
<img src="./images/shouye/arrow_bottom.png" alt="">
<p>2331129256@qq.com</p>
</div>
<div class="samllEmail2">
<!-- <img src="./images/shouye/arrow_bottom.png" alt=""> -->
<div class="div0 div1"></div>
<div class="div0 div2"></div>
<div class="div0 div3"></div>
<div class="div0 div4"></div>
<div class="div0 div5"></div>
</div>
</div>
</div>
</div>
<div>
<div class="end">
<a href="#">闽ICP备06013218号-2,</a>
<span>Copyright © 2021 All Right Reserved,</span>
<a href="#">visitxm.com</a>
</div>
</div>
</div>
</div>
</div>
</body>
总结
设计一个样式美观又人性化的网页，除了具备扎实的专业知识，还需具备美学和人机工程学等相关知识，优秀的网页应具备以下几个特点:
1.简洁实用
尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；
2.使用方便
要满足使用者的要求，网页适合使用，显示出其功能美；
3.整体性好
围绕一个统一的目标设计，强调整体的功能性；
4.形象突出
尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。
5.交互式强
发挥网络的优势，想方设法使每个使用者都参与到其中来。
更多推荐
【关注作者|获取更多源码|优质文章】；Web前端网页制作、大学生毕业设计辅导、期末大作业辅导、模板源码、技术咨询等，有兴趣的联系我!
更多优质博客文章、网页模板点击以下链接查阅：
html+css+js网页设计 CSDN博客
html+css+js网页设计 CSDN博客
html+css+js网页设计 CSDN博客
关注作者，点赞收藏博文，获取更多源码，Thanks！5000+完整代码，主题涵盖30+种类型:
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
