目录
一、网页概述
本实例应用html5+css3+js： div+css、图片轮翻、搜索等，代码精简。本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。
二、网页文件
本网页共包含4个页面：
三、网页效果
以下是本篇文章正文内容，下面案例仅供参考（节选示例）：
四、代码展示
1.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>香港</title>
</head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="js/banner.js" type="text/jscript"></script>
<body>
<div class="page">
<div class="yi">
<div class="logo"><img src="images/logo.jpg" width="120" height="60"></div>
<div class="sou"><input name="" type="text" placeholder="新闻"></div>
<div class="suo"> <P>搜索</P></div>
</div>
<div class="clearit"></div>
<div class="daohang">
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="page1.html">地理环境</a></li>
<li><a href="page2.html">经济状况</a></li>
<li><a href="page3.html">特色美食</a></li>
</ul>
</div>
<div class="banner">
<div class="wrap" id="wrap">
<ul id="pic">
<li><img src="images/banner.jpg" alt=""></li>
<li><img src="images/banner1.jpg" alt=""></li>
<li><img src="images/banner2.jpg" alt=""></li>
</ul>
<ol id="list">
<li class="on">1</li>
<li>2</li>
<li>3</li>
</ol>
</div>
</div>
<div class="kuang">
<div class="er">
<div class="ezuo">
<img src="images/1.jpg" width="250" height="315">
</div>
<div class="eyou">
<p>香港特别行政区，简称“港”，全称中华人民共和国香港特别行政区，位于中国南部、珠江口以东，西与澳门隔海相望，北与深圳相邻，南临珠海万山群岛，区域范围包括香港岛、九龙、新界和周围262个岛屿，陆地面积1113.76平方千米，海域面积1641.21平方千米，总面积2754.97平方千米。 截至2023年末，总人口750.31万人 ，是世界上人口密度最高的地区之一，人均寿命全球第一，人类发展指数全球第四。香港自古以来就是中国的领土，1842~1997年曾受英国殖民统治。二战以后，香港经济和社会迅速发展，跻身“亚洲四小龙”行列，成为全球最富裕、经济最发达和生活水准最高的地区之一。1997年7月1日，中国政府对香港恢复行使主权，香港特别行政区成立。中央政府对香港拥有全面管治权，香港保持原有的资本主义制度不变，并享受外交及国防以外所有事务的高度自治权，以“中国香港”的名义参加不以国家为单位参加的国际组织和国际会议。“一国两制”、“港人治港”、高度自治是中国政府的基本国策。
</p>
</div>
</div>
<div class="clearit"></div>
<div class="er">
<div class="tu"><img src="images/2.jpg" width="283" height="200"></div>
<div class="tu"> <img src="images/3.jpg" width="283" height="200"></div>
<div class="tu"> <img src="images/4.jpg" width="283" height="200"></div>
</div>
...
2.CSS
代码如下（节选示例）：
@charset "utf-8";
/* CSS Document */
body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul, ol,
li, dl, dt, dd, form, a, fieldset, input, th, td
{margin: 0; padding: 0; border: 1; outline: none;}
body { font-family: "微软雅黑";font-size: 14px;color:#000000; line-height:30px;text-align:left; }
td,th {font-family: "宋体";font-size: 14px;}
.clearit{clear:both;}
A:link {TEXT-DECORATION: none;}
A:visited {TEXT-DECORATION: none;}
ul,li{list-style-type:none; color:#000;}
p{padding: 0; line-height:30px; }
.page{width:900px; margin:0 auto;}
.logo{width:120px; float:left;}
.page p{color:#FFF;}
.banner {
width: 900px;
margin: 0 auto;
height: auto;
overflow: hidden;
}
.wrap {
height: 300px;
width: 900px;
position: relative;
overflow: hidden;
}
.wrap ul {
position: absolute;
}
.wrap ul li {
height: 300px;
}
.wrap ol {
position: absolute;
right: 10px;
bottom: 20px;
}
.wrap ol li {
height: 30px;
width: 30px;
background: #ddd;
border: 1px solid #969591;
border-radius: 50%;
margin-left: 5px;
color: #959490;
float: left;
text-align: center;
cursor: pointer;
}
.wrap ol .on {
background: #8F9E9E;
color: #fff;
}
...
3.JS
代码如下（节选示例）：
window.onload = function() {
var wrap = document.getElementById('wrap'),
pic = document.getElementById('pic'),
list = document.getElementById('list').getElementsByTagName('li'),
index = 0,
timer = null;
// 若果有在等待的定时器，则清掉
if (timer) {
clearInterval(timer);
timer = null;
}
// 自动切换
timer = setInterval(autoPlay, 2000);
// 定义并调用自动播放函数
function autoPlay() {
index++;
if (index >= list.length) {
index = 0;
}
changeImg(index);
}
// 定义图片切换函数
function changeImg(curIndex) {
for (var j = 0; j < list.length; j++) {
list[j].className = "";
}
// 改变当前显示索引
list[curIndex].className = "on";
pic.style.marginTop = -300 * curIndex + "px";
index = curIndex;
}
// 鼠标划过整个容器时停止自动播放
wrap.onmouseover = function() {
clearInterval(timer);
}
// 鼠标离开整个容器时继续播放至下一张
wrap.onmouseout = function() {
timer = setInterval(autoPlay, 2000);
}
...
五、总结
设计一个样式美观又人性化的网页，除了具备扎实的专业知识，还需具备美学和人机工程学等相关知识，优秀的网页应具备以下几个特点:
1.简洁实用
尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；
2.使用方便
要满足使用者的要求，网页适合使用，显示出其功能美；
3.整体性好
围绕一个统一的目标设计，强调整体的功能性；
4.形象突出
尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。
5.交互式强
发挥网络的优势，想方设法使每个使用者都参与到其中来。
六、更多推荐
【关注作者|获取更多源码|优质文章】；Web前端网页制作、大学生毕业设计辅导、期末大作业辅导、模板源码、技术咨询等，有兴趣的联系我!
更多优质博客文章、网页模板点击以下链接查阅：
标签：css3,index,网页,香港旅游,list,timer,height,wrap From： https://blog.csdn.net/2401_90084105/article/details/144857331