385.大学生HTML5期末大作业 —【宠物用品商城网站(20页)】 Web前端网页制作 html5+css3+js
目录
一、网页简介
二、网页文件
三、网页效果
四、代码展示
1.html
2.CSS
3.JS
五、总结
1.简洁实用
2.使用方便
3.整体性好
4.形象突出
5.交互式强
欢迎来到我的CSDN主页！您的支持是我创作的动力！Web前端网页制作、网页完整代码、大学生期末大作业案例模板完整代码、技术交流等，有兴趣的联系我交流学习!更多优质博客文章、网页模板点击以下链接查阅：
仙女网页设计-CSDN博客
5000+网页案例完整代码，主题涵盖30+种类型:
一、网页简介
本实例应用html5+css3+js： 导航菜单、图片轮翻效果、三级页面、购物车、搜索、注册页面、登录页面等。适用于大学生网页课程作业设计、公司网页制作等。本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。
二、网页文件
本网页实例共包含20个页面：
三、网页效果
以下是本篇文章正文内容，下面案例仅供参考（节选示例）：
四、代码展示
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>
<a href="gouwuche.html">
<div class="gouwuche">
购物车：0件
</div>
</a>
</div>
<div id="nav">
<ul>
<li class="hot"><a href="index.html">首页</a></li>
<li><a href="list.html">所有商品</a></li>
<li><a href="zhinan.html">购物指南</a></li>
<li><a href="maoliang.html">猫零食</a></li>
<li><a href="myongpin.html">猫用品</a></li>
<li><a href="gouliang.html">狗零食</a></li>
<li><a href="gyongpin.html">狗用品</a></li>
<li><a href="lianxi.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>猫粮和零食 <span>Cat food and snacks</span></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 class="bx-rig">
<h1>go无谷猫粮</h1>
<p>净含量：7.6kg</p>
<h2>￥386</h2>
<span><a href="#"><img src="img/i02.jpg"></a></span>
</div>
</div>
<div class="bx">
<img class="suotu" src="img/i04.jpg" />
<div class="bx-rig">
<h1>Acana猫粮</h1>
<p>净含量：5.4kg</p>
<h2>￥540</h2>
<span><a href="#"><img src="img/i02.jpg"></a></span>
</div>
</div>
<div class="bx">
<img class="suotu" src="img/i05.jpg" />
<div class="bx-rig">
<h1>亿迪猫粮</h1>
<p>净含量：5.0kg</p>
<h2>￥41.9</h2>
<span><a href="#"><img src="img/i02.jpg"></a></span>
</div>
</div>
<div class="bx">
<img class="suotu" src="img/i06.jpg" />
<div class="bx-rig">
<h1>皇家猫粮</h1>
<p>净含量：2.0kg</p>
<h2>￥124.9</h2>
<span><a href="#"><img src="img/i02.jpg"></a></span>
</div>
</div>
<div class="bx">
<img class="suotu" src="img/i07.jpg" />
<div class="bx-rig">
<h1>伟嘉猫粮</h1>
<p>净含量：10.0kg</p>
<h2>￥209.9</h2>
<span><a href="#"><img src="img/i02.jpg"></a></span>
</div>
</div>
<div class="bx">
<img class="suotu" src="img/i08.jpg" />
<div class="bx-rig">
<h1>妙多乐猫粮</h1>
<p>净含量：10.0kg</p>
<h2>￥275.0</h2>
<span><a href="#"><img src="img/i02.jpg"></a></span>
</div>
</div>
</div>
</div>
<div class="ad01"><img src="img/img9.jpg"></div>
<div class="title">
<h2>猫用品 <span>Cat supplies</span></h2>
</div>
<div class="box1">
<div class="box1-left"><img src="img/i09.jpg"></div>
<div class="box1-right">
<div class="shang">
<div class="bx">
<img class="suotu" src="img/i013.jpg" />
<div class="bx-rig">
<h1>长杆逗猫棒</h1>
<p>商品毛重：10g</p>
<h2>￥12.0</h2>
<span><a href="#"><img src="img/i02.jpg"></a></span>
</div>
</div>
<div class="bx">
<img class="suotu" src="img/i014.jpg" />
<div class="bx-rig">
<h1>绳编小球</h1>
<p>商品毛重：39g</p>
<h2>￥11.9</h2>
<span><a href="#"><img src="img/i02.jpg"></a></span>
</div>
</div>
<div class="bx">
<img class="suotu" src="img/i015.jpg" />
<div class="bx-rig">
<h1>猫爬架大型</h1>
<p>商品毛重：12kg</p>
<h2>￥149</h2>
<span><a href="#"><img src="img/i02.jpg"></a></span>
</div>
</div>
</div>
<div class="ad02"><img src="img/i010.jpg"></div>
</div>
</div>
<div class="title">
<h2>狗粮和零食 <span>Dog food and snacks</span></h2>
</div>
<div class="box1">
<div class="box1-left"><img src="img/i011.jpg"></div>
<div class="box1-right">
<div class="bx">
<img class="suotu" src="img/i016.jpg" />
<div class="bx-rig">
<h1>宝路狗粮</h1>
<p>净含量：7.5kg</p>
<h2>￥139.9</h2>
<span><a href="#"><img src="img/i02.jpg"></a></span>
</div>
</div>
<div class="bx">
<img class="suotu" src="img/i017.jpg" />
<div class="bx-rig">
<h1>朗亲狗粮</h1>
<p>净含量：10.0kg</p>
<h2>￥69.9</h2>
<span><a href="#"><img src="img/i02.jpg"></a></span>
</div>
</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;
}
.logo {
width: 263px;
height: 110px;
float: left;
margin-top: 20px;
}
.sous {
width: 325px;
height: 40px;
border: #eaeaea 1px solid;
margin-left: 254px;
margin-top: 50px;
float: left;
}
.fd {
width: 35px;
height: 35px;
float: left;
}
.input {
width: 218px;
height: 37px;
color: #5d5c5c;
float: left;
border: none;
}
.btn {
width: 72px;
height: 40px;
background: #4f4e4e;
line-height: 40px;
text-align: center;
float: left;
color: white;
border: none;
}
.gouwuche {
width: 102px;
height: 52px;
float: right;
margin-top: 45px;
background: url(../img/gwc.jpg) no-repeat;
padding-left: 74px;
line-height: 52px;
font-size: 16px;
color: #fdfdfd;
}
...
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.οnmοuseοver=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.οnmοuseοver=function () {
arr.style.display="block";
clearInterval(timeId);
};
box.οnmοuseοut=function () {
arr.style.display="none";
timeId=setInterval(onmouseclickHandle,2000);
};
right.οnclick=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";
}
}
left.οnclick=function () {
if (pic==0){
pic=list.length-1;
ulObj.style.left=-pic*imgWidth+"px";
}
pic--;
animate(ulObj,-pic*imgWidth);
for (var i = 0; i < olObj.children.length; i++) {
olObj.children[i].removeAttribute("class");
}
//当前的pic索引对应的按钮设置颜色
olObj.children[pic].className = "current";
};
...
五、总结
设计一个样式美观又人性化的网页，除了具备扎实的专业知识，还需具备美学和人机工程学等相关知识，优秀的网页应具备以下几个特点:
1.简洁实用
尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；
2.使用方便
要满足使用者的要求，网页适合使用，显示出其功能美；
3.整体性好
围绕一个统一的目标设计，强调整体的功能性；
4.形象突出
尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。
5.交互式强
发挥网络的优势，想方设法使每个使用者都参与到其中来。
更多优质博客文章、完整代码案例模板，点击以下链接查阅：
仙女网页设计-CSDN博客
Web前端网页制作、大学生期末大作业、课程设计、毕业设计、完整代码案例模板、Web前端网页定制、教学课程、学习资料等，有需要的添加以下微信交流
相关知识
大学生网页设计制作作业实例代码 (全网最全,建议收藏) HTML+CSS+JS
HTML5期末大作业：宠物网站设计——布偶猫(7页)带留言板 HTML+CSS+JavaScript web结课作业的源码 web网页设计实例作业 html大学生网站开发实践作业
HTML5期末大作业：宠物网站设计——布偶猫(7页)带留言板 HTML+CSS+JavaScript web结课作业的源码 web网页设计实例作业 html大学生网站开发实践作业...
HTML5期末大作业：动物宠物主题网站设计——宠物网(8页)HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 web学生网页设计作业源码
宠物狗狗网站 网页设计 html源码 大作业
宠物商店宠物网站 网页设计 html源码 大作业
HTML5期末大作业：动物网站设计——宠物狗(10页) HTML+CSS+JavaScript 大学生静态网页设计 dw宠物网页设计 狗狗网页设计html web课程设计网页规划与设计
HTML5期末大作业：宠物狗狗主题——好宠之家(5页) HTML+CSS+JavaScript 学生个人HTML代码 学生网页课程设计期末作业下载 web网页设计制作成品
HTML5期末大作业：宠物网站设计——蓝色版爱宠之家带留言板宠物(5页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计
HTML+CSS+JS宠物商城网页设计期末课程大作业 web前端开发技术 web课程设计 网页规划与设计
网址: 385.大学生HTML5期末大作业 —【宠物用品商城网站(20页)】 Web前端网页制作 html5+css3+js https://m.mcbbbk.com/newsview923535.html
| 上一篇: 欧美“宠物奴”撑起的千亿美元大市 |
下一篇: 非遗消费上C位，宠物玩具卖得火 |
