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

最新推荐文章于 2024-06-18 12:34:12 发布
最新推荐文章于 2024-06-18 12:34:12 发布
阅读量2.1k 收藏 36
点赞数 4
分类专栏： 网页设计与制作 文章标签： dreamweaver html静态网页 web前端 html期末大作业 web课程与设计
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38512571/article/details/127708628
版权

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

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

❤ 【作者主页——🔥获取更多优质源码】
❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】

文章目录🌰

一、网页介绍📖

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/%E6%B7%98%E5%AE%9D%E9%A6%96%E9%A1%B5/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/%E6%B7%98%E5%AE%9D%E9%A6%96%E9%A1%B5/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/%E6%B7%98%E5%AE%9D%E9%A6%96%E9%A1%B5/list.html?__hbt=1551317751109" target="_blank"><img src="img/6.jpg"/></a></li>
								<li><a href="http://127.0.0.1:8020/%E6%B7%98%E5%AE%9D%E9%A6%96%E9%A1%B5/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/%E6%B7%98%E5%AE%9D%E9%A6%96%E9%A1%B5/login.html?__hbt=1551067723136" target="_blank">登录</a></li>
							<li><a href="http://127.0.0.1:8020/%E6%B7%98%E5%AE%9D%E9%A6%96%E9%A1%B5/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;}

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

三、个人总结😊

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

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

四、更多干货🚀

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

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

3.以上内容技术相关问题😈欢迎一起交流学习🔥在这里插入图片描述

