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本网站所列数据,除特殊说明,所有数据均出自我可实验室测试

让全球每个人都能享受科技带来的美好生活

总结 

  1. 基本还原了原网页,并且只用到了CSS3和HTML5。
  2. 当自主完成,满满成就感!

源码+图片素材

链接:https://pan.baidu.com/s/1epYSRtiOmExblrkoxNlRsg?pwd=ojbk 
提取码:ojbk


本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部