HTML5+CSS3实现小米商城
导言：
小米商城是自学后第一个较为完整的网页，花费了一整天的时间完成，难度不是很高，只要肯花费一定的时间就能完成！
网页构成：
1、导航栏，下拉栏
2、轮播图
3、中间块
4、商品块
5、尾部
效果成品图展示：
代码展示
代码较多，这里只展示部分
头部代码
html：
购物车(0)css:
.box1 {height: 40px;background-color: #333333;
}em {font-style: normal;
}li {list-style: none;
}.box1 .a1 {/* height: 40px; */height: 100%;width: 1226px;margin: 0 auto;/* background-color: pink; */
}.a1 .a11 {float: left;height: 100%;width: 795px;/* background-color: antiquewhite; */
}.a1 .a11 ul {position: relative;margin-top: 10px;
}.a1 .a11 ul em {position: absolute;top: 3px;float: left;color: #3B403F;font-size: 9px;margin-left: 6px;
}.a1 .a11 ul li {float: left;list-style: none;padding-left: 15px;
}.a1 .a11 ul li a {font-size: 12px;color: #b0b0b0;text-decoration: none;
}.a1 .a11 ul li a:hover {color: #FFFFFF;
}.a1 .a12 {float: right;height: 100%;width: 249px;/* background-color: aqua; */
}.a1 .a12 .a121 {float: left;height: 100%;width: 149px;/* background-color: pink; */
}.a1 .a12 .a122 {float: right;height: 100%;width: 100px;background-color: #424242;
}.a1 .a12 .a121 ul {position: relative;margin-top: 10px;
}.a1 .a12 .a121 ul em {position: absolute;top: 3px;float: left;color: #3B403F;font-size: 9px;margin-left: 6px;
}.a1 .a12 .a121 ul li {float: left;list-style: none;padding-left: 15px;
}.a1 .a12 .a121 ul li a {font-size: 12px;color: #b0b0b0;text-decoration: none;
}.a1 .a12 .a121 ul li a:hover {color: #FFFFFF;
}.a1 .a12 .a122 .a1221 {float: left;height: 100%;width: 40px;/* background-color: pink; */margin-top: 8px;margin-left: 5px;
}.a1 .a12 .a122 .a1222 a {float: right;font-size: 12px;color: #b0b0b0;text-decoration: none;margin-top: 13px;margin-right: 3px;
}轮播图
图片自动放映，渐变的背景图片，使用过渡
html代码
css
.box3 {height: 460px;width: 1226px;margin: 0 auto;animation: move 30s infinite;/* background-image: url(img/小米页面.jpeg); */
}@keyframes move {0%,20% {background-image: url(img/小米页面.jpeg);}20%,40% {background-image: url(img/小米页面.jpeg);}40%,60% {background-image: url(img/小米页面1.jpg);}60%,80% {background-image: url(img/小米页面2.jpg);}80%,100% {background-image: url(img/小米页面3.jpg);}100%,0% {background-image: url(img/小米页面4.jpg);}
}导航栏代码
右侧固定栏
手机APP
个人中心
售后服务
人工客服
购物车左侧导航栏
html：
css：
.box2 .b1 {height: 100px;width: 1226px;margin: 0 auto;/* background-color: pink; */
}.box2 .b1 .b11 {float: left;height: 100px;width: 234px;/* background-color: antiquewhite; */
}.box2 .b1 .b12 {float: left;height: 100px;width: 700px;/* background-color: pink; */
}.box2 .b1 .b12 ul {margin-top: 40px;
}.box2 .b1 .b12 ul li {list-style: none;float: left;margin-left: 20px;
}.box2 .b1 .b12 ul li a {text-decoration: none;color: #333333;
}.box2 .b1 .b12 ul li a:hover {color: #FF6700;
}商品块代码
html
Xiaomi Civi 3
仿生双眸 天生出色
2499元起
Xiaomi 13 Ultra
徕卡光学全焦段四摄一英寸可变光圈]..-
5999元起
Redmi Note 12 Turbo
狂忌引擎超强性能释放
1999元起
Redmi K60
Redmi K60
2599元起2699元
Redmi K60 Pro
【第二代浆龙8】狂暴引擎
3299元起3599元
Redmi Note 12 Pro极速版
高通说龙778G,OLED柔性直屏+—亿...
1699元起
Xiaomi 13限星定制色
全所第二代眺坨8│徕卡专业光学镜头...
49999元起
Xiaomi 13 Pro
全所第二代晓龙8│徕卡专业光学镜头...
4999元起
css
.box53 {height: 614px;width: 1226px;/* background-color: pink; */margin: 0 auto;
}.box5 .box53 .f531 {float: left;height: 614px;width: 234px;/* background-color: skyblue; */
}.box5 .box53 .f532 {float: right;height: 614px;width: 992px;/* background-color: pink; */
}.box5 .box53 .f532 ul li {float: left;height: 300px;width: 234px;margin-left: 14px;margin-bottom: 4px;/* background-color: skyblue; */background-color: #FFFFFF;
}.box5 .box53 .f532 ul li>img {width: 100%;
}尾部代码
mi.com京ICP证110507号网络食品经营备案京食药网食备202010048违法和不良信息举报电话:171-5104-4404本网站所列数据，除特殊说明，所有数据均出自我可实验室测试
让全球每个人都能享受科技带来的美好生活
总结
- 基本还原了原网页，并且只用到了CSS3和HTML5。
- 当自主完成，满满成就感！
源码+图片素材
链接：https://pan.baidu.com/s/1epYSRtiOmExblrkoxNlRsg?pwd=ojbk
提取码：ojbk
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！