HTML网页期末课程大作业基于HTML仿淘宝电商网站项目的设计与实现企业网站制作

常见网页设计作业题材有个人、美食、公司、学校、旅游、电商、宠物、电器、茶叶、家居、酒店、舞蹈、动漫、服装、体育、化妆品、物流、环保、书籍、婚纱、游戏、节日、戒烟、电影、摄影、文化、家乡、鲜花、礼品、汽车、其他等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求都能满足你的需求。原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用。

⚽精彩专栏推荐👇🏻👇🏻👇🏻

❤ 【作者主页——🔥获取更多优质源码】

❤ 【学习资料/简历模板/面试资料/ 网站设计与制作】

❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例】

文章目录🌰

一、网页介绍📖
一、网页效果🌌
二、代码展示😈
- 1.HTML结构代码 🧱
- 2.CSS样式代码 🏠
三、个人总结😊
四、更多干货🚀

一、网页介绍📖

1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。

2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。

3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、音频元素、Flash，同时设计了Logo（源文件）所需的知识点。

一、网页效果🌌

在这里插入图片描述

二、代码展示😈

1.HTML结构代码 🧱

代码如下（示例）：以下仅展示部分代码供参考~


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/lunbo.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/cookie.js" type="text/javascript" charset="utf-8"></script>
		<title>淘宝首页</title>
	</head>
	<body>
		<div class="top">
			<div class="top1">
				<div class="top-left">
					<form>
						<div>
							<span>中国大陆</span>
								<ul>
									<li><a href="">全球</a></li>
									<li>中国香港</li>
									<li>台湾</li>
									<li>澳门</li>
									<li>香港</li>
									<li>新加坡</li>
									<li>韩国</li>
								</ul>
						</div>
					</form>
