html和css制作的网页设计期末大作业【小米购物商城网站制作】
原创
©著作权归作者所有：来自51CTO博客作者@码出未来④-web网页设计的原创作品，请联系作者获取转载授权，否则将追究法律责任
📂文章目录
二、📚网站介绍
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。
📓网站程序方面：计划采用最新的网页编程语言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"><返回首页</a>
</span>
<h1>米家空气净化器Pro|</h1><h2><a href="">米家空气净化器 2S|</a><a href=""> 米家空气净化器MAX</a></h2>
<p><a href="">概述 </a>| <a href="">净化原理 </a>| <a href="">图集 </a>| <a href="">参数 </a>| <a href="">用户评价 </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>北京 北京市 东城区 永定门外街道
<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:">元</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=""> 预约维修服务 </a>
<img src="./img/7.png"/>
<a href=""> 七天无理由退货 </a>
<img src="./img/15.png"/>
<a href=""> 15天免费换货 </a>
<img src="./img/截图 2018-11-03 12.13.30.png"/>
<a href=""> 满150元包邮 </a>
<img src="./img/标点.png"/>
<a href=""> 520余家售后网点 </a>
</p>
</div>
</div>
<div id="zuiwei">
<img src="./img/mi.jpg"/>
<p>
<a href="">©mi.com</a>
<a href="">京ICP证110507号</a>
<a href="">京ICP备10046444号</a> <a href="">京公网安备11010802020134号</a> <a href="">京网文[2017]1530-131号</a>
</p>
<p>
<a href="">(京)网械平台备字(2018)第00005号</a>
<a href="">互联网药品信息服务资格证(京)-非经营性-204-0090</a>
<a href="">营业执照</a>
<a href="">医疗器械公告</a>
</p>
<p>
本网站所列数据，纯属模仿
</p>
</div>
</body>
</html>
五、🎁更多源码
1.如果我的博客对你有帮助 请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！
2.💗【🉑关注我| 获取更多源码】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、等!
📣以上内容技术相关问题💌欢迎一起交流学习
