HTML+CSS制作厦门旅游网网页
html+css网页制作 旅游 厦门旅游网3个页面 大学生HTML5期末作业 Web前端网页制作 html5+css3+js
网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
获取源码
1，访问该网站 https://download.csdn.net/download/qq_42431718/89742627
2，点击上方下载
目录1
项目视频
html+css网页制作 旅游 厦门旅游网3个页面
页面展示
页面1
页面2
页面3
代码展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>旅游网首页</title>
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div class="box">
<div class="nav1">
<!-- 首页导航栏 -->
<ul>
<li class="indexnav"><a href="">首页</a></li>
<li class="indexnav"><a href="./info.html">详情</a></li>
<li class="indexnav"><a href="./phone.html">旅游资讯</a></li>
</ul>
</div>
<!-- 导航栏下面的大图 -->
<div class="box2">
<div class="huayuan">
<p>海上花园，诗意厦门</p>
</div>
</div>
<!-- 旅游向导 -->
<div class="box5">
<!-- 旅游向导标题 -->
<div class="title1">
<h2>旅游向导</h2>
</div>
<!-- 五个图片的div -->
<div class="lefttu">
<div class="lefttu1">
</div>
</div>
<div class="kuang1">
<div class="jingqu">
<span>景区</span>
<div> <img src="./images/images/shouye/lvyouxiangdaojingqu.png" alt=""></div>
<div class="liebiao">
<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>
</div>
</div>
<div class="jingqu">
<div>
<span>线路</span>
<img src="./images/images/shouye/02xiangdao.png" alt="">
</div>
<div class="liebiao">
<ul>
<li> <a href="">金砖雅游</a></li>
<li> <a href="">自驾游</a></li>
<li> <a href="">夜游厦门</a></li>
<li> <a href="">周边游</a></li>
<li id="gulangyuli"> <a href="">鼓浪屿世界经典遗产</a></li>
</ul>
</div>
</div>
<div class="jingqu">
<div>
<span>美食</span>
<img src="./images/images/shouye/03xiangdao.png" alt="">
</div>
<div class="liebiao">
<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>
</div>
</div>
<div class="jingqu">
<div>
<span>酒店</span>
<img src="./images/images/shouye/04xiangdao.png" alt="">
</div>
<div class="liebiao">
<ul>
<li> <a href="">5星级酒店</a></li>
<li> <a href="">4星级酒店</a></li>
<li> <a href="">3星级酒店</a></li>
<li> <a href="">高级酒店</a></li>
<li> <a href="">其他酒店</a></li>
</ul>
</div>
</div>
<div class="jingqu">
<div>
<span>购物</span>
<img src="./images/images/shouye/05xiangdao.png" alt="">
</div>
<div class="liebiao">
<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>
</div>
</div>
</div>
<div class="righttu">
<div class="righttu1">
</div>
</div>
</div>
<!-- 热门推荐 -->
<!-- 与上一板块标题一样 -->
<div class="box6">
<div class="title1">
<h2>热门推荐</h2>
</div>
<div class="kuang2">
<!-- 长的图片 -->
<div class="picchang">
<a href=""><img src="./images/images/shouye/yl.jpg" alt="">
<span>厦门市园林植物园</span>
</a>
</div>
<!-- 正方形的图片 -->
<div class="picfang">
<a href=""> <img src="./images/images/shouye/cyd5.jpg" alt="">
<span>诚毅科技探索中心</span></a>
</div>
<div class="picfang">
<a href="">
<img src="./images/images/shouye/rygwqd.jpg" alt="">
<span>日月谷温泉渡假村</span>
</a>
</div>
<div class="picfang">
<a href="">
<img src="./images/images/shouye/mhhd.jpg" alt="">
<span>梦幻海岸</span>
</a>
</div>
<div class="picfang">
<a href="">
<img src="./images/images/shouye/des_pic00012.jpg" alt="">
<span>云上厦门</span>
</a>
</div>
<div class="picfang">
<a href="">
<img src="./images/images/shouye/des_pic00006.jpg" alt="">
<span>胡里山炮台</span>
</a>
</div>
<div class="picfang">
<a href="">
<img src="./images/images/shouye/21437ea9-2804-44de-99a6-d4e9e84ea13f.jpg" alt="">
<span>北辰山</span>
</a>
</div>
<div class="picfang">
<a href="">
<img src="./images/images/shouye/720e5bcb-6148-4c22-b4f7-d801190098d2.jpg" alt="">
<span>古龙酱文化园</span>
</a>
</div>
<div class="picfang">
<a href="">
<img src="./images/images/shouye/z3d.jpg" alt="">
<span>曾厝坊</span>
</a>
</div>
</div>
</div>
<!-- 首页最下面 -->
<div class="box8">
<div class="kuang4">
<!-- 联系方式部分 -->
<div class="right-4">
<div class="border">
<h3>联系我们</h3>
<div>
<ul>
<li>
<img class="xinfeng" src="./images/images/shouye/ico_mail.png" alt="">
<span>9999999@qq.com</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
总结
设计一个样式美观又人性化的网页，除了具备扎实的专业知识，还需具备美学和人机工程学等相关知识，优秀的网页应具备以下几个特点:
1.简洁实用
尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；
2.使用方便
要满足使用者的要求，网页适合使用，显示出其功能美；
3.整体性好
围绕一个统一的目标设计，强调整体的功能性；
4.形象突出
尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。
5.交互式强
发挥网络的优势，想方设法使每个使用者都参与到其中来。
更多推荐
【关注作者|获取更多源码|优质文章】；Web前端网页制作、大学生毕业设计辅导、期末大作业辅导、模板源码、技术咨询等，有兴趣的联系我!
更多优质博客文章、网页模板点击以下链接查阅：
html+css+js网页设计 CSDN博客
html+css+js网页设计 CSDN博客
html+css+js网页设计 CSDN博客
关注作者，点赞收藏博文，获取更多源码，Thanks！5000+完整代码，主题涵盖30+种类型:
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