">聚划算</a></li>
									<li><a href="">飞猪</a></li>
									<li><a href="">女装</a></li>
									<li><a href="">男装</a></li>
									<li><a href="">内衣</a></li>
									<li><a href="">鞋靴</a></li>
									<li><a href="">箱包</a></li>
								</ul>
							</div>
							<div class="four-box">
								<h3>精彩推荐集</h3>
								<ul>
									<li><a href="">余额宝</a></li>
									<li><a href="">大牌捡包</a></li>
									<li><a href="">淘公仔</a></li>
									<li><a href="">浏览器</a></li>
									<li><a href="">大众</a></li>
									<li><a href="">女装</a></li>
									<li><a href="">男装</a></li>
									<li><a href="">内衣</a></li>
									<li><a href="">鞋靴</a></li>
									<li><a href="">箱包</a></li>
								</ul>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
		<div class="logo">
			<h1><a href="http://127.0.0.1:8020/淘宝首页/index.html?__hbt=1550718750554#" target="_blank"><img src="img/logo.jpg"/></a></h1>
			<div class="logo-center">
				<ul class="lc1">
					<li><a href="#">宝贝</a></li>
					<li><a href="http://127.0.0.1:8020/淘宝首页/list.html?__hbt=1551317751109" target="_blank">天猫</a></li>
					<li><a href="#">店铺</a></li>
				</ul>
				<form>
					<input class="inp1" type="text" value=""/>
					<input class="inp2" type="text" placeholder="请输入你要输入的物品："/>
					<input class="inp3" type="text" value=""/>
					<input class="inp4" type="submit" value="搜索"/>
					<ul id="list">
					
				    </ul>
				</form>

										<span></span>
										<span></span>
								</div>
								<ul class="left-bottom">
									<li><img src="img/103.jpg"/></li>
									<li><img src="img/105.jpg"/></li>
									<li><img src="img/103.jpg"/></li>
									<li><img src="img/105.jpg"/></li>
									<li><img src="img/103.jpg"/></li>
									<li><img src="img/105.jpg"/></li>
								</ul>
							</div>
						</div>
						<div class="right">
							<ul>
								<li><a href="http://127.0.0.1:8020/淘宝首页/list.html?__hbt=1551317751109" target="_blank"><img src="img/6.jpg"/></a></li>
								<li><a href="http://127.0.0.1:8020/淘宝首页/list.html?__hbt=1551317751109" target="_blank"><img src="img/7.jpg"/></a></li>
							</ul>
						</div>
					</div>
				</div>
				<div class="cl-bottom">
					<h2><img src="img/taobaotoutiao.jpg"/></h2>
					<dl>
						<dt><img src="img/qiche.jpg"/></dt>
						<dd class="clb1"><a href="#">汽车开上床  天猫美家“最牛”标准长这样</a><span>更多></span></dd>
						<dd class="clb2"><a href="#">天猫美家发布优品品质标准</a></dd>
					</dl>
				</div>
			</div>
			<!--右半部分-->
			<div class="col-right">
				<div class="top">
					<div class="top-t">
						<a href="#" class="lianjie1"></a>
						<span id="diyi">
							Hi,你好
						</span>
						<div class="hezi">
							<p><img src="img/17.jpg"/><a href="">领淘金币抵钱</a></p>
							<p><img src="img/17.jpg"/><a href="">会员俱乐部</a></p>
						</div>
						<ul>
							<li><a href="http://127.0.0.1:8020/淘宝首页/login.html?__hbt=1551067723136" target="_blank">登录</a></li>
							<li><a href="http://127.0.0.1:8020/淘宝首页/regist.html?__hbt=1551076248114" target="_blank">注册</a></li>
							<li><a href="">开店</a></li>
						</ul>
					</div>
					<div class="top-b">
						<a href="#">网上有害信息举报专区<img src="img/18.jpg"/></a>
					</div>
				</div>
				<div class="middle-t">
					<ul>
						<li><a href="#">公告</a></li>
						<li><a href="#">规则</a></li>
						<li><a href="#">论坛</a></li>
						<li><a href="#">公益</a></li>
						<li><a href="#">安全</a></li>
					</ul>
					<div class="middle-t-p">
						<p><a href="">阿里再次入选全球最具创新力公司Top 50</a></p>
						<p><a href="">淘宝开播商家增3倍</a></p>
					</div>
				</div>
				<div class="middle-b">
					<ul>
						<li><a href="#"><img src="img/19.jpg"/>充话费</a></li>
						<li><a href="#"><img src="img/20.jpg"/>旅行</a></li>
						<li><a href="#"><img src="img/21.jpg"/>车险</a></li>
						<li><a href="#"><img src="img/22.jpg"/>游戏</a></li>
						<li><a href="#"><img src="img/23.jpg"/>彩票</a></li>
						<li><a href="#"><img src="img/24.jpg"/>电影</a></li>
						<li><a href="#"><img src="img/25.jpg"/>酒店</a></li>
						<li><a href="#"><img src="img/26.jpg"/>理财</a></li>
						<li><a href="#"><img src="img/30.jpg"/>找服务</a></li>
						<li><a href="#"><img src="img/27.jpg"/>演出</a></li>
						<li><a href="#"><img src="img/28.jpg"/>水电煤</a></li>
						<li><a href="#"><img src="img/29.jpg"/>火车票</a></li>
					</ul>
				</div>
				<div class="bottom">
					<div class="bottom-t">
						<h3>阿里APP</h3>
						<a href="#">更多>></a>
					</div>
					<div class="bottom-b">
						<ul>
							<li><a href="https://mpage.taobao.com/hd/download.html?spm=a21bo.2017.201869-apps-1.1.5af911d9wSQA9T" target="_blank"><img src="img/31.jpg"/></a></li>
							<li><a href="https://www.tmall.com/wow/portal/act/app-download?spm=a21bo.2017.201869-apps-2.1.5af911d9wSQA9T" target="_blank"><img src="img/32.jpg"/></a></li>
							<li><a href="https://ju.taobao.com/tool/downApp.htm?spm=a21bo.2017.201869-apps-3.1.5af911d9wSQA9T" target="_blank"><img src="img/33.jpg"/></a></li>
							<li><a href="https://mobile.alipay.com/index.htm" target="_blank"><img src="img/34.jpg"/></a></li>
							<li><a href="#"><img src="img/35.jpg"/></a></li>
							<li><a href="#"><img src="img/36.jpg"/></a></li>
							<li><a href="#"><img src="img/37.jpg"/></a></li>
							<li><a href="https://www.taobao.com/market/dianying/xsdxs.php?spm=a21bo.2017.201869-apps-15.1.5af911d9wSQA9T" target="_blank"><img src="img/38.jpg"/></a></li>
							<li><a href="#"><img src="img/39.jpg"/></a></li>
							<li><a href="https://www.taobao.com/go/market/seller/aliclient/ww/index.php?spm=a21bo.2017.201869-apps-5.1.5af911d9wSQA9T" target="_blank"><img src="img/40.jpg"/></a></li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<div class="love-pinzhong">
			<div class="love-l">
				<div class="love-l-t">
					<div class="left">
						<h3>有好货</h3>
						<p>与品质生活不期而遇</p>
					</div>
					<span class="huan">
						换一换
					</span>
				</div>
				<ul>
					<li>
						<dl>
							<dt><img src="img/42.jpg"/></dt>
							<dd>
								<p>WTAPS侧拉链连帽衫</p>
								<p>将机能细节融入帽衫的硬朗</p>
								<p>3人说好</p>
							</dd>
						</dl>
					</li>
					<li>
						<dl>
							<dt><img src="img/43.jpg"/></dt>
							<dd>
								<p>Givenchy印花双肩包</p>
								<p>极具小碎花印花的双肩包</p>
								<p>2人说好</p>
							</dd>
						</dl>
					</li>
					<li>
						<dl>
							<dt><img src="img/44.jpg"/></dt>
							<dd>
								<p>CLarks低帮系带休闲鞋</p>
								<p>精妙绝伦雕花公艺</p>
								<p>0人说好</p>
							</dd>
						</dl>
					</li>
					<li>
						<dl>
							<dt><img src="img/45.jpg"/></dt>
							<dd>
								<p>枣红色金属纽扣装饰半</p>
								<p>英伦风的设计，尽显干练</p>
								<p>0人说好</p>
							</dd>
						</dl>
					</li>
					<li>
						<dl>
							<dt><img src="img/46.jpg"/></dt>
							<dd>
								<p>palace休闲圆T恤</p>
								<p>舒适的圆领，穿脱方便，修</p>
								<p>90人说好</p>
							</dd>
						</dl>
					</li>
					<li>
						<dl>
							<dt><img src="img/47.jpg"/></dt>
							<dd>
								<p>GOMPOMAGGI做旧手</p>
								<p>大包身设计，衬托魅力之</p>
								<p>4人说好</p>
							</dd>
						</dl>
					</li>
				</ul>
			</div>
			<div class="love-r">
				<div class="love-r-t">
					<div class="left">
						<h3>爱逛街</h3>
						<p>献给聪明可爱的你</p>
					</div>
					<span class="more">
						更多 >
					</span>
				</div>
				<div class="love-r-b">
					<div class="chen">
						<dl>
							<dt><img src="img/49.jpg"/></dt>
							<dd>
								<p><img src="img/55.jpg"/>折叠水桶洗车桶汽车专用便携式车载多功能户外专用</p>
								<span>潮范时光机</span>
							</dd>
						</dl>
						<dl>
							<dt><img src="img/50.jpg"/></dt>
							<dd>
								<p><img src="img/55.jpg"/>折叠水桶洗车桶汽车专用便携式车载多功能户外专用</p>
								<span>潮范时光机</span>
							</dd>
						</dl>
						<dl>
							<dt><img src="img/51.jpg"/></dt>
							<dd>
								<p><img src="img/55.jpg"/>折叠水桶洗车桶汽车专用便携式车载多功能户外专用</p>
								<span>潮范时光机</span>
							</dd>
						</dl>
						<dl>
							<dt><img src="img/52.jpg"/></dt>
							<dd>
								<p><img src="img/55.jpg"/>折叠水桶洗车桶汽车专用便携式车载多功能户外专用</p>
								<span>潮范时光机</span>
							</dd>
						</dl>
						<dl>
							<dt><img src="img/53.jpg"/></dt>
							<dd>
								<p><img src="img/55.jpg"/>折叠水桶洗车桶汽车专用便携式车载多功能户外专用</p>
								<span>潮范时光机</span>
							</dd>
						</dl>
						<dl>
							<dt><img src="img/54.jpg"/></dt>
							<dd>
								<p><img src="img/55.jpg"/>折叠水桶洗车桶汽车专用便携式车载多功能户外专用</p>
								<span>潮范时光机</span>
							</dd>
						</dl>
					</div>
				</div>
			</div>
		</div>
		<div class="SecKill">
			<div class="main-o">
				<div class="top">
					<div class="top-l">
						<h3>淘抢购</h3>
						<div id="box-miao">
		                </div>
					</div>
					<div class="top-r">
						<span>换一换</span>
						<span>更多></span>
					</div>
				</div>
				<div class="bottom">
					<dl>
						<dt><img src="img/59.jpg"/></dt>
						<dd>
							<p>【特步】网面男跑步鞋轻便舒适</p>
							<p>前一千件到手价99</p>
							<p></p>
							<p>
								<span>20%</span>
								<span>已抢488件</span>
							</p>
							<p>
								<span>￥139</span>
								<span>￥259.00</span>
							</p>
						</dd>
					</dl>
					<dl>
						<dt><img src="img/6.jpg"/></dt>
						<dd>
							<p>【特步】网面男跑步鞋轻便舒适</p>
							<p>前一千件到手价99</p>
							<p></p>
							<p>
								<span>20%</span>
								<span>已抢488件</span>
							</p>
							<p>
								<span>￥139</span>
								<span>￥259.00</span>
							</p>
						</dd>
					</dl>
					<dl>
						<dt><img src="img/61.jpg"/></dt>
						<dd>
							<p>【特步】网面男跑步鞋轻便舒适</p>
							<p>前一千件到手价99</p>
							<p></p>
							<p>
								<span>20%</span>
								<span>已抢488件</span>
							</p>
							<p>
								<span>￥139</span>
								<span>￥259.00</span>
							</p>
						</dd>
					</dl>
				</div>
			</div>
		</div>
		<div class="banner">
			<a href="#"><img src="img/62.jpg"/></a>
		</div>
		<div class="rmd">
			<div class="rmd-l">
				<div class="rmd-l-t">
					<div class="left">
						<h3>每日好店</h3>
						<p>发现深藏的好店</p>
					</div>
					<div class="right">
						<a href="">更多></a>
					</div>
				</div>
				<div class="rmd-l-b">
					<dl>
					  	<dd>
					  		<h3>今日推荐</h3>
					  		<p>暂无店铺评价</p>
					  	</dd>
					  	<dt><img src="img/63.jpg"/></dt>
					</dl>
					<dl>
					  	<dd>
					  		<h3>女神&phi;店</h3>
					  		<p>暂无店铺评价</p>
					  	</dd>
					  	<dt><img src="img/64.jpg"/></dt>
					</dl>
					<dl>
					  	<dd>
					  		<h3>男人帮</h3>
					  		<p>暂无店铺评价</p>
					  	</dd>
					  	<dt><img src="img/65.jpg"/></dt>
					</dl>
					<dl>
					  	<dd>
					  		<h3>有腔调</h3>
					  		<p>暂无店铺评价</p>
					  	</dd>
					  	<dt><img src="img/66.jpg"/></dt>
					</dl>
				</div>
			</div>
			<div class="rmd-r">
				<div class="rmd-r-t">
					<div class="left">
						<h3>淘宝直播</h3>
						<p>你的爱豆直播等你</p>
					</div>
				</div>
				<div class="rmd-l-b">
					<dl>
					  	<dd>
					  		<h3>AYAOKOO</h3>
					  		<p>18443观看</p>
					  	</dd>
					  	<dt><img src="img/67.jpg"/></dt>
					</dl>
					<dl>
					  	<dd>
					  		<h3>jenny冯冯</h3>
					  		<p>55194观看</p>
					  	</dd>
					  	<dt><img src="img/68.jpg"/></dt>
					</dl>
					<dl>
					  	<dd>
					  		<h3>东北大妞xux</h3>
					  		<p>1737观看</p>
					  	</dd>
					  	<dt><img src="img/69.jpg"/></dt>
					</dl>
					<dl>
					  	<dd>
					  		<h3>七七吉祥</h3>
					  		<p>367观看</p>
					  	</dd>
					  	<dt><img src="img/70.jpg"/></dt>
					</dl>
				</div>
			</div>
		</div>
		<div class="baoliao">
			<div class="left">
				<h3>时尚爆料王</h3>
				<ul>
					<li><a href="#"><img src="img/72.jpg"/></a></li>
					<li><a href="#"><img src="img/73.jpg"/></a></li>
					<li><a href="#"><img src="img/74.jpg"/></a></li>
				</ul>
			</div>
			<div class="right">
				<a href="#"><img src="img/75.jpg"/></a>
			</div>
		</div>
		<div class="shihui">
			<h3><span></span>实惠专业户</h3>
			<ul class="quanzhong">
				<li><a href="#"><img src="img/76.jpg"/></a></li>
				<li><a href="#"><img src="img/77.jpg"/></a></li>
				<li><a href="#"><img src="img/78.jpg"/></a></li>
				<li><a href="#"><img src="img/79.jpg"/></a></li>
				<li><a href="#"><img src="img/80.jpg"/></a></li>
			</ul>
		</div>
		<div class="dp">
			<h3><span></span>热卖单品</h3>
			<ul class="ul-o">
				<li><a href="#">客厅灯</a></li>
				<li><a href="#">床垫</a></li>
				<li><a href="#">电脑椅</a></li>
				<li><a href="#">抱枕</a></li>
				<li><a href="#">男内裤</a></li>
				<li><a href="#">沙发</a></li>
				<li><a href="#">窗帘</a></li>
				<li><a href="#">椅子</a></li>
				<li><a href="#">拉杆箱</a></li>
				<li><a href="#">电脑桌</a></li>
				<li><a href="#">收纳箱</a></li>
				<li><a href="#">衣柜</a></li>
				<li><a href="#">夹克</a></li>
				<li><a href="#">茶几</a></li>
				<li><a href="#">鞋柜</a></li>
				<li><a href="#">牛仔裤</a></li>
				<li><a href="#">运动鞋</a></li>
				<li><a href="#">笔记本</a></li>
				<li><a href="#">保温杯</a></li>
				<li><a href="#">面膜</a></li>
				<li><a href="#">双肩包</a></li>
				<li><a href="#">衬衫</a></li>
				<li><a href="#">耳机</a></li>
				<li><a href="#">零食</a></li>
				<li><a href="#">男鞋</a></li>
				<li>广告</li>
			</ul>
			<ul class="ul-tw">
				<li><a href="#"><img src="img/81.jpg"/></a></li>
				<li><a href="#"><img src="img/82.jpg"/></a></li>
				<li><a href="#"><img src="img/83.jpg"/></a></li>
				<li><a href="#"><img src="img/84.jpg"/></a></li>
				<li><a href="#"><img src="img/85.jpg"/></a></li>
				<li><a href="#"><img src="img/86.jpg"/></a></li>
				<li><a href="#"><img src="img/87.jpg"/></a></li>
				<li><a href="#"><img src="img/88.jpg"/></a></li>
				<li><a href="#"><img src="img/89.jpg"/></a></li>
				<li><a href="#"><img src="img/90.jpg"/></a></li>
			</ul>
			<ul class="ul-th">
				<li><a href="#"><img src="img/91.jpg"/></a></li>
				<li><a href="#"><img src="img/92.jpg"/></a></li>
				<li><a href="#"><img src="img/93.jpg"/></a></li>
			</ul>
		</div>
		<div class="miss">
			<h3><span></span>猜你喜欢</h3>
			<ul>
				<li>
					<a href="#"><img src="img/94.jpg"/></a>
					<div class="changes">
						<p><a href="#">&hearts;&nbsp;找相似</a></p>
						<p><a href="#">发现更多相似的宝贝></a></p>
					</div>
				</li>
				<li>
					<a href="#"><img src="img/95.jpg"/></a>
					<div class="changes">
						<p><a href="#">&hearts;&nbsp;找相似</a></p>
						<p><a href="#">发现更多相似的宝贝></a></p>
					</div>
				</li>
				<li>
					<a href="#"><img src="img/96.jpg"/></a>
					<div class="changes">
						<p><a href="#">&hearts;&nbsp;找相似</a></p>
						<p><a href="#">发现更多相似的宝贝></a></p>
					</div>
				</li>
				<li>
					<a href="#"><img src="img/97.jpg"/></a>
					<div class="changes">
						<p><a href="#">&hearts;&nbsp;找相似</a></p>
						<p><a href="#">发现更多相似的宝贝></a></p>
					</div>
				</li>
				<li>
					<a href="#"><img src="img/98.jpg"/></a>
					<div class="changes">
						<p><a href="#">&hearts;&nbsp;找相似</a></p>
						<p><a href="#">发现更多相似的宝贝></a></p>
					</div>
				</li>
			</ul>
		</div>
		<div class="end">
			-----END-----
		</div>
		<div class="footer">
			<ul class="footer-big">
				<ul>
					<h3><img src="img/99.jpg"/><a href="#">消费者保障</a></h3>
					<li><a href="#">保障范围</a></li>
					<li><a href="#">退货流程范围</a></li>
					<li><a href="#">服务中心</a></li>
					<li><a href="#">更多特色服务</a></li>
				</ul>
				<ul>
					<h3><img src="img/100.jpg"/><a href="#">新手上路</a></h3>
					<li><a href="#">新手专区</a></li>
					<li><a href="#">消费警示</a></li>
					<li><a href="#">交易安全</a></li>
					<li><a href="#">24小时在线帮助</a></li>
					<li><a href="#">免费开店</a></li>
				</ul>
				<ul>
					<h3><img src="img/101.jpg"/><a href="#">付款方式</a></h3>
					<li><a href="#">快捷支付</a></li>
					<li><a href="#">信用卡</a></li>
					<li><a href="#">余额宝</a></li>
					<li><a href="#">蚂蚁花呗</a></li>
					<li><a href="#">货到付款</a></li>
				</ul>
				<ul>
					<h3><img src="img/102.jpg"/><a href="#">淘宝特色</a></h3>
					<li><a href="#">手机淘宝</a></li>
					<li><a href="#">旺旺/旺信</a></li>
					<li><a href="#">大众评审</a></li>
				</ul>
			</ul>
		</div>
		<div class="xuanfu">
			<img src="img/logo.jpg"/>
			<form>
					<input class="inp1" type="text" value=""/>
					<input class="inp2" type="text" placeholder="请输入你要输入的物品："/>
					<input class="inp3" type="text" value=""/>
					<input class="inp4" type="submit" value="搜索"/>
					<ul id="list1">
					
				    </ul>
			</form>
		</div>
		<div class="fixd1">
			<ul class="fudong">
				<li id="li1"><a href="#">爱逛好货</a></li>
				<li id="li2"><a href="#">好店直播</a></li>
				<li id="li3"><a href="#">品质特色</a></li>
				<li id="li4"><a href="#">实惠热卖</a></li>
				<li id="li5"><a href="#">猜你喜欢</a></li>
				<li id="li6"><a href="#">反馈</a></li>
				<li id="li7"><a href="#">暴恐举报</a></li>
				<li id="li8"><a href="#">回到顶部</a></li>
			</ul>
			<img src="img/106.jpg"/>
		</div>
		<script src="js/jiekou.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">//通过get请求将对应的用户选择的商品数量取出并且展示在购物车上面；
		$(function(){
			$.get('http://47.104.244.134:8080/cartlist.do',{'token':getCookie('token')},function(data){
				$('.tr1 .slt2 a span').text(data[0].count);
			})
		})
	   </script>
	</body>
