673.大学生HTML期末大作业 —【潮牌服装商城网页(8页)】 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主流浏览器浏览。
二、网页文件
本网页共包含8个页面：
三、网页效果
以下是本篇文章正文内容，下面案例仅供参考（节选示例）：
四、代码展示
1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>服装商城</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="top">
<div class="top-ner">
<div class="welcome">欢迎您登录潮流品牌服装商城！</div>
<div class="dlzc">
<a href="login.html">登录</a>|
<a href="zhuce.html">注册</a>
</div>
</div>
</div>
<div class="top2">
<div class="logo">
<a href="index.html"><img src="img/logo.jpg" /></a>
</div>
<div class="sous">
<form>
<div class="fd"><img src="img/sous.jpg"></div>
<input class="input" type="text" value="品牌服装" />
<button class="btn" type="submit">搜索</button>
</form>
</div>
<div class="gouwuche">
购物车：0件
</div>
</div>
<div id="nav">
<ul>
<li class="hot"><a href="index.html">首页</a></li>
<li><a href="pinpainvzhuang.html">品牌女装</a></li>
<li><a href="remaituijian.html">热卖推荐</a></li>
<li><a href="shipintuijian.html">视频推荐</a></li>
</ul>
</div>
<div class="box" id="box">
<div class="inner">
<!--轮播图-->
<ul>
<li><a href="#"><img src="img/banner1.jpg" alt="" /></a></li>
<li><a href="#"><img src="img/banner2.jpg" alt="" /></a></li>
<li><a href="#"><img src="img/banner3.jpg" alt="" /></a></li>
</ul>
<ol class="bar">
</ol>
<!--左右焦点-->
<div id="arr">
<span id="left"> < </span>
<span id="right"> > </span>
</div>
</div>
</div>
<script src="js/banner.js" type="text/javascript"></script>
<div class="main">
<div class="title">
<h2>合作品牌 </h2>
</div>
<div class="box1">
<div class="box1-left"><img src="img/i01.jpg"></div>
<div class="box1-right">
<div class="bx">
<img class="suotu" src="img/i03.jpg" />
</div>
<div class="bx">
<img class="suotu" src="img/i04.jpg" />
</div>
<div class="bx">
<img class="suotu" src="img/i05.jpg" />
</div>
<div class="bx">
<img class="suotu" src="img/i06.jpg" />
</div>
...
2.CSS
代码如下（节选示例）：
@charset "utf-8";
/* CSS Document */
body {
margin: 0 auto;
font-size: 16px;
font-family: "宋体";
line-height: 22px;
color: #131313;
}
div,p,input,ul,li,h1,h2,h3,h4,h5,h6,dl,dt,dd {
height: auto;
margin: 0;
padding: 0;
vertical-align: middle;
list-style: none;
}
img {
border: 0;
margin: 0;
padding: 0;
}
a {
color: #131313;
text-decoration: none;
}
a:link {
color: #333;
}
a:hover {
color: #d5142a;
text-decoration: none;
overflow: hidden;
}
/*---网页开始-----*/
.top {
height: 45px;
background: #eae9e9;
width: 100%;
}
.top-ner {
width: 1300px;
height: 45px;
margin: 0 auto;
}
.welcome {
line-height: 45px;
width: 500px;
float: left;
}
.dlzc {
width: 120px;
height: 45px;
line-height: 45px;
float: right;
}
.dlzc a {
margin: 0px 10px;
}
.top2 {
width: 1300px;
height: 133px;
margin: 0 auto;
}
...
3.JS
代码如下（节选示例）：
/**
*
* @param id 传入元素的id
* @returns {HTMLElement | null} 返回标签对象，方便获取元素
*/
function my$(id) {
return document.getElementById(id);
}
//获取各元素，方便操作
var box=my$("box");
var inner=box.children[0];
var ulObj=inner.children[0];
var list=ulObj.children;
var olObj=inner.children[1];
var arr=my$("arr");
var imgWidth=inner.offsetWidth;
var right=my$("right");
var pic=0;
//根据li个数，创建小按钮
for(var i=0;i<list.length;i++){
var liObj=document.createElement("li");
olObj.appendChild(liObj);
liObj.innerText=(i+1);
liObj.setAttribute("index",i);
//为按钮注册mouseover事件
liObj.onmouseover=function () {
//先清除所有按钮的样式
for (var j=0;j<olObj.children.length;j++){
olObj.children[j].removeAttribute("class");
}
this.className="current";
pic=this.getAttribute("index");
animate(ulObj,-pic*imgWidth);
}
}
//设置ol中第一个li有背景颜色
olObj.children[0].className = "current";
//克隆一个ul中第一个li,加入到ul中的最后=====克隆
ulObj.appendChild(ulObj.children[0].cloneNode(true));
var timeId=setInterval(onmouseclickHandle,2000);
//左右焦点实现点击切换图片功能
box.onmouseover=function () {
arr.style.display="block";
clearInterval(timeId);
};
box.onmouseout=function () {
arr.style.display="none";
timeId=setInterval(onmouseclickHandle,2000);
};
right.onclick=onmouseclickHandle;
function onmouseclickHandle() {
//如果pic的值是5,恰巧是ul中li的个数-1的值,此时页面显示第六个图片,而用户会认为这是第一个图,
//所以,如果用户再次点击按钮,用户应该看到第二个图片
if (pic == list.length - 1) {
//如何从第6个图,跳转到第一个图
pic = 0;//先设置pic=0
ulObj.style.left = 0 + "px";//把ul的位置还原成开始的默认位置
}
pic++;//立刻设置pic加1,那么此时用户就会看到第二个图片了
animate(ulObj, -pic * imgWidth);//pic从0的值加1之后,pic的值是1,然后ul移动出去一个图片
//如果pic==5说明,此时显示第6个图(内容是第一张图片),第一个小按钮有颜色,
if (pic == list.length - 1) {
//第五个按钮颜色干掉
olObj.children[olObj.children.length - 1].className = "";
//第一个按钮颜色设置上
olObj.children[0].className = "current";
} else {
//干掉所有的小按钮的背景颜色
for (var i = 0; i < olObj.children.length; i++) {
olObj.children[i].removeAttribute("class");
}
olObj.children[pic].className = "current";
}
}
...
五、总结
设计一个样式美观又人性化的网页，除了具备扎实的专业知识，还需具备美学和人机工程学等相关知识，优秀的网页应具备以下几个特点:
1.简洁实用
尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；
2.使用方便
要满足使用者的要求，网页适合使用，显示出其功能美；
3.整体性好
围绕一个统一的目标设计，强调整体的功能性；
4.形象突出
尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。
5.交互式强
发挥网络的优势，想方设法使每个使用者都参与到其中来。
六、更多推荐
更多优质博客文章、完整代码案例模板，点击以下链接查阅：
Web前端网页制作、大学生期末大作业、课程设计、毕业设计、完整代码案例模板、Web前端网页定制、教学课程、学习资料等，有需要的添加以下微信交流👇🏻👇🏻👇🏻
更多推荐
14
0- 0
已为社区贡献24条内容
所有评论(0)