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

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

预览效果图

秒杀专区部分代码

   <div class="flash">
                <div class="flash_container">
                    <div class="flash_container_title">
                        <!-- title_left 设置flex布局  -->
                        <div class="title_left">
                            <!-- 把京东秒杀与12点场 放一个块元素中 -->
                            <div class="title_left_1">
                                <span style="color:#333">京东秒杀</span>
                                <span style="padding-left: 0.5rem;color:#ff270c">12</span>
                                <img src="static/images/aa.png" alt="">
                            </div>
                            <!-- 倒计时为一个块元素 -->
                            <div class="title_left_2">
                                <span>00</span>
                                <span style="color:#fa2c19;">:</span>
                                <span>37</span>
                                <span style="color:#fa2c19;">:</span>
                                <span>29</span>
                            </div>
                        </div>
                        <div class="title_right">
                            <span>更多秒杀</span>
                            <span >></span>
                        </div>
                    </div>
                    <div style="top: 120rem;">
                        <ul class="nav">
                            <li>
                                <a href=""><img src="static/images/a1.jpg" alt=""> </a>
                                <span style="color:#ff270c">¥ 32.6</span>
                                <span style="text-decoration:line-through;color:#999">¥ 38.3</span>
                            </li>
                            <li>
                                <a href=""><img src="static/images/a1.jpg" alt=""> </a>
                                <span style="color:#ff270c">¥ 32.6</span>
                                <span style="text-decoration:line-through;color:#999">¥ 38.3</span>
                            </li>
                            <li>
                                <a href=""><img src="static/images/a1.jpg" alt=""> </a>
                                <span style="color:#ff270c">¥ 32.6</span>
                                <span style="text-decoration:line-through;color:#999">¥ 38.3</span>
                            </li>
                            <li>
                                <a href=""><img src="static/images/a1.jpg" alt=""> </a>
                                <span style="color:#ff270c">¥ 32.6</span>
                                <span style="text-decoration:line-through;color:#999">¥ 38.3</span>
                            </li>
                            <li>
                                <a href=""><img src="static/images/a1.jpg" alt=""> </a>
                                <span style="color:#ff270c">¥ 32.6</span>
                                <span style="text-decoration:line-through;color:#999">¥ 38.3</span>
                            </li>
                            <li>
                                <a href=""><img src="static/images/a1.jpg" alt=""> </a>
                                <span style="color:#ff270c">¥ 32.6</span>
                                <span style="text-decoration:line-through;color:#999">¥ 38.3</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

css样式相关代码

/* 秒杀专区 */
.content .flash{
    margin-top: 2rem;
}
.content .flash .flash_container{
    margin: 0.5rem;
    background-color: #fff;
    border-radius: 1rem;
}
.content .flash .flash_container_title{
    display: flex;
    justify-content:space-between;
    padding-top: 1rem;
    background: url(../images/bg.png) no-repeat;
    background-size: contain;
}
/* 左边 */
.content .flash .flash_container_title .title_left{
   padding-left: 1rem;
   display: flex;
   align-items: center;
}
.content .flash .flash_container_title .title_left img{
    width:1.8rem;
    height:2rem;
}
.content .flash .flash_container_title .title_left .title_left_2{
    padding-left:2rem;
}
/* 右边 更多 */
.content .flash .flash_container_title .title_right span:last-child{
    display: inline-block;
    width:1.5rem;height:1.5rem;
    background-color: #fa2c19;
    color:#fff;
    border-radius:1.6rem;
    font-size:1.5rem;
    line-height: 1.5rem;
    text-align: center;
    margin-right: 1rem;
}
.content .flash .flash_container_title .title_left .title_left_2 span:nth-of-type(2n+1){
    display:inline-block;
    background-color: #fa2c19;
    color:#fff;
    border-radius:0.5rem;
}
.content .flash .flash_container .nav{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    flex: 1 1;
}
.content .flash .flash_container .nav li{
    display: flex;
    flex-flow: column;
    align-items: center;
}
.content .flash .flash_container .nav li img{
    width:6rem;
    height:6rem;
}

其他代码引用和初始化没有放