目录
欢迎光临仙女的网页世界！这里有Web前端网页制作的各行各业的案例，样式齐全新颖，并持续更新！感谢CSDN，提供了这么好的知识学习、技术交流的平台，让我们在这里相遇，小伙伴们，来吧，让我们一起开启Web前端网页制作的奇妙之旅！
说起Web前端，大学开启这扇技术之门以来，一切起始于兴趣爱好和专业钻研。自16年中大研究生毕业步入社会工作以来，才真正开启了这段奇妙的旅行！在一次次需求分析、成品交付和客户服务的过程中，进行了一次又一次的知识应用的实践和验证。学以致用，实践出真知！从最初的Web前端的迷途小书童到如今的技术专家，多年的服务客户和服务大学生的实践经验，早就驾轻就熟！
奇妙之处在于：当你得到客户的认可、公司的赞赏和同事的敬仰，尤其是业余时间为广大的大学生提供各种各样的帮助和指引，学弟学妹们一致好评，认为学姐是他们的榜样的时候，你会发现，知识的应用除了体现自身价值，还能实现自我满足！这种感觉是相当奇妙的！
我在CSDN的奇妙旅行，除了学习其他知识和持续发布优质的网页实例之外，后续时间允许的情况下，我会发布前端相关知识的学习和应用的教程。目前提供的服务类型包括：Web前端网页制作的专题研究辅导、网页定制、大学生课程作业辅导、毕设辅导、网页模板源码、教程资料、技术咨询，以及其他有偿或无偿的服务。如有需要，欢迎随时咨询！能满足你们所需，是我的荣幸！
非常感谢大家的关注和点赞，你们的关注和点赞是我持续创作的动力，谢谢！
一、网页概述
本实例应用html+css+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.交互式强
发挥网络的优势，想方设法使每个使用者都参与到其中来。
六、更多推荐
【关注作者|获取更多源码|优质文章】；Web前端网页制作、大学生毕业设计辅导、期末大作业辅导、模板源码、技术咨询，有兴趣的联系我!
您的支持是我创作的动力！看到这里就【点赞收藏博文】，Thanks！
更多优质博客文章、网页模板点击以下链接查阅：仙女网页设计-CSDN博客。
1377
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
