HTML5+CSS3实现小米商城 （完整版）
•
前端
前言
对于小米商城，也是自己初学前端的一个小作品吧，这个网页大概写了有三四天吧，总体感受就是写着还行，只要有耐心，就一定能成功。
一 、网页分析
1. 头部导航栏。
2. 两边的侧边栏。
3.中间的轮播图。
4.下面的广告部分。
二 、效果展示
三 、代码分析
注 ：因为代码较多，这里展示部分，全部代码 放在下方 链接网盘里。
1. 轮播图部分
.head3 { // CSS部分
width: 1226px;
margin-left: 146px;
margin-right: 146px;
height: 400px;
margin-top: 14px;
margin-bottom: 35px;
overflow: hidden;
float: left;
}
.head3_lunbo {
width: 4904px;
height: 400px;
animation: text 15s infinite backwards;
/*消除图片间隔*/
}
.head3_lunbo img {
width: 1226px;
height: 400px;
float: left;
}
@keyframes text {
/*0%-20%是播放下一个图片，0%-10%是图片暂停的时间*/
0%,
20% {
margin-left: 0px;
}
25%,
45% {
margin-left: -1226px;
}
50%,
70% {
margin-left: -2452px;
}
75%,
100% {
margin-left: -3678px;
}
}
2. 广告块部分
手机
查看更多
Xiaomi 12S Ultra
这真徕卡|专业徕卡影像
<!-- 5999元起
-->
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. 右侧固定栏
手机APP
扫码领取新
人百元红包
个人中心
售后服务
人工服务
购物车
// CSS部分
.cebian {
position: fixed;
width: 94px;
height: 455px;
top: 40px;
background-color: #ffffff;
left: 1423px;
border-left: 1px solid #f6f6f6;
border-bottom: 1px solid #f6f6f6;
border-top: 1px solid #f6f6f6;
}
.cebian div {
width: 94px;
height: 91px;
border-bottom: 1px solid #f6f6f6;
}
.cebian_1 {
width: 94px;
height: 91px;
border-bottom: 1px solid #f6f6f6;
z-index: 5;
}
.cebian_2 {
/* padding: 14px; */
background-color: #ffffff;
position: absolute;
left: -150px;
top: -1px;
border-bottom: 1px solid #f6f6f6;
display: none;
z-index: 5;
}
.cebian_1:hover .cebian_2 {
display: block;
z-index: 5;
}
.cebiandiv {
border-bottom: 1px solid #f5f5f5;
}
.cebian img {
margin-top: 18px;
margin-left: 32px;
/* margin: 0 auto; */
width: 30px;
height: 30px;
}
.cebian p {
color: #999999;
text-align: center;
}
.cebian a {
display: inline-block;
text-decoration: none;
width: 94px;
height: 91px;
}
.cebian p:hover {
color: #ff6700;
}
4.左侧导航栏
手机
Xiaomi 12S
Redmi 10A
Xiaomi 12S
Xiaomi 12S
iphone 13
Xiaomi 12S
Xiaomi 12S
Xiaomi 12S
Redmi K50
Xiaomi 12S
Xiaomi 12S
Xiaomi 12S
Note 11 4G
Xiaomi 12S
Xiaomi 12S
Redmi K40S
Xiaomi 12S
Xiaomi 12S
Xiaomi 12S
黑鲨5
Xiaomi 12S
Note 11T Pro
Xiaomi 12S
Xiaomi Civi
电视
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 K50
Redmi智能电视X55 55英寸
小米电视ES43 2022款
Xiaomi 12S
小米电视5 75英寸
小米电视5 75英寸
Xiaomi 12S
小米平板5Pro
小米电视5 75英寸
小米笔记本 Pro 14
Xiaomi 12S
<!--
黑鲨5 -->
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
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 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 K50 -->
Redmi智能电视X55 55英寸
小米电视ES43 2022款
<!--
Xiaomi 12S -->
小米电视5 75英寸
小米电视5 75英寸
<!--
Xiaomi 12S -->
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英寸
<!--
Xiaomi 12S -->
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
大家有任何问题 都可以在评论区指出，谢谢哟！
本文来自网络，不代表协通编程立场，如若转载，请注明出处：https://net2asp.com/4ad9017588.html
赞 (0)
开窗函数的使用详解(窗口范围ROWS与RANGE图文详解)
下一篇 »
1天前
相关推荐
-
通过eXtplorer+cpolar，搭建个人云存储并实现访问内网服务器数据
文章目录 1. 前言 2. eXtplorer网站搭建 2.1 eXtplorer下载和安装 2.2 eXtplorer网页测试 2.3 cpolar的安装和注册 3.本地网页发布…
-
linux操作es 命令
1.检查ES节点是否正常启动 curl http://192.168.6.16:9200 正常状态： 非正常状态： 1>确保服务是不是正常启动了，端口用的是哪个 2&…
-
elasticsearch基础6——head插件安装和web页面查询操作使用、ik分词器
文章目录 一、基本了解 1.1 插件分类 1.2 插件管理命令 二、分析插件 2.1 es中的分析插件 2.1.1 官方核心分析插件 2.1.2 社区提供分析插件 2.2 API扩…
-
redis(win版)
1. 前言 1.1 什么是Redis Redis是一个基于内存的key-value结构数据库。Redis 是互联网技术领域使用最为广泛的存储中间件，它是「Remote Dictio…
-
前端使用 xlsx.js 工具读取 excel 遇到时间日期少 43 秒的解决办法
在使用 xlsx 读取 excel 的时间格式的数据时，如 ‘2023-11-30’，‘2023/11/30’ ，默认会读取一串数字字符串，如：‘45260’，此时需要在 read…
-
renren-fast-vue 启动过程踩坑记录以及最终解决 最新2023
最近在做一个微信/支付宝 支付开发的商城项目，准备用人人开源https://gitee.com/renrenio快速搭建好前后端分离的框架，在使用前端vue遇到了npm inst…
-
2023年最新Webstorm免费安装教程
前言 WebStorm 是 JetBrains 公司推出的一款专业的前端开发工具，它提供了丰富的功能和工具，能够帮助开发人员更快、更高效地开发 Web 应用程序。使用 WebSto…
-
从零开始实现C++ TinyWebServer（九）—- 项目知识点总结
文章目录 前言 项目介绍 为什么要做这样一个项目？ 项目背景 项目描述 项目功能 项目流程 项目重难点 项目效果 解决方案 个人收获 线程池 线程的同步机制有哪些？ 线程池中的工作…
-
前端随笔：HTML/CSS/JavaScript和Vue
前端随笔 1：HTML、JavaScript和Vue 最近因为工作需要，需要接触一些前端的东西。之前虽然大体上了解过HTML、CSS和JavaScript，也知道HTML定义了内容…
-
前端vue简单实用折叠面板可以折叠收起展开内容区域
随着技术的发展，开发的复杂度也越来越高，传统开发方式将一个系统做成了整块应用，经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改，造成牵一发而动全身。通过…
