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