| HTML5+CSS3实现小米商城 （完整版） | 您所在的位置：网站首页 › yahoo购物app › HTML5+CSS3实现小米商城 （完整版） |
HTML5+CSS3实现小米商城 （完整版）
|
前言
对于小米商城，也是自己初学前端的一个小作品吧，这个网页大概写了有三四天吧，总体感受就是写着还行，只要有耐心，就一定能成功。 一 、网页分析 1. 头部导航栏。 2. 两边的侧边栏。 3.中间的轮播图。 4.下面的广告部分。 二 、效果展示
2. 广告块部分
手机
查看更多
Xiaomi 12S Ultra
这真徕卡;;|;;专业徕卡影像 9.9元起 5999元起
Xiaomi 12S Pro
骁龙8+ 旗舰处理器;;|;;徕卡影像 8.8元起 5999元起
Xiaomi 12S
小尺寸性能旗舰;;|;;徕卡影像 3999元起 
Xiaomi 12S Pro 天玑版
全球首发天玑9000+;;|;;叶脉冷泵散热系统超强 3999元起 
Redmi Note 11T Pro+
天玑8100;;|;;真旗舰芯 61.88元起 5999元起
Redmi Note 11T Pro
天玑8100;;|;;真旗舰芯 1699元起 
Redmi Note 11SE
双卡双5G;;|;;疾速登陆 0.01元起 5999元起
Xiaomi Civi 1S
原生美肌人像;;|;;奇迹阳光动人新色;;|;;旗舰神机器 2299元起 .con2 { // CSS部分 width: 1226px; height: 672px; } .con2_1 { width: 1226px; height: 58px; } .con2_1_a { display: inline-block; text-decoration: none; } .con2_1_img { display: inline-block; background-image: url(xiala.jpg); background-repeat: no-repeat; width: 38px; height: 34px; position: relative; top: 10px; } .con2_1_s1 { font-size: 24px; margin-right: 1050px; line-height: 58px; font-weight: 150; } .con2_1_s2 { color: #454349; /* margin-bottom: 5px; */ /* float: right; */ } .con2_1_s2:hover { color: #ff6700; } .con2_2 { width: 1226px; height: 641px; } .con2_2_1 { display: inline-block; width: 224px; height: 641px; margin-top: 10px; margin-right: 14px; transition: all .2s linear; } .con2_2_1_plus { display: inline-block; width: 224px; height: 61px; margin-top: 10px; margin-right: 14px; /* transition: all .2s linear; */ } .con2_2_1_pro { display: inline-block; width: 224px; height: 61px; margin-top: 10px; margin-right: 14px; /* transition: all .2s linear; */ } /* .con2_2_1:hover { box-shadow: 4px 20px 40px 5px rgba(0, 0, 0, .1); margin-top: 8px; } */ .con2_2_2 { width: 973px; height: 641px; /* background-color: blue; */ /* position: relative; */ display: -webkit-flex; display: flex; /* -webkit-flex-wrap: wrap; */ flex-wrap: wrap; float: right; align-content: space-between; justify-content: space-between; } .con2_2_2_div { display: inline-block; width: 230px; height: 308px; background-color: #ffffff; margin-top: 10px; /* display: block; */ transition: all .2s linear; } .con2_2_2_div:hover { box-shadow: 4px 20px 40px 5px rgba(0, 0, 0, .1); margin-top: 8px; /* margin-bottom: 8px; */ } .con2_2_2_div_plus { margin-top: 50px; display: inline-block; width: 230px; height: 30px; background-color: #ffffff; /* margin-top: 10px; */ /* display: block; */ } .con2_2_a { display: inline-block; width: 230px; height: 308px; text-decoration: none; } .con2_2_2_img { width: 150px; height: 165px; margin-left: 40px; margin-top: 20px; } .con2_2_h { color: #444444; font-weight: 500; font-size: 15px; /* margin-left: 56px; */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; } .con2_2_p1 { font-size: 12px; color: #b1b0b1; /* margin-left: 45px; */ margin-top: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; } .con2_2_p2 { font-size: 15px; color: #ff6c0d; /* margin-left: 79px; */ margin-top: 10px; text-align: center; } 3. 右侧固定栏
Xiaomi 12S
Note 11T Pro
小米电视ES43 2022款
出行 穿戴
Xiaomi 12S
Redmi 10A
Redmi X65 2022款
小米电视6至尊版 65英寸
iphone 13
小米电视6 65" OLED
小米电视5 75英寸
Xiaomi 12S
Redmi K50
Redmi智能电视X55 55英寸
小米电视ES43 2022款
小米电视5 75英寸
小米电视5 75英寸
Redmi K40S
小米电视5 75英寸
耳机 音箱
Xiaomi 12S
Redmi 10A
Redmi X65 2022款
小米电视6至尊版 65英寸
iphone 13
小米电视6 65" OLED
小米电视5 75英寸
Xiaomi 12S
Redmi K50
Redmi智能电视X55 55英寸
小米电视ES43 2022款
小米电视5 75英寸
小米电视5 75英寸
Xiaomi 12S
小米电视5 75英寸
Xiaomi 12S
Xiaomi 12S
Xiaomi 12S
Note 11T Pro
小米电视ES43 2022款
家电
Xiaomi 12S
Redmi 10A
Redmi X65 2022款
小米电视6至尊版 65英寸
iphone 13
小米电视6 65" OLED
小米电视5 75英寸
Xiaomi 12S
Redmi K50
Redmi智能电视X55 55英寸
小米电视ES43 2022款
Xiaomi 12S
小米电视5 75英寸
小米电视5 75英寸
Xiaomi 12S
Redmi K40S
小米电视5 75英寸
Xiaomi 12S
Xiaomi 12S
黑鲨5
Xiaomi 12S
Note 11T Pro
小米电视ES43 2022款
小米电视ES43 2022款
智能 路由器
Xiaomi 12S
Redmi 10A
Redmi X65 2022款
小米电视6至尊版 65英寸
iphone 13
小米电视6 65" OLED
小米电视5 75英寸
Xiaomi 12S
Redmi智能电视X55 55英寸
小米电视ES43 2022款
小米电视5 75英寸
小米电视5 75英寸
Redmi K40S
小米电视5 75英寸
电源 配件
Xiaomi 12S
Redmi 10A
Redmi X65 2022款
小米电视6至尊版 65英寸
iphone 13
小米电视6 65" OLED
小米电视5 75英寸
Xiaomi 12S
Redmi K50
Redmi智能电视X55 55英寸
小米电视ES43 2022款
健康 儿童
Xiaomi 12S
Redmi 10A
Redmi X65 2022款
小米电视6至尊版 65英寸
iphone 13
小米电视6 65" OLED
小米电视5 75英寸
Xiaomi 12S
Redmi K50
Redmi智能电视X55 55英寸
小米电视ES43 2022款
Xiaomi 12S
小米电视5 75英寸
小米电视5 75英寸
Redmi K40S
小米电视5 75英寸
// CSS 部分
.head3_div1 {
width: 234px;
height: 400px;
/* padding-top: 20px; */
/* padding-bottom: 20px; */
/* background-color: #7d7389; */
background-color: rgba(105, 101, 101, .6);
position: absolute;
/* top: -40px; */
top: 154px;
}
.head3_div1_1 {
width: 234px;
height: 62px;
color: #ffffff;
position: absolute;
float: left;
}
.head3_div1_s {
width: 234px;
height: 42px;
/* padding-left: 30px; */
float: left;
margin-top: 20px;
}
.head3_div1_s1 {
margin-left: 40px;
float: left;
position: absolute;
top: 28px;
}
.head3_div1_s2 {
background-image: url(you.png);
width: 16px;
height: 16px;
background-repeat: no-repeat;
position: absolute;
right: 20px;
top: 30px;
}
.head3_div1_s:hover {
background-color: #ff6700;
}
.head3_div1_1_2 {
width: 992px;
height: 400px;
/* background-color: red; */
background-color: #ffffff;
/* position: relative; */
position: absolute;
right: -993px;
/* top: -120px; */
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
align-content: flex-start;
/* flex-grow: 1; */
display: none;
}
.head3_div1_1_2s {
/* display: inline-block; */
width: 247px;
height: 65px;
/* background-color: aqua; */
float: left;
/* margin: 10px; */
}
.head3_div1_1_2s img {
margin-left: 20px;
height: 60px;
width: 45px;
}
.head3_div1_1_2s span {
color: #3e3e3e;
position: relative;
top: -28px;
font-size: 14px;
}
.head3_div1_1_2s span:hover {
color: #ff6700;
cursor: pointer;
}
.head3_div1_1:hover .head3_div1_1_2 {
display: block;
}
.head3_div1_2 {
width: 234px;
height: 42px;
/* float: left; */
position: absolute;
top: 62px;
color: #ffffff;
}
.head3_div2_s {
width: 234px;
height: 42px;
/* padding-left: 30px; */
float: left;
/* margin-top: 20px; */
}
.head3_div2_s>span {
position: absolute;
top: 10px;
}
.head3_div2_s:hover {
background-color: #ff6700;
}
.head3_div2_1_2 {
width: 992px;
height: 400px;
/* background-color: red; */
background-color: #ffffff;
/* position: relative; */
position: absolute;
right: -993px;
top: -62px;
/* top: -120px; */
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
align-content: flex-start;
/* flex-grow: 1; */
display: none;
}
.head3_div1_2:hover .head3_div2_1_2 {
display: block;
}
.head3_div1_3 {
width: 234px;
height: 42px;
/* float: left; */
position: absolute;
top: 104px;
color: #ffffff;
}
.head3_div3_s {
width: 234px;
height: 42px;
/* padding-left: 30px; */
float: left;
/* margin-top: 20px; */
}
.head3_div3_s>span {
position: absolute;
top: 10px;
}
.head3_div3_s:hover {
background-color: #ff6700;
}
.head3_div3_1_2 {
width: 992px;
height: 400px;
/* background-color: red; */
background-color: #ffffff;
/* position: relative; */
position: absolute;
right: -993px;
top: -104px;
/* top: -120px; */
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
align-content: flex-start;
/* flex-grow: 1; */
display: none;
}
.head3_div1_3:hover .head3_div3_1_2 {
display: block;
}
.head3_div1_4 {
width: 234px;
height: 42px;
/* float: left; */
position: absolute;
top: 146px;
color: #ffffff;
}
.head3_div4_s {
width: 234px;
height: 42px;
/* padding-left: 30px; */
float: left;
/* margin-top: 20px; */
}
.head3_div4_s>span {
position: absolute;
top: 10px;
}
.head3_div4_s:hover {
background-color: #ff6700;
}
.head3_div4_1_2 {
width: 741px;
height: 400px;
/* background-color: red; */
background-color: #ffffff;
/* position: relative; */
position: absolute;
right: -742px;
top: -146px;
/* top: -120px; */
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
align-content: flex-start;
/* flex-grow: 1; */
display: none;
}
.head3_div1_4:hover .head3_div4_1_2 {
display: block;
}
.head3_div1_5 {
width: 234px;
height: 42px;
/* float: left; */
position: absolute;
top: 188px;
color: #ffffff;
}
.head3_div5_s {
width: 234px;
height: 42px;
/* padding-left: 30px; */
float: left;
/* margin-top: 20px; */
}
.head3_div5_s>span {
position: absolute;
top: 10px;
}
.head3_div5_s:hover {
background-color: #ff6700;
}
.head3_div5_1_2 {
width: 992px;
height: 400px;
/* background-color: red; */
background-color: #ffffff;
/* position: relative; */
position: absolute;
right: -993px;
top: -188px;
/* top: -120px; */
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
align-content: flex-start;
/* flex-grow: 1; */
display: none;
}
.head3_div1_5:hover .head3_div5_1_2 {
display: block;
}
.head3_div1_6 {
width: 234px;
height: 42px;
/* float: left; */
position: absolute;
top: 230px;
color: #ffffff;
}
.head3_div6_s {
width: 234px;
height: 42px;
/* padding-left: 30px; */
float: left;
/* margin-top: 20px; */
}
.head3_div6_s>span {
position: absolute;
top: 10px;
}
.head3_div6_s:hover {
background-color: #ff6700;
}
.head3_div6_1_2 {
width: 992px;
height: 400px;
/* background-color: red; */
background-color: #ffffff;
/* position: relative; */
position: absolute;
right: -993px;
top: -230px;
/* top: -120px; */
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
align-content: flex-start;
/* flex-grow: 1; */
display: none;
}
.head3_div1_6:hover .head3_div6_1_2 {
display: block;
}
.head3_div1_7 {
width: 234px;
height: 42px;
/* float: left; */
position: absolute;
top: 272px;
color: #ffffff;
}
.head3_div7_s {
width: 234px;
height: 42px;
/* padding-left: 30px; */
float: left;
/* margin-top: 20px; */
}
.head3_div7_s>span {
position: absolute;
top: 10px;
}
.head3_div7_s:hover {
background-color: #ff6700;
}
.head3_div7_1_2 {
width: 741px;
height: 400px;
/* background-color: red; */
background-color: #ffffff;
/* position: relative; */
position: absolute;
right: -742px;
top: -272px;
/* top: -120px; */
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
align-content: flex-start;
/* flex-grow: 1; */
display: none;
}
.head3_div1_7:hover .head3_div7_1_2 {
display: block;
}
.head3_div1_8 {
width: 234px;
height: 42px;
/* float: left; */
position: absolute;
top: 314px;
color: #ffffff;
}
.head3_div8_s {
width: 234px;
height: 42px;
/* padding-left: 30px; */
float: left;
/* margin-top: 20px; */
}
.head3_div8_s>span {
position: absolute;
top: 10px;
}
.head3_div8_s:hover {
background-color: #ff6700;
}
.head3_div8_1_2 {
width: 498px;
height: 400px;
/* background-color: red; */
background-color: #ffffff;
/* position: relative; */
position: absolute;
right: -499px;
top: -314px;
/* top: -120px; */
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
align-content: flex-start;
/* flex-grow: 1; */
display: none;
}
.head3_div1_8:hover .head3_div8_1_2 {
display: block;
}
.head3_div1_9 {
width: 234px;
height: 42px;
/* float: left; */
position: absolute;
top: 356px;
color: #ffffff;
}
.head3_div9_s {
width: 234px;
height: 42px;
/* padding-left: 30px; */
float: left;
/* margin-top: 20px; */
}
.head3_div9_s>span {
position: absolute;
top: 10px;
}
.head3_div9_s:hover {
background-color: #ff6700;
}
.head3_div9_1_2 {
width: 741px;
height: 400px;
/* background-color: red; */
background-color: #ffffff;
/* position: relative; */
position: absolute;
right: -742px;
top: -356px;
/* top: -120px; */
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
align-content: flex-start;
/* flex-grow: 1; */
display: none;
}
.head3_div1_9:hover .head3_div9_1_2 {
display: block;
}
.head3_div1_10 {
width: 234px;
height: 42px;
}
四 、总结收获
毕竟第一次做，代码写的可能比较乱，命名可能也不是太规范，以后多加改正。基本还原了原网页，并且只用到了CSS3和HTML5。
五 、完整版源码+图片素材
链接：https://pan.baidu.com/s/1538stsXWaPShaW6OGJM4Wg?pwd=0720 提取码：0720 大家有任何问题 都可以在评论区指出，谢谢哟！ |
【本文地址】
公司简介
联系我们