目录
一、网页概述
本实例应用html5+css3+js：div+css页面布局、图片轮翻、三级页面、下拉菜单、系统实时时间、jQuery选项卡、jQuery动画交互、视频、注册、登录页面等。本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。
二、网页文件
本网页共包含8个页面：
三、网页效果
以下是本篇文章正文内容，下面案例仅供参考（节选示例）：
四、代码展示
1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首页</title>
<link rel="stylesheet" href="css/index.css" />
<script type="text/javascript" src="js/jquery1.min.js" ></script>
<script type="text/javascript" src="js/jquery.superslide.2.1.1.js" ></script>
<script type="text/javascript" src="js/index.js" ></script>
<script type="text/javascript" src="js/systemdate.js" ></script>
</head>
<body>
<!--header-->
<div class="headerWrap">
<div class="header w1200 cleafix">
<!--logo-->
<div class="logo fl"><img src="picture/logo.jpg"></div>
<!--nav-->
<ul id="nav" class="nav clearfix">
<li class="nLi on">
<h3><a href="Index.html">首页</a></h3>
</li>
<li class="nLi ">
<h3><a href="FYGS.html">非遗概述</a></h3>
</li>
<li class="nLi">
<h3><a href="CTMS.html">非遗文化</a></h3>
<ul class="sub">
<li><a href="CTMS.html">传统美食</a></li>
<li><a href="CTGY.html">传统工艺</a></li>
<li><a href="CTJQ.html">传统节庆</a></li>
<li><a href="CTYS.html">传统艺术</a></li>
</ul>
</li>
<li class="nLi">
<h3><a href="FYZS.html">非遗展示</a></h3>
</li>
<li class="nLi">
<h3><a href="Login.html">注册登录</a></h3>
</li>
</ul>
</div>
</div>
<div id ="datetime"></div>
<!--banner-->
<div class="slideBox">
<div class="hd">
<ul><li></li><li></li><li></li><li></li><li></li></ul>
</div>
<div class="bd">
<ul>
<li><a href="#"><img src="picture/banner1.jpg" /></a></li>
<li><a href="#"><img src="picture/banner2.jpg" /></a></li>
<li><a href="#"><img src="picture/banner3.jpg" /></a></li>
<li><a href="#"><img src="picture/banner4.jpg" /></a></li>
<li><a href="#"><img src="picture/banner5.jpg" /></a></li>
</ul>
</div>
</div>
<!--页面主体部分-->
<div class="mainBox">
<div class="main w1200">
<div class="mainTitle">
<h2>非遗物质文化遗产</h2>
<p>在中国，非物质文化遗产是指各族人民世代相传，并视为其文化遗产组成部分的各种传统文化表现形式，以及与传统文化表现形式相关的实物和场所。非物质文化遗产是文化多样性中最具活力的重要组成部分，是人类文明的结晶和最宝贵的财富，承载着人类的智慧、人类历史的文明与辉煌。截至2023年12月，具有中国特色的非物质文化遗产一共认定10万余项。</p>
</div>
</div>
</div>
...
2.CSS
代码如下（节选示例）：
/** reset **/
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td, img{border:medium none;margin: 0;padding: 0;}
body,button, input, select, textarea{font: 12px/1.5 'Microsoft Yahei',tahoma, Srial, helvetica, sans-serif;}
h1, h2, h3, h4, h5, h6{font-size: 100%;font-weight: normal;}
em{font-style:normal;}
ul, ol{list-style: none;}
a{
text-decoration: none;color:#333;
text-decoration: none;
-moz-transition: all 0.3s ease-in;
-webkit-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
}
a:hover{
text-decoration: none;
-moz-transition: all 0.3s ease-in;
-webkit-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
}
/*按钮默认样式 去掉*/
input[type="button"], input[type="submit"], input[type="reset"] {
-webkit-appearance: none;
border-radius: 0;
}
.button{ border-radius: 0; }
input{font-family: "微软雅黑";}
textarea{font-family: "微软雅黑";}
img{border:0px; outline-width:0px; vertical-align:top;}
.cleafix:after{clear:both;content:"\200B";display:block;height:0;}
.cleafix{*zoom:1;}
.fl { float:left;}
.fr { float:right;}
.w1200{ width:1200px; margin:0 auto;}
.hide { display:none;}
/*header*/
.headerWrap{
width: 100%;
height: auto;
position: relative;
z-index: 100;
}
.header{
position: relative;
height: auto;
}
/*logo*/
.header .logo{
padding: 50px 0;
}
.header .logo img{
display: flex;
margin-top: -40px;
width: 80px;
height: 80px;
}
/*nav*/
.nav {
float: right;
margin-right: 165px;
width: 535px;
height: 80px;
position: relative;
z-index: 1;
}
.nav a {
font-size: 14px;
color: #505050;
}
.nav .nLi {
width: 95px;
margin-right: 12px;
float: left;
position: relative;
display: inline;
}
.nav .nLi h3 {
width: 100%;
height: 80px;
line-height: 80px;
float: left;
}
...
3.JS
代码如下（节选示例）：
$(function(){
jQuery("#nav").slide({
type: "menu",
titCell: ".nLi",
targetCell: ".sub",
effect: "slideDown",
delayTime: 300,
triggerTime: 0,
returnDefault: true
});
//banner
jQuery(".slideBox").slide({
mainCell: ".bd ul",
effect: "leftLoop",
autoPlay: true
});
//图片轮播
jQuery(".picScroll-left").slide({
mainCell: ".bd ul",
autoPage: true,
effect: "leftLoop",
autoPlay: true,
vis: 5
});
jQuery(".server_b").slide({
mainCell: ".bd ul",
effect: "leftLoop",
autoPlay: true
});
$(".server_b .bd li div:last-child").css({
"float":"right"
});
//给元素动态加载class名称
window.οnlοad=function(){
$(".footer ul li:nth-child(2)").addClass("cur");
$(".footer ul li:last-child").addClass("cur1");
$(".accepBom ul li:nth-child(2n)").addClass("cur");
}
$(".show_bot ul li:nth-child(4n)").css({
"float":"right",
"margin-right":"0"
});
...
五、总结
设计一个样式美观又人性化的网页，除了具备扎实的专业知识，还需具备美学和人机工程学等相关知识，优秀的网页应具备以下几个特点:
1.简洁实用
尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；
2.使用方便
要满足使用者的要求，网页适合使用，显示出其功能美；
3.整体性好
围绕一个统一的目标设计，强调整体的功能性；
4.形象突出
尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。
5.交互式强
发挥网络的优势，想方设法使每个使用者都参与到其中来。
六、更多推荐
【关注作者|获取更多源码|优质文章】；Web前端网页制作、大学生毕业设计辅导、期末大作业辅导、模板源码、技术咨询等，有兴趣的联系我!
更多优质博客文章、网页模板点击以下链接查阅：