HTML+CSS+JS购物网站制作【学生HTML静态网页作业作品】

最新推荐文章于 2023-12-17 11:29:58 发布
最新推荐文章于 2023-12-17 11:29:58 发布
阅读量467 收藏 8
点赞数
分类专栏： 网页设计与制作 文章标签： html网页模版 学生网页作业 网页设计与制作 web期末大作业 网站建设
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38512571/article/details/127279527
版权

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

📂文章目录

二、📚网站介绍

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

📓网站程序方面：计划采用最新的网页编程语言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.视频演示

C111SJ-名鞋商城js三级页面表单（7页）

🧩 2.图片演示

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

四、💒 网站代码

🧱HTML结构代码


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>首页</title>
		<link href="css/style.css" rel="stylesheet" type="text/css" />
		<style type="text/css">
			.pinpai tr, td {
				border:#dad9d9 1px solid;
				}
		</style>
	</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="list.html">所有产品分类</a></li>
				<li><a href="index.html">首页</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="banner">
			<img src="img/banner.jpg" />
		</div>
		<div class="main">
			 <div class="title">
			HOUT ALBUM / 热买专辑
		     </div>
		     <div class="div1">
		     	<img src="img/img1.jpg" />
		     	<img src="img/img2.jpg" />
		     	<img class="mar0" src="img/img3.jpg" />
		     </div>
		     <div class="div2">
		     	<img src="img/img4.jpg" />
		     	<img class="mar0" src="img/img5.jpg" />
		     </div>
		     <div class="div3">
		     	<img src="img/img6.jpg" />
		     	<img src="img/img7.jpg" />
		     	<img class="mar0" src="img/img8.jpg" />
		     </div>
		     <div class="div4">
		     	<img src="img/img9.jpg" />
		     </div>
		     <div class="title">
		     	NEW PRODUCT / 潮流尖货
		     </div>
		     <div class="div5">
		     	<ul>
		     	 	<li>
		     			<a href="xiangqing.html"><img src="img/img11.jpg"></a>
		     			<a href="xiangqing.html"><h1>LINING李宁新款男鞋高达野外跑鞋运动鞋ARDL003</h1></a>
		     			<h2>
		     				<img src="img/img12.jpg">256元
		     				<a href="gouwuche.html"><span></span></a>
		     			</h2>
		     		</li>
		     		<li>
		     			<a href="xiangqing.html"><img src="img/img30.jpg"></a>
		     			<a href="xiangqing.html"><h1>LINING李宁女子辉煌96复古经典跑鞋女时尚休闲透气运动鞋ARCL022</h1></a>
		     			<h2>
		     				<img src="img/img12.jpg">129元
		     				<a href="gouwuche.html"><span></span></a>
		     			</h2>
		     		</li>
		     		<li>
		     			<a href="xiangqing.html"><img src="img/img31.jpg"></a>
		     			<a href="xiangqing.html"><h1>斯凯奇童鞋17新款男婴童0-4岁网面透气休闲运动鞋95052N</h1></a>
		     			<h2>
		     				<img src="img/img12.jpg">99元
		     				<a href="gouwuche.html"><span></span></a>
		     			</h2>
		     		</li>
		     		<li>
		     			<a href="xiangqing.html"><img src="img/img32.jpg"></a>
		     			<a href="xiangqing.html"><h1>LINING李宁跑步鞋男鞋新款光梭一体织男士晨跑春季运动鞋ARBM119</h1></a>
		     			<h2>
		     				<img src="img/img12.jpg">219元
		     				<a href="gouwuche.html"><span></span></a>
		     			</h2>
		     		</li>
		     		<li>
		     			<a href="xiangqing.html"><img src="img/img33.jpg"></a>
		     			<a href="xiangqing.html"><h1>NIKE耐克女鞋跑步鞋ZOOM系列气垫透气运动鞋942855</h1></a>
		     			<h2>
		     				<img src="img/img12.jpg">369元
		     				<a href="gouwuche.html"><span></span></a>
		     			</h2>
		     		</li>
		     		<li>
		     			<a href="xiangqing.html"><img src="img/img34.jpg"></a>
		     			<a href="xiangqing.html"><h1>adidas阿迪达斯男子跑步鞋轻便跑步休闲运动鞋AQ0359</h1></a>
		     			<h2>
		     				<img src="img/img12.jpg">432元
		     				<a href="gouwuche.html"><span></span></a>
		     			</h2>
		     		</li>
		     		<li>
		     			<a href="xiangqing.html"><img src="img/img35.jpg"></a>
		     			<a href="xiangqing.html"><h1>Skechers斯凯奇男鞋跑步鞋一脚套网面舒适运动鞋54359</h1></a>
		     			<h2>
		     				<img src="img/img12.jpg">249元
		     				<a href="gouwuche.html"><span></span></a>
		     			</h2>
		     		</li>
		     		<li>
		     			<a href="xiangqing.html"><img src="img/img36.jpg"></a>
		     			<a href="xiangqing.html"><h1>New Balance/NB女鞋跑步鞋FLSH系列运动鞋WFLSHLB2</h1></a>
		     			<h2>
		     				<img src="img/img12.jpg">182元
		     				<a href="gouwuche.html"><span></span></a>
		     			</h2>
		     		</li>
		     		
		     	</ul>
		     </div>
		     <div class="div6">
		       <table class="pinpai"  cellspacing="0" width="100%" height="263" border="3">
		         <tr>
		           <td><img src="img/img13.jpg"></td>
		           <td><img src="img/img14.jpg"></td>
		           <td><img src="img/img15.jpg"></td>
		           <td><img src="img/img16.jpg"></td>
	             </tr>
		         <tr>
		           <td><img src="img/img17.jpg"></td>
		           <td><img src="img/img18.jpg"></td>
		           <td><img src="img/img19.jpg"></td>
		           <td><img src="img/img20.jpg"></td>
	             </tr>
	           </table>
		     	
		     </div>
		     
		</div>
		<div class="foot">
			<div class="foot-ner">
				<div class="fv1">
					<h1>客服热线：</h1>
					<h2>400-888 8888</h2>
					<div class="ewm">
						<img src="img/ewm1.png" />
						<img src="img/ewm2.png" />
					</div>
				</div>
				<div class="fv2">
					<div class="box">
						<h1>支付方式</h1>
						<p>在线支付</p>
						<p>货到付款</p>
						<p>发票说明</p>
					</div>
					<div class="box">
						<h1>售后服务</h1>
						<p>退货说明</p>
						<p>换货说明</p>
						<p>服务承诺</p>
					</div>
					<div class="box">
						<h1>物流配送</h1>
						<p>合作快递</p>
						<p>运费说明</p>
						<p>配送时间</p>
					</div>
				</div>
				<div class="fv3">
					<img src="img/foot1.png" />
				</div>
			</div>
		</div>
	</body>
