首页分享 18. 大学生HTML期末大作业 ―【宠物用品商城网页】 Web前端网页制作 html+css+js

18. 大学生HTML期末大作业 ―【宠物用品商城网页】 Web前端网页制作 html+css+js

来源：萌宠菠菠乐园时间：2025-02-04 08:53

一、更多推荐

二、网页简介

三、网页文件

四、网页效果

五、代码展示

1.html

2.CSS

3.JS

六、总结

1.简洁实用

2.使用方便

3.整体性好

4.形象突出

5.交互式强

一、更多推荐

欢迎来到我的CSDN主页！Web前端网页制作、大学生期末大作业、课程设计、毕业设计、网页模版源码、学习资料等，更多优质博客文章、网页模板点击以下链接查阅：

仙女网页设计-CSDN博客

5000+完整代码，主题涵盖30+种类型:

二、网页简介

本实例应用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>

...

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);
}

}

...

六、总结

设计一个样式美观又人性化的网页，除了具备扎实的专业知识，还需具备美学和人机工程学等相关知识，优秀的网页应具备以下几个特点:

1.简洁实用

尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；

2.使用方便

要满足使用者的要求，网页适合使用，显示出其功能美；

3.整体性好

围绕一个统一的目标设计，强调整体的功能性；

4.形象突出

尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。

5.交互式强

发挥网络的优势，想方设法使每个使用者都参与到其中来。

......

18. 大学生HTML期末大作业 ―【宠物用品商城网页】 Web前端网页制作 html+css+js

二、网页简介

三、网页文件

四、网页效果