web网站建设
关注
  • 4
    点赞
  • 踩
  • 36
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
学生个人网页制作html(附源码)
计算机毕业论文源码，学生个人网页制作html源码。贴近用户做网络推广和互联网优化。
02-14 1万+
如何做一个简单的学生个人网页制作html1、单击“开始”以输入附件2、打开记事本3、输入《html》《body》《h1》学生个人网页制作html《/h1》《/body》《/html》4、还可以做下css润色5、另存为（名称.HTML格式）6、保存后，生成一个简单的HTML了。
HTML+CSS+JavaScript仿京东购物商城网站 web前端制作服装购物商城 html电商购物网站
VX_WJ88950106的博客
08-06 2万+
⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Web......
成品网站（包前后台）
11-15
网站模板
web网页设计期末课程大作业：漫画网站设计——我的英雄（5页）学生个人单页面网页作业 学生网页设计成品 静态HTML网页单页制作
最新发布
网页设计与制作 | HTML+CSS+JS
06-18 1230
⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Web
制作一个简单HTML个人网页网页（HTML+CSS）
weixin_46153254的博客
12-04 35万+
制作一个简单的HTML个人网页
如何使用HTML制作个人网站（ web期末大作业）
STU网页设计
11-10 3298
🏀校园篮球网页设计、⚽足球体育运动、🤽体育游泳运动、🏓兵乓球 、🎾网球、等网站的设计与制作。🏷️ 大学生校园运动静态HTML网页设计作品，采用DIV CSS布局制作，内容包括：校园运动、运动技巧、运动规则、技术规则、经典动作。页面主体内容区域宽度为1200PX。网页整体使用CSS设置了网页背景图片。页面精美包含多个排版布局，学生网页作业水平制作。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构
web网页设计期末课程大作业 基于HTML+CSS仿苹果商城电商项目的设计与实现
08-10
HTML静态网页设计作业，采用DIV+CSS...文化、 家乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计作业需求, 喜欢的可以下载! 【查看更多源码地址】：https://blog.csdn.net/bigwhiteshark?type=blog
web网页设计期末课程大作业 HTML+CSS+JavaScript仿天猫购物商城设计实例 企业网站制作
08-10
HTML静态网页设计作业，采用DIV+CSS...文化、 家乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计作业需求, 喜欢的可以下载! 【查看更多源码地址】：https://blog.csdn.net/bigwhiteshark?type=blog
【Web网页设计制作-毕业设计期末大作业源码】C2C美甲手机电商网站模板html源码.zip
05-11
Web网页设计制作-毕业设计期末大作业源码 Web网页设计制作-毕业设计期末大作业源码 Web网页设计制作-毕业设计期末大作业源码 Web网页设计制作-毕业设计期末大作业源码 Web网页设计制作-毕业设计期末大作业源码 Web...
Web网页设计制作-毕业设计期末大作业-通用模板HTML网站源码（博客类）
06-13
Web网页设计制作-毕业设计期末大作业-通用模板HTML网站源码（博客类）可进行开发为自己喜欢的图片、样式、动态静态结合等。 Web网页设计制作-毕业设计期末大作业-通用模板HTML网站源码（博客类）可进行开发为自己...
一个简单HTML5期末考核大作业，学生个人html静态网页制作代码
VX_WJ88950106的博客
08-13 3万+
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；...
用HTML+CSS做一个漂亮简单的个人网页
热门推荐
qq_42523321的博客
12-20 58万+
用HTML+CSS做一个漂亮简单的个人网页 1.刚好帮我妹写了一个作业做一个个人网页设计，简单的三个小页面，就从网上随便找了图片自己随便设计了下东拼西凑哈哈哈！！！可能有点low但是对她来说或者需要做简单的个人网站应该就够了吧！ 图片是从站酷上面找的(因为我不会设计图)，如果有侵权了什么的请联系我立刻马上删掉哈! （首页的首屏有下雪了的特效，右下角有音乐播放提示） 2.先看一下效果哈！ 效...............
制作一个简单HTML个人网页网页（HTML+CSS）web前端大作业
七夕情人节表白网页代码100款 HTML5网页设计与制作1120款 Echarts大屏数据150款
05-28 1万+
一个简单的HTML网页，非常适合网页设计html期末大作业 成品效果 代码实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/
学生网页成品展示 静态HTML网页设计制作技巧 dreamweaver作品展示2022.3期
lxidw7的博客
03-07 7万+
关于学生网页设计作业，想要做一份合格高分的网页设计课程作品，在制作时需要考虑以下几点：
大学生网页设计制作作业实例代码 (全网最全,建议收藏) HTML+CSS+JS
HTML网页设计
10-03 24万+
临近期末，大一新生的各种考试和专业结课作业纷至沓来。web实训大作业、网页期末作业、web课程与设计、网页设计等，简直让人头大。你还在为网页设计老师的作业要求感到头大？网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求, 废话不多说，直接看效果。📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确
web网页设计期末课程大作业~粉色的服装购物商城页面模板(HTML+CSS+JS)
七夕情人节表白网页代码100款 HTML5网页设计与制作1120款 Echarts大屏数据150款
07-02 1万+
web网页设计期末课程大作业~粉色的服装购物商城页面模板 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~ 原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，~这是一个不错的网页制作，画面精明，非常适合初学者学习使用。 作品介绍 关于HTML网页设计期末课程大作业实现，大作业A+水平 ~，共有首页，登录页，瀑布流列表页，详情页带评价带晒单
web前端期末大作业 html css javascript网页设计实例 企业网站制作
06-28
### 回答1： 非常好的主题！企业网站制作是一个非常有挑战性的任务，需要充分考虑用户体验和设计美感。HTML、CSS和JavaScript是Web前端开发的三大核心技术，掌握它们对于实现一个优秀的企业网站至关重要。在设计过程中，需要注意网站的整体布局、颜色搭配、字体选择、图片和视频的使用等方面，以及网站的响应式设计，确保在不同设备上都能够良好地展示。希望你能够充分发挥自己的创造力和技术能力，创造出一个令人惊艳的企业网站！ ### 回答2： 在开始回答这个问题之前，需要先明确一下，什么是Web前端？Web前端，简单来说就是指网站的<strong>客户端技术部分</strong>，包括HTML、CSS、JavaScript等技术和工具，主要负责网站的界面设计和前端逻辑的实现。 接下来，我将针对这个题目提出的要求详细解说一下，如何完成一份Web前端期末大作业。 1. HTML HTML是网页的基础组成部分，负责网页的结构、语义化和内容呈现。在一个企业网站中，我们需要将网站的各个页面进行规划和设计，用HTML将这些不同的页面内容呈现出来。要求Web前端的同学需要对HTML有扎实的掌握，不仅要清楚网页的标签使用规范，还要具备网页布局设计和语义化的基础知识，以保证网站的页面结构清晰、易读易用。 2. CSS CSS是网页的样式设计部分，主要负责网页的表现效果和样式排版。在企业网站制作中，同学们需要运用CSS实现网站的视觉效果，如颜色、字体、布局等。此外，还需要掌握CSS的选择器、盒模型、层叠样式等重点知识点，以便实现复杂的样式效果。由于企业网站通常需要兼顾美观和用户体验，样式设计和布局尤其重要。 3. JavaScript JavaScript是网页的交互功能部分，主要负责网页的行为和逻辑控制。在企业网站中，同学们需要运用JavaScript实现用户交互功能，如导航滑动、表单校验、数据加载等。此外，还需要掌握JavaScript的DOM操作、事件驱动、异步编程等知识点，以对网站的用户交互设计做出更细致的控制和调整。 总结 综上所述，一个合格的Web前端同学需要以下几点技能： 1. 掌握HTML、CSS和JavaScript等技术和工具的基本知识，能够将网站的结构、样式和逻辑实现。 2. 具备界面设计和前端逻辑实现的经验和技巧，能够体现出企业网站的品牌特色和用户体验。 3. 充分了解网站的重点需求和运营目标，能够运用Web前端技术和经验帮助企业实现目标。 对于希望进入Web前端行业的同学来说，这个大作业是一次极好的实践机会。只要踏实学习、勤于实践，肯定能设计出让自己和别人都惊异的作品。 ### 回答3： 为了完成web前端期末大作业 html css javascript网页设计实例 企业网站制作，首先需要掌握HTML、CSS、JavaScript这3门语言的基本知识。HTML提供了网页的结构和内容，CSS则负责网页的外观和样式，而JavaScript则可以为网页添加交互和动态效果。在掌握了这些语言后，就可以开始设计企业网站了。 设计企业网站需要考虑以下几点： 1. 网站整体风格 企业网站的整体风格应该与企业的品牌形象相符，包括网站的配色方案、排版风格、图像和音频的使用等。一般来说，在设计网站风格时，可以参考其他同类企业网站，并结合自己的创意，创造出独特的设计风格来。 2. 网站结构与导航 网站的结构应该具备清晰的层次性和易于导航的特点，以便用户快速找到所需要的信息。在设计网站结构时应该考虑到相关信息之间的关联性，以及用户可能的浏览路径。导航可以采用水平导航、竖直导航、面包屑导航或全文搜索等方式。 3. 网站内容 企业网站的内容应该能够充分体现企业的核心优势和竞争力，能够吸引用户的注意力并产生共鸣。同时，也需要根据不同用户的需求，提供不同的信息和服务。在设计网站内容时，可以采用文字、图片、视频等方式来展示和传达信息。 4. 网站的交互效果 企业网站的交互效果应该具备良好的体验和易用性，能够为用户提供更好的浏览体验。在设计网站交互效果时，可以采用一些公共组件和界面元素，如轮播图、下拉菜单、弹出框、表单验证等。同时，也可以通过使用JavaScript来实现一些动态效果和交互功能。 在进行web前端期末大作业 html css javascript网页设计实例 企业网站制作时，需要充分考虑以上几点，以便为用户提供更好的网页体验和服务。此外，还需要在实践中加深对HTML、CSS、JavaScript等技术的理解和应用，不断优化和改进网站的设计和实现。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

web网站建设

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值