672.大学生HTML期末大作业 —【清新的汉服文化精品网页(9页)】 Web前端网页制作 html5+css3+js
目录
欢迎来到我的CSDN主页！您的支持是我创作的动力！Web前端网页制作、网页完整代码、大学生期末大作业案例模板完整代码、技术交流等，有兴趣的联系我交流学习!更多优质博客文章、网页模板点击以下链接查阅：全网最全的的网页案例集合，5000+套网页完整代码，主题涵盖40+种类型，网页案例持续更新中,需要的文章末尾添加我微信...
【建议收藏】40种主题网页案例大集合 Web前端 大学生期末大作业 HTML+CSS+JS-CSDN博客
一、网页简介
本实例应用html5+css3+js： 导航菜单、图片轮翻、三级页面、搜索、注册、登录、视频等。本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。
二、网页文件
本网页共包含9个页面：
三、网页效果
以下是本篇文章正文内容，下面案例仅供参考（节选示例）：
四、代码展示
1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link type="text/css" rel="stylesheet" href="css/css.css" />
<script src="js/banner.js" type="text/jscript"></script>
<title>汉服</title>
</head>
<body style=" background:#fff;">
<!--顶部-->
<header>
<div class="header">
<a href="index.html">首页</a>
<a href="nanzhuang.html">男装</a>
<a href="nvzhuang.html">女装</a>
<a href="chanping.html">精品推荐</a>
<a href="shipintuijian.html">视频推荐</a>
<a href="zhuce.html">注册</a>
<a href="denglu.html">登录</a>
</div>
<div class="sous">
<input type="text" name="search" class="ssinpt" value="在这里搜索...">
<div id="search"></div>
</div>
</header>
<div class="banner">
<div class="wrap" id="wrap">
<ul id="pic">
<li><img src="images/01.jpg" alt=""></li>
<li><img src="images/02.jpg" alt=""></li>
<li><img src="images/03.jpg" alt=""></li>
</ul>
<ol id="list">
<li class="on">1</li>
<li>2</li>
<li>3</li>
</ol>
</div>
</div>
<!--内容-->
<div class="width">
<div class="con">
<h3 class="em">为您甄选</h3>
<div class="lt pic"> <img src="images/1.png" width="300px"/> <br>
</div>
<div class="rt text">
<p>汉服是从“黄帝尧舜垂衣裳而天下治”的衣裳发展而来。古老的天子六服、王后六服、儒服、剑服位于汉服体系的中心，沿袭四千多年。冕服是汉服的根源，也最能体现“绝地天通”的华夏信仰，更是汉人千年来祭神祀祖，与天地交通的吉服。 <br> <br>
<p> 天子六服和王后六服相加不仅象征天之大数十二，也分别代表乾坤天地、三辰五行之天道，以分别代表了汉服的两种基础服制——衣裳制和深衣制。 </p> <br>
汉服是汉民族传承四千多年的传统民族服装，是四书五经中的冠服系统，以儒家经典《诗经》《尚书》《周礼》《礼记》《易经》《春秋》，大唐《开元礼》、二十四史舆服志和其他经史子集为基础继承下来的礼仪文化的必要组成。汉服体系展现了华夏文明的等级文化、亲属文化、政治文化、重嫡轻庶、重长轻幼以及儒家的仁义思想。在中国古代的宗法文化背景下，服饰具有昭名分、辨等威、别贵贱的作用，为吉礼、凶礼、宾礼、军礼、嘉礼的礼服。除去国家大事的礼仪，普通汉人的家礼包括冠婚丧祭四礼。四书五经对汉服礼服有详细的描述。</p>
</div>
<div class="clear"></div>
<h3 class="em">爆款推荐</h3>
<ul>
<li><a href="nvzhuangxiangqing.html"><img src="images/2.png"/>
<p>女装秋季精选1</p>
</a></li>
<li><a><img src="images/3.png"/>
<p>女装秋季精选2</p>
</a></li>
<li><a><img src="images/4.png"/>
<p>女装秋季精选3</p>
</a></li>
<div class="clear"></div>
</ul>
<ul>
...
2.CSS
代码如下（节选示例）：
/*通用类*/
* {
margin: 0;
padding: 0;
}
body {
margin: 0 auto;
line-height: 21px
}
img {
border: none;
display: block;
min-width: 100%;
}
a {
cursor: pointer;
color: #333;
text-decoration: none;
outline: none;
}
em {
font-style: normal;
}
.lt {
float: left;
}
.rt {
float: right;
}
ul, li, h1, h2, h3, p {
padding: 0;
margin: 0;
list-style: none
}
ul {
list-style-type: none;
}
.clear {
clear: both
}
/*header 开始*/
.width {
width: 1200px;
margin: 0 auto;
}
header {
width: 100%;
height: 70px;
background:#f7f7f7
}
.header {float: left;
margin-left: 150px;
text-align: center;
display: block;
}
.header a {
height: 70px;
line-height: 70px;
display: inline-block;
text-align: center;
color: #000;
font-size: 18px;
margin: 0 30px;
}
.header a:hover {
color: #1c96c2;
}
.right {
width: 340px;
height: 50px;
float: right;
padding-top: 26px;
}
.sous {
font-size: 14px;
float: right;margin-right:157px;
margin-top: 10px;
}
.ssinpt {
width: 215px;
height: 46px;
float: left;
background: url("../images/sous.png")no-repeat;
border: none;
color: #2c1702;
padding-left: 30px;
}
...
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 = -382 * curIndex + "px";
index = curIndex;
}
// 鼠标划过整个容器时停止自动播放
wrap.onmouseover = function() {
clearInterval(timer);
}
// 鼠标离开整个容器时继续播放至下一张
wrap.onmouseout = function() {
timer = setInterval(autoPlay, 2000);
}
// 遍历所有数字导航实现划过切换至对应的图片
for (var i = 0; i < list.length; i++) {
list[i].id = i;
list[i].onmouseover = function() {
clearInterval(timer);
changeImg(this.id);
}
}
}
...
五、总结
设计一个样式美观又人性化的网页，除了具备扎实的专业知识，还需具备美学和人机工程学等相关知识，优秀的网页应具备以下几个特点:
1.简洁实用
尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；
2.使用方便
要满足使用者的要求，网页适合使用，显示出其功能美；
3.整体性好
围绕一个统一的目标设计，强调整体的功能性；
4.形象突出
尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。
5.交互式强
发挥网络的优势，想方设法使每个使用者都参与到其中来。
六、更多推荐
更多优质博客文章、完整代码案例模板，点击以下链接查阅：
Web前端网页制作、大学生期末大作业、课程设计、毕业设计、完整代码案例模板、Web前端网页定制、教学课程、学习资料等，有需要的添加以下微信交流👇🏻👇🏻👇🏻
更多推荐
23
0- 0
已为社区贡献24条内容
所有评论(0)