</html>

🏠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,p,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-left: 67px;
	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: 70px;
	height: 37px;
	background: #4f4e4e;
	line-height: 37px;
	text-align: center;
	float: left;
	color:white;
}
.gouwuche{
	width: 102px;
	height: 52px;
	float: left;
	margin-left: 139px;
	margin-top: 45px;
	background: url(../img/gwc.jpg) no-repeat;
	padding-left: 74px;
	line-height: 52px;
	font-size: 16px;
	color: #fdfdfd;
}
#nav{
	height: 63px;
	width: 100%;
	background: #a21f25;
}
#nav ul{
	width: 1220px;
    padding: 10px 40px;
    display: block;
    height: 40px;
    margin: 0 auto;
}
#nav ul li{
	width:170px;
	height: 40px;
	float: left;
	margin: 0px 15px;
	text-align: center;
}
#nav ul li a{
	line-height: 40px;
	font-size: 20px;
	color: #fdfbfb;
}

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

五、🎁更多源码

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

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

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

web网站建设
关注
  • 0
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
html购物车页面
pengxiang1998的博客
05-03 2万+
今天博主给大家分享一个自己做的购物车页面，使用的是html+css实现： 话不多说，直接上图： 这个页面只是实现了其布局视图，没有使用js或者jquery相关语言，在博主看来是比较利于我们将其加入到自己的程序中的 以下是相关代码： index.html <!DOCTYPE html> <html> <head> <meta charset="utf...
购物车删除按钮
dada_master的博客
11-05 1789
HTML 购物车  全选 商品 单价 数量 小计 操作 Casi
＜input＞标签构建快递信息界面(HTML+CSS)
小滕的Java学习旅途
11-28 4796
效果显示 HTML+CSS代码 <!doctype html> <html> <head> <meta charset="utf-8"> <title>增加快递信息</title> <style type="text/css"> body{color:white;} header{text-align: center;font-size:25px} #main{width: 700px;height: 65.
制作电商页面（Html）
jjlkjjlk的博客
10-05 1864
HTML制作电商网页
基于HTML5+JavaScript+CSS3+PHP的网上商城电子商务购物网站设计
毕业作品网站
06-12 5902
摘 要 随着互联网的发展和普及，基于电子商务的网络购物在中国已经被人们所认可，我们的日常生活已经离不开网购。相对于传统的实体经济而言，电子商务的出现打破了传统的实体经济交易模式，将整个交易流程电子化、数字化，一方面以电子商务实现了电子流代替了实物流，因此可以大量减少人力、物力，极大地降低了运输成本;另一方面突破了时空的限制，使得交易活动可以发生任何时间，任何地点，从而大大提高了效率。因此人们更喜爱网络购物。针对这种情况，我以HTML5+JavaScript+CSS3+PHP为开发技术，设计开发了一个基于
大二学生HTML期末大作业——HTML+CSS+JavaScript食品网上超市购物商城网页与制作
08-10
HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js，有的视频+音乐+...
简单的网页制作期末作业——HTML+CSS+JavaScript小礼品购物商城网站
08-10
HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js，有的视频+音乐+...
期末前端web大作业——HTML+CSS+JavaScript仿京东购物商城网页制作(7md
08-10
HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js，有的视频+音乐+...
学生个人html静态网页制作 基于HTML+CSS+JavaScript+jquery仿苏宁易购官网商城模板
08-10
HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js，有的视频+音乐+...
简单个人静态HTML网页设计作品 基于HTML+CSS+JavaScript仿小米手机网站 html静态在线购物商城网页制作
08-10
HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js，有的视频+音乐+...
web前端做的一个购物商城
04-22
里面有登录注册页面，个人中心页面，购物车页面，实现搜索功能，欢迎下载
html仿购物网（粗略制作）
06-21
html仿购物网（粗略制作）
设计一个简单的购物页面（html+css+php）.zip
03-15
首先讲一下，购物页面肯定会涉及到数据库部分的，我这篇文章数据库方面不会详细讲，就简单给个思路。 购物需要用到cookie进行身份验证，这个我在上一个文章有写到 访问链接：https://blog.csdn.net/weixin_42899627/article/details/104741885
用HTML实现网上购物页面
Dokey_L的博客
04-25 9910
先看结果代码<!DOCTYPE html><html> <head> <title>网上购物</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyw...
html静态网站基于品优购电商购物网站网页设计与实现共计3个页面 html+css+javascript网页设计实例 企业网站制作
qq_38512570的博客
04-23 710
⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Web
HTML期末设计——品优购电商购物网站网页设计与实现共计3个页面 html+css+javascript网页设计实例 企业网站制作
最新发布
qq__3200628753的博客
12-17 580
使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Web...
TML5期末大作业：咖啡网站设计——咖啡网站pc端带轮播js (5页) 学生酒水网页作业, 生鲜水果网页作业成品, 零食小吃网页作 美食网页业模板
11-27 982
HTML5期末大作业：咖啡网站设计——咖啡网站pc端带轮播js (5页) 学生酒水网页作业, 生鲜水果网页作业成品, 零食小吃网页作 美食网页业模板 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求
web实验2 制作简单网页（HTML+CSS）
热门推荐
人生当苦无妨
08-20 2万+
web实验2 制作简单网页（HTML+CSS） 一、实验目的 1．掌握文本样式的设置。 2．掌握图像样式的设置。 3．掌握各种媒体的插入方法。 二、实验内容 采用DIV+CSS，制作“在线电影”页面。 三、操作提示 1．新建网站的文件夹，网站图像素材保存在images文件夹中，媒体文件放在flash文件中。 2．新建index.html页面，要求：  页面字体大小为14px，文本颜色为#000；  页面背景颜色为#edb8d2；  上下左右距均为0。 3．利用div布局，宽度为900px，居中对齐。
div+css静态网页设计 电商购物网站设计(55页) 电商网页设计制作 简单静态HTML网页作品 购物网页作业成品 学生商城网站模板
qq_524614081的博客
06-16 2027
HTML5期末大作业：电商购物网站设计——电商购物网站设计(55页) 电商网页设计制作 简单静态HTML网页作品 购物网页作业成品 学生商城网站模板 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求,
html静态网页制作作业单个美食简单(HTML+CSS)
05-20
好的，以下是一个简单的 HTML+CSS 网页，展示了一道美食的详细信息，包括名称、图片、材料和做法等内容。 ```html <!DOCTYPE html> <html> 美食制作 body { font-family: Arial, sans-serif; } h1 {...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

web网站建设

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

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

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

打赏作者

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

抵扣说明：

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

余额充值