基于html宠物用品商城项目的设计与实现(学生网页设计作业源码)

🌩️ 精彩专栏推荐👇🏻👇🏻👇🏻
💂 作者主页: 【进入主页—🚀获取更多源码】
🎓 web前端期末大作业：【📚HTML5网页期末作业 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】

📂文章目录

二、📚网站介绍
三、🔗网站效果
- ▶️1.视频演示
- 🧩 2.图片演示
四、💒 网站代码
- 🧱HTML结构代码
- 🏠CSS样式代码
五、🎁更多源码

二、📚网站介绍

📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

📓网站程序方面：计划采用最新的网页编程语言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-888888a>p>
		          <p><a href="#"><img src="img/tel2.png">传真：400-888888a>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;
}

五、🎁更多源码

1.如果我的博客对你有帮助 请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！

2.💗【👇🏻👇🏻👇🏻🉑关注我| 获取更多源码】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板、大学生毕业HTML模板、等!

📣以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻

相关阅读:
大数据平台开发经验
 Jmeter常用参数化技巧总结
 SQL语法知识回顾
 advanced installer 做包教程
 【C++】入门三
 通过容器启动QAnything知识库问答系统
 redis极速的奥秘
 产品经理基础--07用户端产品设计
 三丁基-巯基膦烷「tBuBrettPhos Pd(allyl)」OTf)，1798782-17-8
Redis设计与实现（五）| Sentinel哨兵
原文地址：https://blog.csdn.net/qq_365392777/article/details/127029756