🌩️ 精彩专栏推荐👇🏻👇🏻👇🏻
💂 作者主页: 【进入主页—🚀获取更多源码】
🎓 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"><返回首页</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: 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=""> 预约维修服务 </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模板 、等!
📣以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