电商官网静态页面
作为一个前端开发，基础页面布局和样式是必备，我们拿电商具体（模块、丰富度）都足够
- 有趣实用的CSS效果
- 前端博客 传送门
- LeetCode个人题解 传送门
- leetCode题解 book版
仿小米官网静态页面
小米静态官网预览地址
html部分
<body>
<div id="app">
<div class="fix-tool">
<a target="_blank" href="https://blog.csdn.net/jbj6568839z">导航1a>
<a target="_blank" href="https://blog.csdn.net/jbj6568839z">导航2a>
<a target="_blank" href="https://blog.csdn.net/jbj6568839z">导航3a>
<a target="_blank" href="https://blog.csdn.net/jbj6568839z">导航4a>
<a target="_blank" href="https://blog.csdn.net/jbj6568839z">导航5a>
div>
<div class="main-header">
<div class="main-nav">
<div class="list">
<a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">小米商城a>
<a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">MIUIa>
<a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">IoTa>
<a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">金融a>
<a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">有品a>
<a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">小爱开放平台a>
<a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">企业团购a>
<a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">资质证照a>
<a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">协议规则a>
<a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">下载appa>
div>
<div class="login">
<div class="item">登陆div>
<div class="item">注册div>
<div class="item">消息通知div>
div>
div>
div>
<div class="main-body">
<div class="container-1">
<img src="./img/logo-1.jpg">
<div class="nav-list">
<a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">小米手机 a>
<a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">Redmi 红米a>
<a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">电视a>
<a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">笔记本a>
<a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">家电a>
<a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">路由器a>
<a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">智能硬件a>
<a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">服务a>
<a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">社区a>
div>
<input type="text" placeholder="小米电视 小米音响">
<a class="hid-content" target="_blank" href="https://blog.csdn.net/jbj6568839z">
<div class="item">
<img src="./img/hid-1.jpg" alt="">
<p>小米全面屏电视 E55Ap>
<p>1799元p>
div>
<div class="item">
<img src="./img/hid-1.jpg" alt="">
<p>小米全面屏电视 E55Ap>
<p>1799元p>
div>
<div class="item">
<img src="./img/hid-1.jpg" alt="">
<p>小米全面屏电视 E55Ap>
<p>1799元p>
div>
<div class="item">
<img src="./img/hid-1.jpg" alt="">
<p>小米全面屏电视 E55Ap>
<p>1799元p>
div>
<div class="item">
<img src="./img/hid-1.jpg" alt="">
<p>小米全面屏电视 E55Ap>
<p>1799元p>
div>
<div class="item">
<img src="./img/hid-1.jpg" alt="">
<p>小米全面屏电视 E55Ap>
<p>1799元p>
div>
a>
div>
<div class="container-2">
<ul class="left-nav">
<a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">手机 电话卡a>
<a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">电视 盒子a>
<a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">笔记本 显示器 平板a>
<a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">家电 插线板a>
<a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">出行 穿戴a>
<a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">智能 路由器a>
<a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">电源 配件a>
<a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">健康 配件a>
<a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">耳机 音箱a>
<a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">生活 箱包a>
<div class="hid-content">
div>
ul>
<div id="slider-box" class="slider-box slider-box-1">
<div class="switch">
<span class="btn" id="per" onclick="pre()">左span>
<span class="btn" id="next" onclick="next()">右span>
div>
<ul class="nav">
<li>li>
<li>li>
<li>li>
<li>li>
<li>li>
ul>
div>
div>
<div class="container-3">
<div class="nav-list">
<div class="item">
<img class="icon"
src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48">
<span>小米秒杀span>
div>
<div class="item">
<img class="icon"
src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48">
<span>小米秒杀span>
div>
<div class="item">
<img class="icon"
src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48">
<span>小米秒杀span>
div>
<div class="item">
<img class="icon"
src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48">
<span>小米秒杀span>
div>
<div class="item">
<img class="icon"
src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48">
<span>小米秒杀span>
div>
<div class="item">
<img class="icon"
src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48">
<span>小米秒杀span>
div>
div>
<img class="img-con-3" src="./img/con-3-1.jpg">
<img class="img-con-3" src="./img/con-3-2.jpg">
<img class="img-con-3" src="./img/con-3-3.jpg">
div>
<div class="container-4">
<div class="box">
<div class="title">小米闪购div>
<div class="content">
<div class="item item-1">
<div class="img">div>
<p class="name">小米净水器500G 白色p>
<p>感应出泡，高效清洁p>
<div class="price"><span class="price-now">888元span><span class="price-last">1120元span>
div>
div>
<div class="item item-2">
<div class="img">div>
<p class="name">小米净水器500G 白色p>
<p class="desc">感应出泡，高效清洁p>
<div class="price"><span class="price-now">888元span><span class="price-last">1120元span>
div>
div>
<div class="item item-3">
<div class="img">div>
<p class="name">小米净水器500G 白色p>
<p class="desc">感应出泡，高效清洁p>
<div class="price"><span class="price-now">888元span><span class="price-last">1120元span>
div>
div>
<div class="item item-4">
<div class="img">div>
<p class="name">小米净水器500G 白色p>
<p class="desc">感应出泡，高效清洁p>
<div class="price"><span class="price-now">888元span><span class="price-last">1120元span>
div>
div>
<div class="item item-5">
<div class="img">div>
<p class="name">小米净水器500G 白色p>
<p class="desc">感应出泡，高效清洁p>
<div class="price"><span class="price-now">888元span><span class="price-last">1120元span>
div>
div>
div>
div>
div>
<div class="container-5">
<img src="./img/banner-2.jpg" alt="">
div>
<div class="container-6">
<div class="box">
<div class="title">
<span>手机span>
<span>查看全部span>
div>
<div class="content">
<img class="phone-img" src="./img/phone-logo.jpg" alt="">
<div class="phone-box">
<div class="item">
<img src="./img/phone-1.jpg" alt="">
<p class="name">小米CC9 Prop>
<p class="desc">1亿像素 五摄四像p>
<p class="price">2799元起p>
div>
<div class="item">
<img src="./img/phone-1.jpg" alt="">
<p class="name">小米CC9 Prop>
<p class="desc">1亿像素 五摄四像p>
<p class="price">2799元起p>
div>
<div class="item">
<img src="./img/phone-1.jpg" alt="">
<p class="name">小米CC9 Prop>
<p class="desc">1亿像素 五摄四像p>
<p class="price">2799元起p>
div>
<div class="item">
<img src="./img/phone-1.jpg" alt="">
<p class="name">小米CC9 Prop>
<p class="desc">1亿像素 五摄四像p>
<p class="price">2799元起p>
div>
<div class="item">
<img src="./img/phone-1.jpg" alt="">
<p class="name">小米CC9 Prop>
<p class="desc">1亿像素 五摄四像p>
<p class="price">2799元起p>
div>
<div class="item">
<img src="./img/phone-1.jpg" alt="">
<p class="name">小米CC9 Prop>
<p class="desc">1亿像素 五摄四像p>
<p class="price">2799元起p>
div>
<div class="item">
<img src="./img/phone-1.jpg" alt="">
<p class="name">小米CC9 Prop>
<p class="desc">1亿像素 五摄四像p>
<p class="price">2799元起p>
div>
<div class="item">
<img src="./img/phone-1.jpg" alt="">
<p class="name">小米CC9 Prop>
<p class="desc">1亿像素 五摄四像p>
<p class="price">2799元起p>
div>
div>
div>
div>
div>
<div class="container-7">
<img src="./img/banner-1.jpg" alt="">
div>
div>
<div class="main-footer">
<div class="container">
<div class="nav">
<div class="item">预约维修服务div>
<div class="item">7天无理由退货div>
<div class="item">15天免费换货div>
<div class="item">满150元包邮div>
<div class="item" >520余家售后网点div>
div>
<div class="feature-box">
<div class="feature">
<dl class="item">
<dt>帮助中心dt>
<dd>账户管理dd>
<dd>账户管理dd>
<dd>账户管理dd>
dl>
<dl class="item">
<dt>帮助中心dt>
<dd>账户管理dd>
<dd>账户管理dd>
<dd>账户管理dd>
dl>
<dl class="item">
<dt>帮助中心dt>
<dd>账户管理dd>
<dd>账户管理dd>
<dd>账户管理dd>
dl>
<dl class="item">
<dt>帮助中心dt>
<dd>账户管理dd>
<dd>账户管理dd>
<dd>账户管理dd>
dl>
<dl class="item" style="border-right: 1px solid #ccc;">
<dt>帮助中心dt>
<dd>账户管理dd>
<dd>账户管理dd>
<dd>账户管理dd>
dl>
div>
<div class="service">
<p class="center">WX: j565017805p>
<p class="center">CSDN:https://blog.csdn.net/jbj6568839z<br/>欢迎点赞！！！p>
<p class="center">博健p>
div>
div>
div>
div>
<img class="footer-img" src="./img/footer.png" alt="">
div>
<script src="./js/index.js">script>
body>
CSS部分
#app{
min-width: 1226px;
margin-right: auto;
margin-left: auto;
}
img{
display: block;
}
.center{
text-align: center;
}
/* 头部 */
.main-header{
position: relative;
z-index: 30;
height: 40px;
font-size: 12px;
color: #b0b0b0;
background: #333;
}
.main-header .main-nav{
width: 1226px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
height: 40px;
}
.main-nav .list,.login{
display: flex;
}
.main-nav .list .item{
color: #b0b0b0;
margin-right: 15px;
}
.main-nav .list .item:hover{
color: #fff;
}
.main-nav .login .item{
color: #b0b0b0;
margin-left: 15px;
}
/* 主内容 */
.main-body{
width: 100%;
}
/* 盒子一 */
.container-1{
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
width: 1226px;
margin: 0 auto;
height: 100px;
}
.container-1 img{
display: block;
width: 52px;
height: 52px;
}
.container-1 .hid-content{
position: absolute;
top: 100px;
left: 0;
z-index: 2;
width: 100%;
height: 0;
background: #fff;
overflow: hidden;
transition: height .28s;
display: flex;
justify-content: space-around;
align-items: center;
}
.container-1 .hid-content .item{
display: flex;
flex-direction: column;
align-items: center;
}
.container-1 .hid-content .item img{
width: 160px;
height: 110px;
border-right: 1px solid #ddd;
}
.container-1 .nav-list .item{
color: #333;
font-size: 16px;
transition: color .3s ease-in-out;
margin-right: 15px;
}
.container-1 .nav-list .item:hover{
color: #f40;
}
.container-1:hover .hid-content{
height: 200px;
border-top: 1px solid #ccc;
box-shadow: 0 3px 5px rgba(0,0,0,0.4);
}
.container-1 input{
width: 223px;
height: 48px;
border: 1px solid #e0e0e0;
text-align: right;
padding: 10px;
}
/* 盒子二 */
.container-2{
position: relative;
width: 1226px;
margin: 0 auto;
}
.container-2 .left-nav{
position: absolute;
top: 0;
left: 0;
z-index: 1;
display: flex;
flex-direction: column;
padding: 20px 0;
height: 460px;
border: 0;
color: #fff;
background: rgba(105,101,101,.6);
}
.container-2 .left-nav:hover .hid-content{
display: block;
}
.container-2 .left-nav .item{
position: relative;
display: block;
padding-left: 30px;
height: 42px;
line-height: 42px;
width: 230px;
color: #fff;
font-weight: 350;
}
.container-2 .left-nav .hid-content{
position: absolute;
top: 0;
left: 230px;
width: 400px;
height: 100%;
border: 1px solid #ccc;
padding: 30px;
background: #fff;
display: none;
}
.container-2 .left-nav .item:hover{
background: #ff6700;
}
.container-2 .slider-box{
position: relative;
width: 1226px;
height: 460px;
}
.container-2 .slider-box-1{
background: url('../img/1.jpg');
background-size: cover;
}
.container-2 .slider-box-2{
background: url('../img/2.jpg');
background-size: cover;
}
.container-2 .slider-box-3{
background: url('../img/3.jpg');
background-size: cover;
}
.container-2 .slider-box-4{
background: url('../img/4.jpg');
background-size: cover;
}
.container-2 .slider-box-5{
background: url('../img/5.jpg');
background-size: cover;
}
.container-2 .slider-box .switch{
position: absolute;
right: 0;
top: 50%;
margin-top: -20px;
width: 996px;
height: 40px;
display: flex;
justify-content: space-between;
align-items: center;
}
.container-2 .slider-box .switch .btn{
width: 30px;
height: 50px;
line-height: 50px;
text-align: center;
background: rgba(0,0,0,0.1);
color: #eee;
}
.container-2 .slider-box .switch .btn:hover{
color: #F40;
cursor: pointer;
}
.container-2 .slider-box .nav{
position: absolute;
right: 50px;
bottom: 0;
width: 90px;
height: 30px;
display: flex;
justify-content: space-between;
align-items: center;
}
.container-2 .slider-box .nav li{
width: 12px;
height: 12px;
border-radius: 50%;
background: #fff;
border: 3px solid #bbb;
}
/* 盒子三 */
.container-3{
display: flex;
justify-content: space-between;
margin: 20px auto 0;
width: 1226px;
padding-bottom: 20px;
}
.container-3 .nav-list{
width: 234px;
height: 170px;
display: flex;
flex-wrap: wrap;
font-size: 12px;
text-align: center;
color: #fff;
background: #5f5750;
}
.container-3 .nav-list .item{
display: flex;
flex-direction: column;
justify-content: center;
width: 78px;
height: 85px;
transition: all .28s;
}
.container-3 .nav-list .item:hover{
cursor: pointer;
opacity: 0.5;
}
.container-3 .nav-list .item .icon{
display: block;
width: 24px;
height: 24px;
margin: 0 auto 4px;
}
.container-3 .img-con-3{
width: 316px;
height: 170px;
}
/* 盒子四 */
.container-4{
width: 100%;
background: #f5f5f5;
}
.container-4 .box{
width: 1226px;
margin: 0 auto;
}
.container-4 .box .title{
font-size: 22px;
line-height: 58px;
}
.container-4 .box .content{
display: flex;
justify-content: space-between;
}
.container-4 .box .content .item{
width: 234px;
height: 399px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.container-4 .box .content .item .img{
width: 200px;
height: 200px;
}
.container-4 .box .content .item .name{
font-size: 16px;
color: #000;
}
.container-4 .box .content .item .desc{
font-size: 12px;
color: #aaa;
margin-top: 5px;
}
.container-4 .box .content .item .price{
margin-top: 15px;
}
.container-4 .box .content .item .price .price-now{
color: #f40;
}
.container-4 .box .content .item .price .price-last{
color: #CCC;
text-decoration: line-through;
margin-left: 2px;
}
.container-4 .box .content .item .img{
background: url('../img/con-4-1.jpg') center no-repeat;
background-size: 200px 200px;
}
.container-4 .box .content .item{
background: #fff;
}
.container-4 .box .content .item-1{
border-top: 1px solid palevioletred;
}
.container-4 .box .content .item-2{
border-top: 1px solid red;
}
.container-4 .box .content .item-3{
border-top: 1px solid green;
}
.container-4 .box .content .item-4{
border-top: 1px solid orange;
}
.container-4 .box .content .item-5{
border-top: 1px solid blue;
}
/* 盒子五 */
.container-5{
background: #f5f5f5;
padding: 16px 0;
}
.container-5 img{
width: 1226px;
height: 120px;
margin: 0 auto;
}
/* 盒子六 */
.container-6{
background: #f5f5f5;
}
.container-6 .box{
width: 1226px;
margin: 0 auto;
}
.container-6 .box .title{
display: flex;
justify-content: space-between;
font-size: 22px;
line-height: 58px;
}
.container-6 .box .content{
display: flex;
justify-content: space-between;
}
.container-6 .box .content .phone-img{
width: 234px;
height: 634px;
}
.container-6 .box .content .phone-box{
width: 978px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.container-6 .box .content .phone-box .item{
display: flex;
flex-direction: column;
align-items: center;
width: 234px;
height: 310px;
background: #fff;
padding: 20px 0;
}
.container-6 .box .content .phone-box .item img{
width: 160px;
height: 160px;
}
.container-6 .box .content .phone-box .item .name{
margin-top: 10px;
margin-bottom: 3px;
}
.container-6 .box .content .phone-box .item .desc{
line-height: 24px;
color: #bbb;
}
.container-6 .box .content .phone-box .item .price{
margin-top: 15px;
font-size: 16px;
color: #f40;
}
/* 盒子七 */
.container-7{
background: #f5f5f5;
padding: 16px 0;
}
.container-7 img{
width: 1226px;
height: 120px;
margin: 0 auto;
}
.main-footer{
}
.main-footer .container{
width: 1226px;
margin-right: auto;
margin-left: auto;
}
.main-footer .container .nav{
display: flex;
justify-content: space-between;
height: 80px;
padding: 27px 0;
border-bottom: 1px solid #ccc;
}
.main-footer .container .nav .item{
width: 243px;
text-align: center;
transition: color .28s;
}
.main-footer .container .nav .item:hover{
color: #f40;
cursor: pointer;
}
.main-footer .container .nav .item:not(:last-child){
border-right: 1px solid #ccc;
}
.main-footer .container .feature-box{
display: flex;
justify-content: space-between;
}
.main-footer .container .feature-box .feature{
display: flex;
padding: 30px 0;
}
.main-footer .container .feature-box .feature .item{
width: 180px;
}
.main-footer .container .feature-box .feature .item dt{
height: 50px;
line-height: 50px;
font-size: 16px;
}
.main-footer .container .feature-box .feature .item dd{
line-height: 30px;
color: rgba(0,0,0,0.6);
}
.main-footer .container .feature-box .service{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 250px;
padding: 30px 0;
}
.main-footer .container .feature-box .service p:nth-child(1){
margin: 0 0 5px;
font-size: 22px;
line-height: 1;
color: #ff6700;
}
.main-footer .container .feature-box .service p:nth-child(2){
font-size: 12px;
margin-top: 5px;
margin-bottom: 20px;
}
.main-footer .container .feature-box .service p:nth-child(3){
border: 1px solid #ff6700;
background: #fff;
color: #ff6700;
width: 118px;
height: 28px;
font-size: 12px;
line-height: 28px;
cursor: pointer;
}
.footer-img{
width: 1226px;
height: auto;
margin: 0 auto;
}
.fix-tool{
position: fixed;
top: 55%;
display: flex;
flex-direction: column;
width: 60px;
height: 300px;
background: #fff;
left: 50%;
margin-left: 613px;
border: 1px solid #ccc;
}
.fix-tool a{
width: 60px;
height: 60px;
text-align: center;
line-height: 60px;
}
.fix-tool a:hover{
background: rgba(0,0,0,0.2);
}
注意如果粘贴过去的代码和示例不一样，那可能是因为我对一些标签样式进行了初始化，消除了诸如a标签，li标签等默认样式。
- 创建basic.css文件
- 将下方代码粘贴进去
- 在html中用 link标签引入
/*公共样式--开始*/
html, body, div, ul, li, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, form, input, textarea, th, td, select {
margin: 0;
padding: 0;
}
*{box-sizing: border-box;}
html, body {
min-height: 100%;
}
body {
font-family: "Microsoft YaHei";
font-size:14px;
color:#333;
}
h1, h2, h3, h4, h5, h6{font-weight:normal;}
ul,ol {
list-style: none;
}
img {
border: none;
vertical-align: middle;
}
a {
text-decoration: none;
color: #232323;
}
table {
border-collapse: collapse;
table-layout: fixed;
}
input, textarea {
outline: none;
border: none;
}
textarea {
resize: none;
overflow: auto;
}
.clearfix {
zoom: 1;
}
.clearfix:after {
content: ".";
width: 0;
height: 0;
visibility: hidden;
display: block;
clear: both;
overflow:hidden;
}
.fl {
float: left
}
.fr {
float: right
}
.tl {
text-align: left;
}
.tc {
text-align: center
}
.tr {
text-align: right;
}
.ellipse {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.inline{
display: inline-block;
*display: inline;
*zoom: 1;
}
如果帮助到了您，不妨去我的github仓库点个star吧～
点击传送门进入代码仓库
- 官网代码仓库
点击star
好像一个循序善诱的老奶奶。。。谢谢大家
PS：作为静态网页，练习的主要是布局能力，即DIV+CSS结合后的能力
我也考虑过在这基础上加上js（jQ）的代码更贴近真实的网页，更多的交互与否取决于你们的需要，如果对你们有帮助，请留言吧～