仿京东移动端首页的”秒杀区”样式
请帮忙看看有没有多用到fixed属性
图片欣赏
- html代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><link rel="stylesheet" href="//at.alicdn.com/t/font_2658027_x57wjewo7gk.css" /><link rel="stylesheet" href="//at.alicdn.com/t/font_2657095_ks49h5qoay.css" /><link rel="stylesheet" href="//at.alicdn.com/t/font_2657269_v7m0y1kdcb8.css" /></head><body><!-- 导航 --><div class="header"><!-- 左侧 --><div class="cd iconfont icon-A"></div><!--中间 --><div class="zhuti"><div class="ziti">JD</div><div class="sou iconfont icon-woyaosousuo"></div><input type="text" value="电子电器" class="sou_1" /></div><!-- 右侧 --><a href="" class="deng">登录</a></div><!-- 主体 --><div class="main"><!-- 小导航 --><ul class="nav"><li class="nav_1"><a href=""><imgsrc="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/125678/35/5947/4868/5efbf28cEbf04a25a/e2bcc411170524f0.png"alt=""/></a><a href="">京东超市</a></li><li class="nav_1"><a href=""><imgsrc="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/135931/4/3281/5598/5efbf2c0Edbdc82c7/ed9861b4ddfb9f30.png.webp"alt=""/></a><a href="">数码电器</a></li><li class="nav_1"><a href=""><imgsrc="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/140012/8/1804/3641/5efbf318E38bd5dad/0db99d859ab16ce9.png.webp"alt=""/></a><a href="">京东服饰</a></li><li class="nav_1"><a href=""><imgsrc="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/129215/21/5978/3618/5efbf344Ebec23ae8/59712d986b10bb0a.png.webp"alt=""/></a><a href="">京东生鲜</a></li><li class="nav_1"><a href=""><imgsrc="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/116602/7/11200/3796/5efbf375Ebba41029/f07cc166f368fa05.png.webp"alt=""/></a><a href="">京东到家</a></li><li class="nav_1"><a href=""><imgsrc="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/146390/3/1846/4909/5efbf39aEe5f5f797/300071558a9ab078.png.webp"alt=""/></a><a href="">充值缴费</a></li><li class="nav_1"><a href=""><imgsrc="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/179511/33/4023/3422/609e0d45Ea495a996/3783165b48cf1e08.png.webp"alt=""/></a><a href="">9.9元拼</a></li><li class="nav_1"><a href=""><imgsrc="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/113589/24/11332/4897/5efbf3feE705d87db/e5c12d5e943266b9.png.webp"alt=""/></a><a href="">领券</a></li><li class="nav_1"><a href=""><imgsrc="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/131663/33/3380/3674/5efbf50fEf79cf314/af4b57d2383e605d.png.webp"alt=""/></a><a href="">领金贴</a></li><li class="nav_1"><a href=""><imgsrc="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/123730/37/5924/4189/5efbf567E0a226121/d04df7c74c87cf68.png.webp"alt=""/></a><a href="">PLUS会员</a></li></ul><!-- \秒杀专区 --><div class="ms"><div class="lefe">京东秒杀</div><div class="ms_0"><div class="ms_2">10月</div><div class="ms_3">00</div>:<div class="ms_3">01</div>:<div class="ms_3">15</div></div><div class="right">秒杀专区</div></div><ul class="tp"><li class="tp_1"><a href=""><imgsrc="https://img12.360buyimg.com/mobilecms/s372x372_jfs/t1/139529/2/20110/95537/5fe476a2Ec7d6adb7/1b9a2ea03575fe96.jpg!q70.dpg.webp"alt=""/></a><div class="iconfont icon-tubiaozhizuomoban">18</div><div class="iconfont icon-tubiaozhizuomoban">78</div></li><li class="tp_1"><a href=""><imgsrc="https://img12.360buyimg.com/mobilecms/s372x372_jfs/t1/139529/2/20110/95537/5fe476a2Ec7d6adb7/1b9a2ea03575fe96.jpg!q70.dpg.webp"alt=""/></a><div class="iconfont icon-tubiaozhizuomoban">18</div><div class="iconfont icon-tubiaozhizuomoban">78</div></li><li class="tp_1"><a href=""><imgsrc="https://img12.360buyimg.com/mobilecms/s372x372_jfs/t1/139529/2/20110/95537/5fe476a2Ec7d6adb7/1b9a2ea03575fe96.jpg!q70.dpg.webp"alt=""/></a><div class="iconfont icon-tubiaozhizuomoban">18</div><div class="iconfont icon-tubiaozhizuomoban">78</div></li><li class="tp_1"><a href=""><imgsrc="https://img12.360buyimg.com/mobilecms/s372x372_jfs/t1/139529/2/20110/95537/5fe476a2Ec7d6adb7/1b9a2ea03575fe96.jpg!q70.dpg.webp"alt=""/></a><div class="iconfont icon-tubiaozhizuomoban">18</div><div class="iconfont icon-tubiaozhizuomoban">78</div></li><li class="tp_1"><a href=""><imgsrc="https://img12.360buyimg.com/mobilecms/s372x372_jfs/t1/139529/2/20110/95537/5fe476a2Ec7d6adb7/1b9a2ea03575fe96.jpg!q70.dpg.webp"alt=""/></a><div class="iconfont icon-tubiaozhizuomoban">18</div><div class="iconfont icon-tubiaozhizuomoban">78</div></li><li class="tp_1"><a href=""><imgsrc="https://img12.360buyimg.com/mobilecms/s372x372_jfs/t1/139529/2/20110/95537/5fe476a2Ec7d6adb7/1b9a2ea03575fe96.jpg!q70.dpg.webp"alt=""/></a><div class="iconfont icon-tubiaozhizuomoban">18</div><div class="iconfont icon-tubiaozhizuomoban">78</div></li></ul></div><!-- 底部 --><div class="footer"><div><div class="iconfont icon-shouye"></div><span>首页</span></div><div><div class="iconfont icon-fenlei"></div><span>分类</span></div><div><div class="iconfont icon-caidan1"></div><span>京喜</span></div><div><div class="iconfont icon-gouwuche"></div><span>购物车</span></div><div><div class="iconfont icon-wode"></div><span>我的</span></div></div></body></html>
- CSS样式代码
.header {
height: 5rem;
background: rgb(248, 192, 8);
position: fixed;
left: 0;
right: 0;
top: 0;
z-index: 100;
}
.main {
height: 80rem;
background: rgb(240, 224, 224);
position: absolute;
top: 5rem;
left: 0;
right: 0;
}
.footer {
height: 5rem;
background: rgb(247, 218, 91);
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 100;
}
/ 头部 /
.header {
display: flex;
align-items: center;
}
.header .cd {
flex: 1;
text-align: center;
font-size: 2rem;
color: red;
}
.header .zhuti {
flex: 6;
display: flex;
border-radius: 2rem;
background: floralwhite;
padding: 0.5rem;
}
.header .zhuti .ziti {
color: #e43130;
flex: 0 1 4rem;
font-size: 2rem;
text-align: center;
line-height: 2rem;
}
.header .zhuti .sou {
border-left: 1px solid;
flex: 0 1 4rem;
color: #aaa;
text-align: center;
line-height: 2rem;
}
.header .zhuti .sou_1 {
flex: auto;
border: none;
outline: none;
color: #aaa;
}
.header .deng {
flex: 1;
color: red;
text-align: center;
}
/ 底部 /
.footer {
display: flex;
justify-content: space-around;
align-items: center;
}
.footer div {
display: flex;
flex-flow: column nowrap;
align-items: center;
}
.footer div:hover {
cursor: pointer;
}
.footer div .iconfont {
font-size: 2.5rem;
}
.footer span {
font-size: 1rem;
}
/ 秒杀专区 /
.main .ms {
padding: 1rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.main .ms .lefe {
font-size: 1.5rem;
margin-right: 0.5rem;
}
.main .ms .ms_0 {
display: flex;
flex: 1;
justify-content: flex-start;
}
.main .ms .ms_0 .ms_2 {
color: #e43130;
margin-right: 0.5rem;
}
.main .ms .ms_0 .ms_3 {
background: #e43130;
border-radius: 5px;
color: aliceblue;
margin-right: 0.1rem;
}
.main .ms .right {
color: #e43130;
font-size: 1rem;
}
.main .tp {
display: flex;
justify-content: space-evenly;
align-items: center;
}
.main .tp .tp_1 {
text-align: center;
width: 5rem;
height: 5rem;
}
.main .tp .tp_1 img {
height: 100%;
width: 100%;
}
.main .tp .tp_1 .iconfont:first-of-type {
color: #e43130;
font-size: 1.5rem;
font-weight: bolder;
}
.main .tp .tp_1 .iconfont:last-of-type {
color: rgb(138, 138, 132);
font-size: 1rem;
text-decoration-line: line-through;
}
/ 小导航 /
.main .nav {
display: flex;
flex-flow: row wrap;
padding: 1rem;
}
.main .nav .nav_1 {
flex: 1 1 20%;
display: flex;
flex-flow: column nowrap;
align-items: center;
margin-bottom: 1.5rem;
font-size: 1.3rem;
}
.main .nav .nav_1 img {
width: 4rem;
height: 4rem;
}