仿京东移动端首页的"部分"样式 - 我的作业

仿京东移动端首页的”秒杀区”样式

请帮忙看看有没有多用到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=""
          ><img
            src="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=""
          ><img
            src="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=""
          ><img
            src="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=""
          ><img
            src="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=""
          ><img
            src="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=""
          ><img
            src="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=""
          ><img
            src="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=""
          ><img
            src="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=""
          ><img
            src="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=""
          ><img
            src="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=""
          ><img
            src="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=""
          ><img
            src="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=""
          ><img
            src="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=""
          ><img
            src="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=""
          ><img
            src="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=""
          ><img
            src="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;
}

Correcting teacher：

天蓬老师

Correction status：qualified

Teacher's comments：作业发布后, 回看一下格式

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

仿京东移动端首页的”秒杀区”样式