</html>
<!--家具销售系统的设计与实现-->

2.CSS样式代码 🏠


html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { margin:0; padding:0; }
li{list-style: none;}
a{text-decoration: none;}
body{background:#f5f5f5;}
/*头部左部分*/

.top{width:100%;height:36px;background-color:#f5f5f5;border:1px solid #ededed;}
.top1{width: 1190px;height:36px;margin:0 auto;}
.top-left{width:280px;height:36px;float: left;}
.top-left form{width:70px;height:36px;float: left;position:relative;cursor: pointer;}
.top-left form ul{font-size:14px;width:250px;height:140px;position:absolute;top:36px;left:0px;display:none;background:#fff;overflow:auto;}
.top-left form ul li{width:250px;height:20px;text-align: left;}
.top-left form span{background:url(../img/jiantou2.jpg) no-repeat 60px 15px;display:block;}
.top-left form div{width:70px;height:36px;float: left;line-height: 36px;text-align:center;font-size: 12px;color:#393939;background-color:#f5f5f5;border:none;}
.top-left form div:hover ul{display:block;}
.top-left form div:hover{background:#fff;}
.top-left .tl1{width:75px;height:36px;display: block;line-height: 36px;text-align:center;font-size:12px;color:#f43200;float:left;margin-left: 7px;}
.top-left .tl2{width:48px;height:36px;display: block;line-height: 36px;font-size:12px;color:#6c6c6c;float:left;}
.top-left .tl3{width:60px;height:36px;display: block;line-height: 36px;font-size:12px;color:#6c6c6c;float:left;margin-left: 20px;}
.top-left a:hover{color:red;}
/*头部右部分*/
.top-right{width:600px;height:36px;float:right;}
.top-right .tr1{width:250px;height:36px;float:left;position:relative;}
.top-right .tr1 ul:nth-of-type(1){overflow:auto;display:none;width:80px;height:70px;background:#fff;position:absolute;top:36px;left:0px;}
.top-right .tr1 ul:nth-of-type(2){overflow:auto;display:none;width:80px;height:70px;background:#fff;position:absolute;top:36px;left:170px;}
.top-right .tr1 ul li{height:30px;line-height:30px;font-size:13px;}
.tr1 .slt1{width:70px;height:36px;line-height: 36px;font-size: 12px;color:#6b6b6b;
background-color:#f5f5f5;float:left;border:none;}
.tr1 .slt1:hover+ul,.tr1 .slt3:hover+ul,.tr1 .slt3+ul:hover,.tr1 .slt1+ul:hover{display: block;}
.tr1 .slt1:hover{background:#fff;color:red;cursor: pointer;}
.tr1 .slt2 a{width:58px;height:16px;line-height: 16px;font-size: 12px;color:#6b6b6b;
background-color:#f5f5f5;float:left;background: url(../img/gouwuche.jpg) no-repeat;background-position: 20px 3px;border:none;padding-left: 30px;border:none;}
.tr1 .slt2 a span{color:red !important;padding-left:2px;}
.tr1 .slt2:hover{color:red;cursor: pointer;}
.tr1 .slt3{width:88px;height:36px;line-height: 36px;font-size: 12px;color:#6b6b6b;
background-color:#f5f5f5;float:left;background: url(../img/xingxing.jpg) no-repeat;background-position: 16px 14px;border:none;padding-left: 30px;border:none;}
.tr1 .slt3:hover{color:red;cursor: pointer;}
.top-right a{width:84px;height:14px;display: block;line-height: 14px;font-size:12px;color:#6b6b6b;border-right:1px solid #e3dde1;margin-top:11px;float: left;text-align: center;}
.top-right a:hover{color:red;}
/*头部悬浮*/
.xuanfu{z-index:10002;width:1190px;height:40px;padding:7px 0;margin:0 auto;background:#fff;display: none;position:static;top:0px;left:80px;}
.xuanfu img{width:80px;height:40px;float:left;}
.xuanfu form{width:628px;height:38px;border:1px solid #fd5100;border-radius: 30px;position:relative;float:right;margin-right:260px;}
/*接口样式*/
#list1{position:absolute;top:40px;left:30px;background:#fff;width:486px;z-index:10002;}
#list1 a{color:#000;font-size:16px;}
.xuanfu .inp1{width:28px;height:36px;float: left;border:none;border-radius: 90px 0 0 90px;background:url(../img/fangdajing.jpg) no-repeat;background-position: 10px 10px;background-color:#fff;}
.xuanfu .inp2{width:486px;height:35px;line-height:38px;float: left;border:none;background-color: #fff;font-size: 16px;color:#9e9e9e;}
.xuanfu .inp3{width:39px;height:36px;float: left;border:none;
background:url(../img/xiangji.jpg) no-repeat right center;background-color:#fff;}
.xuanfu .inp4{width:75px;height:38px;line-height:38px;border:1px solid #ff8700;border-radius: 0 40px 40px 0;float:left;background-color:#ff8700;
color:#fff1bd;font-size: 17px;text-decoration: center;cursor: pointer;}

/*卖家中心联系客服部分*/

三、个人总结😊

一套合格的网页应该包含(具体可根据个人要求而定)

页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分；
所有页面相互超链接，可到三级页面，有5-10个页面组成；
页面样式风格统一布局显示正常，不错乱，使用Div+Css技术；
菜单美观、醒目，二级菜单可正常弹出与跳转；
要有JS特效，如定时切换和手动切换图片新闻；
页面中有多媒体元素，如gif、视频、音乐，表单技术的使用；
页面清爽、美观、大方，不雷同。
网站前端程序不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。

四、更多干货🚀

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

2.❤️【关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板、大学生毕业HTML模板、期末大作业模板、等! 「在这里有好多前端开发者，一起探讨前端 Node 知识，互相学习」！

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

HTML网页期末课程大作业基于HTML仿淘宝电商网站项目的设计与实现企业网站制作

文章目录🌰

一、网页介绍📖

一、网页效果🌌

二、代码展示😈

1.HTML结构代码 🧱

2.CSS样式代码 🏠

三、个人总结😊

四、更多干货🚀

【002JavaScript - 测试 jQuery】使用jQuery进行JavaScript测试

jQuery_10 jQuery中的网路请求(AJAX)

jQuery的get方法及其参数详解

Javascript jQuery简介

JQuery下载和一些语法

记录 jquery 循环删除多个数组元素

JQuery入门基础

jQuery UI sortable()实现拖动排序

按钮设置为禁用状态

HTML设置字体大小自适应屏幕与echarts图表颜色根据数据大小实时刷新图表颜色

前端哥

【002JavaScript - 测试 jQuery】使用jQuery进行JavaScript测试

jQuery_10 jQuery中的网路请求(AJAX)

jQuery的get方法及其参数详解

Ajax基础（应用场景｜jquery实现Ajax｜注意事项｜Ajax发送json数据｜Ajax携带文件数据）

Javascript jQuery简介

JQuery下载和一些语法

记录 jquery 循环删除多个数组元素

JQuery入门基础

jQuery UI sortable()实现拖动排序

按钮设置为禁用状态

1
ECharts 饼状图颜色设置

2024-02-16 14:02:001000

2
echarts实现动态渲染多柱图

2024-02-12 14:02:341000

3
移动端css布局大全

2024-02-06 15:02:421000

4
使用HTML5和JS实现日期下拉框功能

2024-02-04 11:02:521000

5
JS生成条形码JsBarcode.all.js，转成图片canvas2image.js，并打印二维码jQuery.print.js

2024-01-27 01:01:181000

6
HTML5期末大作业：我的家乡网站设计5

2024-01-28 12:01:43999

7
web期末作业网页设计——我的家乡（网页源码）

2024-01-24 15:01:48999

8
尚硅谷css3笔记

2024-02-13 10:02:44998

9
如何利用浏览器测试跨域

2024-02-11 10:02:28998

10
html生日祝福网页制作（粉色主题

2024-01-30 20:01:45997

HTML网页期末课程大作业 基于HTML仿淘宝电商网站项目的设计与实现 企业网站制作

文章目录🌰

一、网页介绍📖

一、网页效果🌌

二、代码展示😈

1.HTML结构代码 🧱

2.CSS样式代码 🏠

三、个人总结😊

四、更多干货🚀

HTML网页期末课程大作业基于HTML仿淘宝电商网站项目的设计与实现企业网站制作