search

博客列表 >仿京东移动端首页的"部分"样式

仿京东移动端首页的"部分"样式

冷风
冷风原创
2021年07月07日 17:57:41709浏览

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

请帮忙看看有没有多用到fixed属性

  • 图片欣赏

    • html代码
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8" />
    5.   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.   <title>Document</title>
    8.   <link rel="stylesheet" href="//at.alicdn.com/t/font_2658027_x57wjewo7gk.css" />
    9.   <link rel="stylesheet" href="//at.alicdn.com/t/font_2657095_ks49h5qoay.css" />
    10.   <link rel="stylesheet" href="//at.alicdn.com/t/font_2657269_v7m0y1kdcb8.css" />
    11. </head>
    12. <body>
    13.   <!-- 导航 -->
    14.   <div class="header">
    15.     <!-- 左侧 -->
    16.     <div class="cd iconfont icon-A"></div>
    17.     <!--中间 -->
    18.     <div class="zhuti">
    19.       <div class="ziti">JD</div>
    20.       <div class="sou iconfont icon-woyaosousuo"></div>
    21.       <input type="text" value="电子电器" class="sou_1" />
    22.     </div>
    23.     <!-- 右侧 -->
    24.     <a href="" class="deng">登录</a>
    25.   </div>
    27.   <!-- 主体 -->
    28.   <div class="main">
    29.     <!-- 小导航 -->
    30.     <ul class="nav">
    31.       <li class="nav_1">
    32.         <a href=""
    33.           ><img
    34.             src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/125678/35/5947/4868/5efbf28cEbf04a25a/e2bcc411170524f0.png"
    35.             alt=""
    36.         /></a>
    37.         <a href="">京东超市</a>
    38.       </li>
    39.       <li class="nav_1">
    40.         <a href=""
    41.           ><img
    42.             src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/135931/4/3281/5598/5efbf2c0Edbdc82c7/ed9861b4ddfb9f30.png.webp"
    43.             alt=""
    44.         /></a>
    45.         <a href="">数码电器</a>
    46.       </li>
    47.       <li class="nav_1">
    48.         <a href=""
    49.           ><img
    50.             src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/140012/8/1804/3641/5efbf318E38bd5dad/0db99d859ab16ce9.png.webp"
    51.             alt=""
    52.         /></a>
    53.         <a href="">京东服饰</a>
    54.       </li>
    55.       <li class="nav_1">
    56.         <a href=""
    57.           ><img
    58.             src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/129215/21/5978/3618/5efbf344Ebec23ae8/59712d986b10bb0a.png.webp"
    59.             alt=""
    60.         /></a>
    61.         <a href="">京东生鲜</a>
    62.       </li>
    63.       <li class="nav_1">
    64.         <a href=""
    65.           ><img
    66.             src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/116602/7/11200/3796/5efbf375Ebba41029/f07cc166f368fa05.png.webp"
    67.             alt=""
    68.         /></a>
    69.         <a href="">京东到家</a>
    70.       </li>
    71.       <li class="nav_1">
    72.         <a href=""
    73.           ><img
    74.             src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/146390/3/1846/4909/5efbf39aEe5f5f797/300071558a9ab078.png.webp"
    75.             alt=""
    76.         /></a>
    77.         <a href="">充值缴费</a>
    78.       </li>
    79.       <li class="nav_1">
    80.         <a href=""
    81.           ><img
    82.             src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/179511/33/4023/3422/609e0d45Ea495a996/3783165b48cf1e08.png.webp"
    83.             alt=""
    84.         /></a>
    85.         <a href="">9.9元拼</a>
    86.       </li>
    87.       <li class="nav_1">
    88.         <a href=""
    89.           ><img
    90.             src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/113589/24/11332/4897/5efbf3feE705d87db/e5c12d5e943266b9.png.webp"
    91.             alt=""
    92.         /></a>
    93.         <a href="">领券</a>
    94.       </li>
    95.       <li class="nav_1">
    96.         <a href=""
    97.           ><img
    98.             src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/131663/33/3380/3674/5efbf50fEf79cf314/af4b57d2383e605d.png.webp"
    99.             alt=""
    100.         /></a>
    101.         <a href="">领金贴</a>
    102.       </li>
    103.       <li class="nav_1">
    104.         <a href=""
    105.           ><img
    106.             src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/123730/37/5924/4189/5efbf567E0a226121/d04df7c74c87cf68.png.webp"
    107.             alt=""
    108.         /></a>
    109.         <a href="">PLUS会员</a>
    110.       </li>
    111.     </ul>
    113.     <!-- \秒杀专区 -->
    114.     <div class="ms">
    115.       <div class="lefe">京东秒杀</div>
    116.       <div class="ms_0">
    117.         <div class="ms_2">10月</div>
    119.         <div class="ms_3">00</div>
    120.         :
    121.         <div class="ms_3">01</div>
    122.         :
    123.         <div class="ms_3">15</div>
    124.       </div>
    125.       <div class="right">秒杀专区</div>
    126.     </div>
    127.     <ul class="tp">
    128.       <li class="tp_1">
    129.         <a href=""
    130.           ><img
    131.             src="https://img12.360buyimg.com/mobilecms/s372x372_jfs/t1/139529/2/20110/95537/5fe476a2Ec7d6adb7/1b9a2ea03575fe96.jpg!q70.dpg.webp"
    132.             alt=""
    133.         /></a>
    134.         <div class="iconfont icon-tubiaozhizuomoban">18</div>
    135.         <div class="iconfont icon-tubiaozhizuomoban">78</div>
    136.       </li>
    137.       <li class="tp_1">
    138.         <a href=""
    139.           ><img
    140.             src="https://img12.360buyimg.com/mobilecms/s372x372_jfs/t1/139529/2/20110/95537/5fe476a2Ec7d6adb7/1b9a2ea03575fe96.jpg!q70.dpg.webp"
    141.             alt=""
    142.         /></a>
    143.         <div class="iconfont icon-tubiaozhizuomoban">18</div>
    144.         <div class="iconfont icon-tubiaozhizuomoban">78</div>
    145.       </li>
    146.       <li class="tp_1">
    147.         <a href=""
    148.           ><img
    149.             src="https://img12.360buyimg.com/mobilecms/s372x372_jfs/t1/139529/2/20110/95537/5fe476a2Ec7d6adb7/1b9a2ea03575fe96.jpg!q70.dpg.webp"
    150.             alt=""
    151.         /></a>
    152.         <div class="iconfont icon-tubiaozhizuomoban">18</div>
    153.         <div class="iconfont icon-tubiaozhizuomoban">78</div>
    154.       </li>
    155.       <li class="tp_1">
    156.         <a href=""
    157.           ><img
    158.             src="https://img12.360buyimg.com/mobilecms/s372x372_jfs/t1/139529/2/20110/95537/5fe476a2Ec7d6adb7/1b9a2ea03575fe96.jpg!q70.dpg.webp"
    159.             alt=""
    160.         /></a>
    161.         <div class="iconfont icon-tubiaozhizuomoban">18</div>
    162.         <div class="iconfont icon-tubiaozhizuomoban">78</div>
    163.       </li>
    164.       <li class="tp_1">
    165.         <a href=""
    166.           ><img
    167.             src="https://img12.360buyimg.com/mobilecms/s372x372_jfs/t1/139529/2/20110/95537/5fe476a2Ec7d6adb7/1b9a2ea03575fe96.jpg!q70.dpg.webp"
    168.             alt=""
    169.         /></a>
    170.         <div class="iconfont icon-tubiaozhizuomoban">18</div>
    171.         <div class="iconfont icon-tubiaozhizuomoban">78</div>
    172.       </li>
    173.       <li class="tp_1">
    174.         <a href=""
    175.           ><img
    176.             src="https://img12.360buyimg.com/mobilecms/s372x372_jfs/t1/139529/2/20110/95537/5fe476a2Ec7d6adb7/1b9a2ea03575fe96.jpg!q70.dpg.webp"
    177.             alt=""
    178.         /></a>
    179.         <div class="iconfont icon-tubiaozhizuomoban">18</div>
    180.         <div class="iconfont icon-tubiaozhizuomoban">78</div>
    181.       </li>
    182.     </ul>
    183.   </div>
    185.   <!-- 底部 -->
    186.   <div class="footer">
    187.     <div>
    188.       <div class="iconfont icon-shouye"></div>
    189.       <span>首页</span>
    190.     </div>
    191.     <div>
    192.       <div class="iconfont icon-fenlei"></div>
    193.       <span>分类</span>
    194.     </div>
    195.     <div>
    196.       <div class="iconfont icon-caidan1"></div>
    197.       <span>京喜</span>
    198.     </div>
    199.     <div>
    200.       <div class="iconfont icon-gouwuche"></div>
    201.       <span>购物车</span>
    202.     </div>
    203.     <div>
    204.       <div class="iconfont icon-wode"></div>
    205.       <span>我的</span>
    206.     </div>
    207.   </div>
    208. </body>
    209. </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;
}

上一条：FROM表单实践以及心得下一条：首页秒杀区
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多