html和css制作的网页设计期末大作业【小米购物商城网站制作】

web学生网页设计

于 2024-06-24 00:22:32 发布

阅读量863

点赞数 21

分类专栏： web前端文章标签： html css 课程设计

本文链接：https://blog.csdn.net/m0_73081085/article/details/127219961

版权

web前端专栏收录该内容

2220 篇文章 139 订阅

订阅专栏

🌩️ 精彩专栏推荐👇🏻👇🏻👇🏻
💂 作者主页: 【进入主页—🚀获取更多源码】
🎓 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.视频演示

C02 仿小米商城(10个页面)

🧩 2.图片演示

在这里插入图片描述

四、💒 网站代码

🧱HTML结构代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>

	</head>
	<body>
		<div id="box1">
		<span id="yt" style="position: relative;  color: white;">
			<a href="index.html">&lt;返回首页</a>
		</span>
			<h1>米家空气净化器Pro|</h1><h2><a href="">米家空气净化器 2S|</a><a href=""> 米家空气净化器MAX</a></h2>
			<p><a href="">概述&nbsp;&nbsp;</a>|&nbsp;&nbsp;<a href="">净化原理&nbsp;&nbsp;</a>|&nbsp;&nbsp;<a href="">图集&nbsp;&nbsp;</a>|&nbsp;&nbsp;<a href="">参数&nbsp;&nbsp;</a>|&nbsp;&nbsp;<a href="">用户评价&nbsp;&nbsp;</a>
		</div>
		<div id="zonghezhang">
		<div id="jing">
				<img src="./img/pms_1477916442.08799062!560x560.jpg"/>
				<h1>米家空气净化器Pro</h1>
				<h3>OLED 显示屏幕 / 激光颗粒物传感器 / 500m³/h颗粒物 CADR / 60㎡适用面积</h3>
				<p>小米自营</p>
				<a class="sanchuxian">1099元<span>1499元</span></a>
		</div>
		<a class="sanchuxian2"><img src="./img/QQ图片20181106165604.png"/></a>
		<div id="dizhi">
				<img src="./img/标点.png"/>
				<p>北京&nbsp;&nbsp;北京市&nbsp;&nbsp;东城区&nbsp;&nbsp;永定门外街道
				<p>
					<a href="">修改</a><span>有现货</span>
				</p>
		</div>
		<div id="yanse">
			<h1>选择颜色</h1>
			<p>
				<a href="">白色</a>
			</p>
		</div>
		<div id="zongji">
			<p class="jihe">
				<a>米家空气净化器Pro 白色</a>
				<style type="text/css">
					.yuan{
						position: relative;
						
					}
				</style>
				<a>1099元<span class="removemoney">1499</span><p class="yuan" style="position:relative;top: 112px;left:465px;display: inline">元</p></a>
			</p>
			<p class="hedazi">总计：1099元</p>
		</div>
		<div id="gouwu">
			<h3><p><a href="">加入购物车</a></p></h3>
		</div>
		<div id="shoucang">
			<h2><p><a href="">收藏</a></p></h2>
		</div>
		<div id="fangshi">
			<img src="./img/截图 2018-11-07 09.52.14.png"/>
			<a>小米自营</a>
		</div>
		<div id="fangshi2">
			<img src="./img/截图 2018-11-07 09.52.14.png"/>
			<a>小米发货</a>
		</div>
		<div id="fangshi3">
			<img src="./img/截图 2018-11-07 09.52.14.png"/>
			<a>七天无理由退货</a>
		</div>
		<div id="fangshi4">
			<img src="./img/截图 2018-11-07 09.52.14.png"/>
			<a>运费说明</a>
		</div>
		<div id="fangshi5">
			<img src="./img/截图 2018-11-07 09.52.14.png"/>
			<a>售后服务政策</a>
		</div>
		<div id="dierhe">
			<div id="xiao">
				<h1>小米承诺
				<a href="">查看详情
				<img src="./img/截图 2018-11-07 10.31.36.png"/></a></h1>
			</div>
			<div class="xingtu">
				<img src="./img/a9.png"/>
				<p>
					如因质量问题或故障，凭厂商维修中心或特约维修点的质量检测证明，享受7日
					内退货，15日内换货，15日以上在质保期内享受免费保修等三包服务！</p>
			</div>
			<div id="xiao2">
				<h1><span>官方</span>微信</h1>
			</div>
			<div class="xingtu2">
				<img src="./img/efb.jpg"/>
			</div>
		</div>
		</div>
		<div id="zhong">
			<div id="zhong1">
				<p>
				<img src="./img/截图 2018-11-03 12.08.41.png"/>
				<a href="">&nbsp;&nbsp;预约维修服务&nbsp;&nbsp;</a>
				<img src="./img/7.png"/>
				<a href="">&nbsp;&nbsp;七天无理由退货&nbsp;&nbsp;</a>
				<img src="./img/15.png"/>
				<a href="">&nbsp;&nbsp;15天免费换货&nbsp;&nbsp;</a>
				<img src="./img/截图 2018-11-03 12.13.30.png"/>
				<a href="">&nbsp;&nbsp;满150元包邮&nbsp;&nbsp;</a>
				<img src="./img/标点.png"/>
				<a href="">&nbsp;&nbsp;520余家售后网点&nbsp;&nbsp;</a>
				</p>
			</div>
		</div>
		<div id="zuiwei">
				<img src="./img/mi.jpg"/>
				<p>
					<a href="">&copy;mi.com</a>&nbsp;&nbsp;
					<a href="">京ICP证110507号</a>&nbsp;&nbsp;
					<a href="">京ICP备10046444号</a>&nbsp;&nbsp;<a href="">京公网安备11010802020134号</a>&nbsp;&nbsp;<a href="">京网文[2017]1530-131号</a>
				</p>
				<p>
					<a href="">(京)网械平台备字(2018)第00005号</a>&nbsp;&nbsp;
					<a href="">互联网药品信息服务资格证(京)-非经营性-204-0090</a>&nbsp;&nbsp;
					<a href="">营业执照</a>&nbsp;&nbsp;
					<a href="">医疗器械公告</a>
				</p>
				<p>
					本网站所列数据，纯属模仿
				</p>
		</div>
	</body>
</html>

五、🎁更多源码

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

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

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

web学生网页设计

关注

21
点赞
踩
10

收藏

觉得还不错? 一键收藏
打赏
0
评论
html和css制作的网页设计期末大作业【小米购物商城网站制作】

📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件
复制链接

扫一扫