目录
一、网页概述
二、网页文件
三、网页效果
四、代码展示
1.html
2.CSS
3.JS
五、总结
1.简洁实用
2.使用方便
3.整体性好
4.形象突出
5.交互式强
六、更多推荐
欢迎光临仙女的网页世界！这里有Web前端网页制作的各行各业的案例，样式齐全新颖，并持续更新！感谢CSDN，提供了这么好的知识学习、技术交流的平台，让我们在这里相遇，小伙伴们，来吧，让我们一起开启Web前端网页制作的奇妙之旅！
说起Web前端，大学开启这扇技术之门以来，一切起始于兴趣爱好和专业钻研。自16年中大研究生毕业步入社会工作以来，才真正开启了这段奇妙的旅行！在一次次需求分析、成品交付和客户服务的过程中，进行了一次又一次的知识应用的实践和验证。学以致用，实践出真知！从最初的Web前端的迷途小书童到如今的技术专家，多年的服务客户和服务大学生的实践经验，早就驾轻就熟！
奇妙之处在于：当你得到客户的认可、公司的赞赏和同事的敬仰，尤其是业余时间为广大的大学生提供各种各样的帮助和指引，学弟学妹们一致好评，认为学姐是他们的榜样的时候，你会发现，知识的应用除了体现自身价值，还能实现自我满足！这种感觉是相当奇妙的！
我在CSDN的奇妙旅行，除了学习其他知识和持续发布优质的网页实例之外，后续时间允许的情况下，我会发布前端相关知识的学习和应用的教程。目前提供的服务类型包括：Web前端网页制作的专题研究辅导、网页定制、大学生课程作业辅导、毕设辅导、网页模板源码、教程资料、技术咨询，以及其他有偿或无偿的服务。如有需要，欢迎随时咨询！能满足你们所需，是我的荣幸！
非常感谢大家的关注和点赞，你们的关注和点赞是我持续创作的动力，谢谢！
一、网页概述
本实例应用html5+css+js： 导航菜单、图片轮翻、三级页面、留言表单等。适用于大学生网页课程作业设计；本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。
二、网页文件
本网页实例共包含10个页面：
三、网页效果
以下是本篇文章正文内容，下面案例仅供参考（节选示例）：
四、代码展示
1.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>三亚旅游网</title>
<link rel="stylesheet" type="text/css" href="css/common.css"/>
<script type="text/javascript" src="js/rotate.js"></script>
</head>
<body>
<div class="container">
<div class="header">
<a href="index.html">三亚</a>
</div>
<div class="nav">
<a href="index.html">三亚首页</a>
<a href="view1.html">城市简介</a>
<a href="view2.html">行政区划</a>
<a href="view3.html">地理环境</a>
<a href="view4.html">自然环境</a>
<a href="view5.html">历史文化</a>
<a href="view6.html">地方特产</a>
<a href="view7.html">风景名胜</a>
<a href="view8.html">社会事业</a>
<a href="view9.html">访客留言</a>
</div>
<div id="focus" class="focus">
<ul id="focus_image" class="focus_image" >
<li class="now">
<a href="view1.html"><img src="images/focus1.jpg"/></a>
</li>
<li><a href="view2.html"><img src="images/focus2.jpg"/></a></li>
</ul>
<ul id="focus_dot" class="focus_dot">
<li class="on"></li>
<li></li>
</ul>
</div>
<div class="wrapper">
<div class="list">
<h3><a href="view1.html">城市简介</a></h3>
<a href="view1.html"><img src="images/view1.jpg"/></a>
<p><a href="view1.html">三亚市，简称崖，古称崖州，别称鹿城，是海南省地级市，地处海南岛的最南端。三亚的南边即为中国的南海，陆地总面积1921平方千米，海域总面积3226平方千米。东西长91.6千米，南北宽51公里，下辖四个区。</a></p>
</div>
<div class="word">
<h3><a href="view2.html">行政区划</a></h3>
<p><a href="view2.html">2014年2月11日，国务院批复三亚市撤六镇新设四区，分别为吉阳区（撤销原河东管理区、吉阳镇、亚龙湾管委会）、天涯区（撤销原河西管理区、凤凰镇、天涯镇、三亚湾管委会，育才镇）、海棠区（撤销原海棠湾镇、海棠湾管委会）、崖州区（撤销原崖城镇）。</a></p>
<p><a href="view2.html">2014年9月30日，撤销育才镇，在原育才镇的行政区划内，成立中共三亚市育才生态区工作委员会和三亚市育才生态区管理委员会。</a></p>
<p><a href="view2.html">2015年1月2日，海南省三亚市崖州区、天涯区、吉阳区、海棠区正式挂牌成立。三亚市共辖4个市辖区，分别是海棠区、吉阳区、天涯区、崖州区。三亚市人民政府驻吉阳区新风街257号。三亚市可行使地方立法权，制定地方性法规。</a></p>
</div>
<div class="list">
<h3><a href="view3.html">地理环境</a></h3>
<a href="view3.html"><img src="images/view3.jpg"/></a>
<p><a href="view3.html">三亚市地处海南岛最南端，地理坐标介于北纬18°09′34″~18°37′27″、东经108°56′30″~109°48′28″之间。东邻陵水县，北依保亭县，西毗乐东县，南临南海。三亚市陆地总面积1921平方千米，海域总面积3226平方千米。</a></p>
</div>
<div class="line">
<h3><a href="view4.html">自然环境</a></h3>
<a href="view4.html"><img src="images/view4.jpg"/></a>
<p><a href="view4.html">三亚市地表水资源多年平均降雨深度604毫米，半径流系数0.43，年总径流量11.5亿立方米，半径深度604毫米，半径流系数0.43，年总径流量11.5亿立方米，丰水年（P=10%）的年径流量18.2亿立方米，平水年（P=50%）的年径流量10.8亿立方米，枯水年（P=90%）的年径流量5.8亿立方米。集雨面积1905平方千米，多年平均降雨量1417毫米。</a></p>
</div>
<div class="text">
<h3><a href="view5.html">历史文化</a></h3>
<p><a href="view5.html">三亚市有宗教教派三个，即佛教、伊斯兰教、基督教。三亚市有宗教信徒11466人。其中：佛教信徒550人；基督教信徒3200人，牧师1人；伊斯兰教信徒7716人，其中阿訇33人。经政府批准登记设立的宗教活动场所九处：一是佛教的南山寺；二是伊斯兰教清真寺6处；三是基督教教堂2个。</a></p>
</div>
<div class="word">
<h3><a href="view6.html">地方特产</a></h3>
<p><a href="view6.html">梅花红烧参的主料为水发梅花参，主要配料有油菜和百灵菇等。把泡发后的梅花参从中间切成两半，用开水烫透，然后将水控净。经大厨烹饪，配上新鲜的百灵菇，味道嫩滑鲜甜，具有滋阴补肾，增强机体免疫力之功效。</a></p>
<p><a href="view6.html">红糖年糕曾经是三亚人过年时才吃的食品，如今在三亚各个农贸市场均有销售摊点。糯米面加红糖蒸出来的，软软的、粘粘的还具有红糖那种特别的香味，很受女孩子喜爱。</a></p>
<p><a href="view6.html">三亚的粉类小食很多，凉拌类的却不多，其中甜酸粉是常见的一种。滑滑的粉丝是地瓜粉做的，几块白白软软的米糕和它构成了甜酸粉的主料，黄色的菠萝块和红色的胡萝卜丝相映生辉，当然吃起来菠萝的酸和胡萝卜独有的甜更是融合到绝妙。凉拌的腌料是红糖水和米醋混合而成的。</a></p>
</div>
<div class="list">
<h3><a href="view7.html">风景名胜</a></h3>
<a href="view7.html"><img src="images/view7.1.jpg"/></a>
<p><a href="view7.html">天涯海角风景区位于天涯区的马岭山脚下。其前海后山，风景独特。步入游览区，沙滩上那一对拔地而起的高10多米，长60多米的青灰色巨石赫然入目。两石分别刻有“天涯”和“海角”字样，意为天之边缘，海之尽头。</a></p>
</div>
<div class="list">
<h3><a href="view8.html">社会事业</a></h3>
<a href="view8.html"><img src="images/view8.jpg"/></a>
<p><a href="view8.html">三亚非物质文化遗产资源较为丰富。《黎族打柴舞》和《崖城民歌》于2006年入选国家级非物质文化遗产保护项目记录，《黎族原始制陶》等7项目分别于2007年和2009年入选省级非物质文化遗产保护项目名录。</a></p>
</div>
</div>
<div class="footer">
Copyright @ 2021 sanyalvyou.com All Rights Reserved. 三亚旅游网 版权所有
</div>
</div>
</body>
</html>
...
2.CSS
代码如下（节选示例）：
@charset "utf-8";
*{margin:0;padding:0;box-sizing:border-box;
}
html body{font-size:12px;font-family:"Microsoft YaHei";color:#fff;
}
a{color:#fff;text-decoration:none;
}
.container{width:1090px;margin:0 auto;overflow:hidden;background-color:#6bc8d7;
}
.header{float:left;width:1090px;height:100px;line-height:95px;font-size:36px;font-weight:bold;letter-spacing:5px;text-align:center;
}
.nav{float:left;width:1030px;height:45px;line-height:45px;margin-left:30px;font-size:14px;font-weight:bold;background-color:#e6c8a2;border-radius:5px;
}
.nav a{float:left;width:103px;text-align:center;
}
.nav a:hover{text-decoration:underline;
}
.nav a:nth-last-child(1){margin-right:0;
}
.focus{float:left;position:relative;width:1090px;
}
.focus_image{float:left;width:1030px;height:460px;list-style:none;margin:30px 0 0 30px;
}
.focus_image li{float:left;width:1030px;height:460px;display:none;
}
.focus_image li.now{display:block;
}
.focus_image li img{float:left;width:1030px;height:460px;
}
.focus_dot{position:absolute;bottom:30px;right:420px;width:130px;height:20px;list-style:none;
}
.focus_dot li{float:left;width:12px;height:12px;margin-left:10px;background-color:#fff;border-radius:50%;cursor:pointer;
}
.focus_dot li.on{background-color:#8ab5a4;
}
.wrapper{float:left;width:1090px;padding-bottom:50px;
}
.wrapper a:hover{text-decoration:underline;
}
.list{float:left;width:323px;height:370px;margin:50px 0 0 30px;
}
.list h3{float:left;width:323px;height:30px;line-height:30px;font-size:16px;
}
.list img {float:left;width:323px;height:210px;margin-top:12px;
}
.list p{float:left;width:323px;line-height:25px;margin-top:12px;
}
.word{float:left;width:323px;height:370px;margin:50px 0 0 30px;
}
.word h3{float:left;width:323px;height:30px;line-height:30px;font-size:16px;
}
.word p{float:left;width:323px;line-height:25px;margin:10px 0 2px 0;
}
.line{float:left;width:677px;height:170px;margin:60px 0 0 30px;
}
.line img{float:left;width:230px;height:170px;
}
.line h3{float:right;width:427px;height:30px;line-height:30px;font-size:16px;
}
.line p{float:right;width:427px;line-height:25px;margin-top:10px;
}
.text{float:left;width:323px;height:170px;margin:60px 0 0 30px;
}
.text h3{float:right;width:323px;height:30px;line-height:30px;font-size:16px;
}
.text p{float:right;width:323px;line-height:25px;margin-top:10px;
}
.content{float:right;width:1090px;margin-top:30px;
}
.content h3{float:left;width:1090px;height:50px;line-height:50px;font-size:16px;text-align:center;
}
.content img{float:left;width:760px;margin:15px 0 10px 165px;
}
.content p{float:left;width:760px;line-height:30px;margin:5px 0 0 165px;font-size:13px;text-indent:25px;
}
.message{float:left;width:1090px;padding:60px 0 80px 0;
}
.message form{float:left;width:1090px;
}
.message p{float:left;width:1090px;margin-top:15px;
}
.message span{float:left;width:340px;height:35px;line-height:35px;font-size:14px;text-align:right;margin-top:8px;
}
.message input{float:left;width:380px;height:35px;line-height:35px;margin:8px 0 0 20px;
}
.message b{float:left;width:130px;height:35px;margin:15px 0 0 20px;font-size:14px;font-weight:normal;
}
.message textarea{float:left;width:380px;height:260px;line-height:35px;margin:8px 0 0 20px;
}
.message input.submit{letter-spacing:3px;color:#fff;background-color:#6bb4c5;border:0;
}
...
3.JS
代码如下（节选示例）：
window.οnlοad=function()
{
function getIdName(id,tagName)
{
if(tagName!=0)
{
return document.getElementById(id).getElementsByTagName(tagName);
}
else
{
return document.getElementById(id);
}
}
function rotation(json)
{
var that;
var start=0;
var index=0;
var timer=null;
var option={
li:"li", //默认用li包裹
wrapperId:"", //最外面 id
imageId:"", //图片外面id
buttonId:"", //按钮外面id
ms:3000 //多少毫秒切换一张,默认3000毫秒
}
for(var i in option)
{
if(json[i]!=undefined)
{
option[i]=json[i];
}
}
var wrapper=getIdName(option.wrapperId,0);
var images=getIdName(option.imageId,option.li);
var buttons=getIdName(option.buttonId,option.li);
function scrollImage(that)
{
if(that>=0)
{
index=that;
}
else
{
if(start==0)
{
index++;
}
else
{
index--;
start=0;
}
}
if(index>=buttons.length) index=0;
if(index<0) index=buttons.length-1;
for(var j=0;j<buttons.length;j++)
{
images[j].className="";
buttons[j].className="";
}
images[index].className="now";
buttons[index].className="on";
}
images[index].className="now";
buttons[index].className="on";
for(var i=0;i<buttons.length;i++)
{
buttons[i].index=i;
buttons[i].οnclick=function()
{
that=this.index;
scrollImage(that);
}
}
timer=setInterval(scrollImage,option.ms);
wrapper.οnmοuseοver=function()
{
clearInterval(timer);
}
wrapper.οnmοuseοut=function()
{
timer=setInterval(scrollImage,option.ms);
}
}
...
五、总结
设计一个样式美观又人性化的网页，除了具备扎实的专业知识，还需具备美学和人机工程学等相关知识，优秀的网页应具备以下几个特点:
1.简洁实用
尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；
2.使用方便
要满足使用者的要求，网页适合使用，显示出其功能美；
3.整体性好
围绕一个统一的目标设计，强调整体的功能性；
4.形象突出
尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。
5.交互式强
发挥网络的优势，想方设法使每个使用者都参与到其中来。
六、更多推荐
【关注作者|获取更多源码|优质文章】；Web前端网页制作、大学生毕业设计辅导、期末大作业辅导、模板源码、技术咨询，有兴趣的联系我!
您的支持是我创作的动力！看到这里就【点赞收藏博文】，Thanks！
更多优质博客文章、网页模板点击以下链接查阅：仙女网页设计-CSDN博客。
