基于html宠物用品商城项目的设计与实现(学生网页设计作业源码)
原创
©著作权归作者所有：来自51CTO博客作者@码出未来④-web网页设计的原创作品，请联系作者获取转载授权，否则将追究法律责任
📂文章目录
二、📚网站介绍
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。
📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。
📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。
📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
📙网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）📜html文件包含：其中index.html是首页、其他html为二级页面；
（2）📑 css文件包含：css全部页面样式,文字滚动, 图片放大等；
（3）📄 js文件包含：js实现动态轮播特效, 表单提交, 点击事件等等（个别网页中运用到js代码）。
三、🔗网站效果
▶️1.视频演示
U13SJ- 宠物用品商城4js（20页）
🧩 2.图片演示
四、💒 网站代码
🧱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><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 class="hot"><a href="lianxi.html">联系我们</a></li>
</ul>
</div>
<div class="main">
<div class="div4">
<img src="img/img9.jpg" />
</div>
<div class="dytitle">联系我们</div>
<div class="lxbox2">
<form action="contact2.html">
<div class="shang">
<div class="bx1">
<h2>姓名：</h2>
<input class="input" value="请输入您的姓名" onfocus="if(value=='请输入您的姓名')value=''" onblur="if(!value)value='请输入您的姓名'" name="keyword">
</div>
<div class="bx1">
<h2>电话：</h2>
<input class="input" value="请输入您的电话" onfocus="if(value=='请输入您的电话')value=''" onblur="if(!value)value='请输入您的电话'" name="keyword">
</div>
<div class="bx1">
<h2>邮箱：</h2>
<input class="input" value="请输入邮箱" onfocus="if(value=='请输入邮箱')value=''" onblur="if(!value)value='请输入邮箱'" name="keyword">
</div>
</div>
<div class="xia">
<h2>留言：</h2>
<textarea class="textr">请在此处详细描述其他需求 </textarea>
<button class="btn2" type="submit">提交</button>
</div>
</form>
</div>
</div>
<div class="foot">
<div class="foot-ner">
<div class="bx1">
<h1>支付方式</h1>
<p><a href="kuaijie.html">快捷支付</a></p>
<p><a href="huodao.html">货到付款</a></p>
<p><a href="fapiao.html">发票说明</a></p>
</div>
<div class="bx2">
<h1>关于我们</h1>
<p><a href="pinpai.html">品牌故事</a></p>
<p><a href="hezuo.html">品牌合作</a></p>
<p><a href="pinzhi.html">品质保障</a></p>
</div>
<div class="bx3">
<img src="img/footlogo.png">
</div>
<div class="bx4">
<h1>友情链接</h1>
<p><a href="https://www.alibabagroup.com/">阿里巴巴集团</a></p>
<p><a href="https://www.taobao.com/">淘宝网</a></p>
<p><a href="https://www.tmall.com/">天猫</a></p>
<p><a href="https://ju.taobao.com/">聚划算</a></p>
</div>
<div class="bx5">
<h1>联系我们</h1>
<p><a href="#"><img src="img/tel.png">电话：400-888888</a></p>
<p><a href="#"><img src="img/tel2.png">传真：400-888888</a></p>
<p><a href="#"><img src="img/dizhi.png">地址：XXXX路359号3楼</a></p>
<p><a href="#"><img src="img/liuyan.png">留言：咨询与意见反馈</a></p>
</div>
</div>
</div>
<div class="banquan">Copyright ©宠物用品商城版权所有 </div>
</body>
</html>
🏠CSS样式代码
@charset "utf-8";
/* CSS Document */
body {
margin: 0 auto;
font-size: 16px;
font-family: "宋体";
line-height: 22px;
color: #131313;
}
.gright2 h2 span a {
color: #131313;
text-decoration: underline;
font-size: 14px;
}
.gright2 p {
height: 27px;
line-height: 27px;
font-size: 14px;
padding-left: 45px;
}
.gright2 h3 {
height: 35px;
line-height: 35px;
padding-left: 45px;
font-size: 20px;
color: #ed3029;
font-weight: normal;
}
.lxbox2 h2 {
height: 40px;
line-height: 40px;
font-size: 14px;
}
.lxbox2 .bx1 .input {
width: 194px;
height: 30px;
border: #bbb8b5 1px solid;
padding-left: 10px;
font-size: 12px;
color: #bbb8b5;
}
.textr {
width: 1040px;
height: 174px;
border: #bbb8b5 1px solid;
padding-left: 10px;
font-size: 12px;
color: #bbb8b5;
line-height: 30px;
margin-bottom: 25px;
}
.btn2 {
width: 204px;
height: 50px;
background: #040000;
line-height: 50px;
text-align: center;
font-size: 14px;
color: #FFFFFF;
border: none;
}
