一、作品介绍
HTML+CSS+JS网页设计与制作，三亚旅游网页设计与制作实例， 本实例适合于初学HTML+CSS+JS的同学。该案例里面有div+css的样式布局设置，这个实例比较全面，有一级页、二级页、详情页、输入表单等，共6个页面。本文将介绍如何通过从零开始设计旅游网站，并将其转换为代码的过程来实现设计与制作。（网页设计与制作分享。源码分享。）
1.网页作品简介方面 ：蓝色简约风格，底部深色，div+css布局。主要有：首页、关于我们、精选路线、详情页、旅游攻略、 联系我们等总共6个页面html下载。
2.网页作品编辑方面：此作品为旅游网页设计题材，代码为 html+css 布局制作，作品下载后可使用任意HTML编辑软件（例如：DW、HBuilder、Vscode 、Sublime 所有编辑器均可使用）
3.网页作品布局方面：网页布局整体为LOGO、导航、主体内容布局。子页面多种布局，图片居中布局，文本描述对齐方式设置了左对齐。
4.网页作品技术方面：使用CSS制作了网页背景图、鼠标经过及选中导航变色效果等。 首页制作了留言表单。
二、作品效果
视频演示：
html+css+js 三亚旅游网页设计与制作实例(6个页面
截图演示：
扫描二维码关注公众号，回复：
17275036 查看本文章
首页
精选路线
详情页
旅游攻略
关于我们
联系我们
三、作品代码
文件目录：
HTML代码：
首页
<!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" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<!-- 头部 -->
<div class="header">
<!-- logo -->
<img src="./images/logo.png" class="logo" alt="" />
<!-- 导航栏 -->
<div class="nav">
<ul>
<li>
<a class="active" href="./index.html" target="_self">
<span title="首页">首页</span>
</a>
</li>
<li>
<a href="./routes.html" target="_self">
<span title="精选路线">精选路线</span>
</a>
</li>
<li>
<a href="./strategy.html" target="_self">
<span title="旅游攻略">旅游攻略</span>
</a>
</li>
<li>
<a href="./about.html" target="_self">
<span title="关于我们">关于我们</span>
</a>
</li>
<li>
<a href="./contact.html" target="_self">
<span title="联系我们">联系我们</span>
</a>
</li>
</ul>
</div>
</div>
<!-- 主内容 -->
<div class="main-content">
<div class="banner">
<img src="./images/banner.jpg" alt="" />
</div>
<div class="project-content">
<p class="content-title">路线推荐</p>
<div class="detail-content">
<div class="detail-pic">
<img src="./images/tj.jpeg" alt="" />
</div>
<div class="detail-desc">
<p>大东海旅游区是三亚最早被开发的热带滨海度假区，也是离市区最近的海湾。</p>
<p>主要集中在海滩边一小片区域内，住宿价格比亚龙湾便宜不少。这里消费适中，夜晚也较为热闹。
</p>
<p>沙滩和海水质量比亚龙湾逊色，但比三亚湾要好很多，能见度很高，来这里晒日光浴的人较多。</p>
<p>公共游泳区域可以租赁救生圈、遮阳伞、躺椅等设施，冲淡水和柜子租赁单独收费。</p>
<p>门票：免费，园区全天开放，项目营业时间8:00-17:00。</p>
<p>开放时间：全天 (1月1日~12月31日 周一~周日)。</p>
<p>景点位置：海南省三亚市吉阳区榆亚大道(三亚海天大酒店旁)。</p>
<p>交通：可搭乘微4路公交车至东海龙宫(公交站)、珠江花园停车场(公交站)、银泰大酒店(公交站)下车，步行均可达。</p>
</div>
</div>
<p class="content-title">精选路线</p>
<div class="content-list">
<ul>
<li>
<a href="./detail.html" target="_self">
<div class="cover-pic">
<img src="./images/lx2.jpeg" alt="" />
</div>
<p class="title">分界洲岛</p>
</a>
</li>
<li>
<a href="./detail.html" target="_self">
<div class="cover-pic">
<img src="./images/lx3.jpeg" alt="" />
</div>
<p class="title">亚龙湾</p>
</a>
</li>
<li>
<a href="./detail.html" target="_self">
<div class="cover-pic">
<img src="./images/lx4.jpeg" alt="" />
</div>
<p class="title">三亚千古情景区</p>
</a>
</li>
<li>
<a href="./detail.html" target="_self">
<div class="cover-pic">
<img src="./images/lx5.jpeg" alt="" />
</div>
<p class="title">椰梦长廊</p>
</a>
</li>
<li>
<a href="./detail.html" target="_self">
<div class="cover-pic">
<img src="./images/lx6.jpeg" alt="" />
</div>
<p class="title">鹿回头风景区</p>
</a>
</li>
<li>
<a href="./detail.html" target="_self">
<div class="cover-pic">
<img src="./images/lx7.jpeg" alt="" />
</div>
<p class="title">三亚湾</p>
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- 底部 -->
<div class="footer">
<div class="contact-container">
<div class="contact-title">
<p>联系</p>
<p>Contact</p>
</div>
<div class="contact-content">
<p class="c-name">木番薯科技</p>
<div class="c-addr">
<p>地 点：广州市天河区花城大道666号</p>
<p>邮编：510000</p>
</div>
<div class="c-addr">
<p>公众号名称：木番薯科技</p>
<p>公众号号码：mengchatchat91</p>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>也适用于：大学生网页作业制作 (HTML+CSS)、大学生HTML期末大作业、web前端期末大作业、web课程设计网页规划与设计、旅游网页设计作业成品、HTML+CSS+JS网页设计期末课程大作业等。
css样式：
