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

预览效果图

秒杀专区部分代码

  1.    <div class="flash">
  2.                 <div class="flash_container">
  3.                     <div class="flash_container_title">
  4.                         <!-- title_left 设置flex布局  -->
  5.                         <div class="title_left">
  6.                             <!-- 把京东秒杀与12点场 放一个块元素中 -->
  7.                             <div class="title_left_1">
  8.                                 <span style="color:#333">京东秒杀</span>
  9.                                 <span style="padding-left: 0.5rem;color:#ff270c">12</span>
  10.                                 <img src="static/images/aa.png" alt="">
  11.                             </div>
  12.                             <!-- 倒计时为一个块元素 -->
  13.                             <div class="title_left_2">
  14.                                 <span>00</span>
  15.                                 <span style="color:#fa2c19;">:</span>
  16.                                 <span>37</span>
  17.                                 <span style="color:#fa2c19;">:</span>
  18.                                 <span>29</span>
  19.                             </div>
  20.                         </div>
  22.                         <div class="title_right">
  23.                             <span>更多秒杀</span>
  24.                             <span >></span>
  25.                         </div>
  26.                     </div>
  28.                     <div style="top: 120rem;">
  29.                         <ul class="nav">
  30.                             <li>
  31.                                 <a href=""><img src="static/images/a1.jpg" alt=""> </a>
  32.                                 <span style="color:#ff270c">¥ 32.6</span>
  33.                                 <span style="text-decoration:line-through;color:#999">¥ 38.3</span>
  34.                             </li>
  35.                             <li>
  36.                                 <a href=""><img src="static/images/a1.jpg" alt=""> </a>
  37.                                 <span style="color:#ff270c">¥ 32.6</span>
  38.                                 <span style="text-decoration:line-through;color:#999">¥ 38.3</span>
  39.                             </li>
  40.                             <li>
  41.                                 <a href=""><img src="static/images/a1.jpg" alt=""> </a>
  42.                                 <span style="color:#ff270c">¥ 32.6</span>
  43.                                 <span style="text-decoration:line-through;color:#999">¥ 38.3</span>
  44.                             </li>
  45.                             <li>
  46.                                 <a href=""><img src="static/images/a1.jpg" alt=""> </a>
  47.                                 <span style="color:#ff270c">¥ 32.6</span>
  48.                                 <span style="text-decoration:line-through;color:#999">¥ 38.3</span>
  49.                             </li>
  50.                             <li>
  51.                                 <a href=""><img src="static/images/a1.jpg" alt=""> </a>
  52.                                 <span style="color:#ff270c">¥ 32.6</span>
  53.                                 <span style="text-decoration:line-through;color:#999">¥ 38.3</span>
  54.                             </li>
  55.                             <li>
  56.                                 <a href=""><img src="static/images/a1.jpg" alt=""> </a>
  57.                                 <span style="color:#ff270c">¥ 32.6</span>
  58.                                 <span style="text-decoration:line-through;color:#999">¥ 38.3</span>
  59.                             </li>
  60.                         </ul>
  61.                     </div>
  62.                 </div>
  63.             </div>

css样式相关代码

  1. /* 秒杀专区 */
  2. .content .flash{
  3.     margin-top: 2rem;
  4. }
  5. .content .flash .flash_container{
  6.     margin: 0.5rem;
  7.     background-color: #fff;
  8.     border-radius: 1rem;
  9. }
  11. .content .flash .flash_container_title{
  12.     display: flex;
  13.     justify-content:space-between;
  14.     padding-top: 1rem;
  15.     background: url(../images/bg.png) no-repeat;
  16.     background-size: contain;
  17. }
  18. /* 左边 */
  19. .content .flash .flash_container_title .title_left{
  20.    padding-left: 1rem;
  21.    display: flex;
  22.    align-items: center;
  23. }
  24. .content .flash .flash_container_title .title_left img{
  25.     width:1.8rem;
  26.     height:2rem;
  27. }
  28. .content .flash .flash_container_title .title_left .title_left_2{
  29.     padding-left:2rem;
  30. }
  32. /* 右边 更多 */
  33. .content .flash .flash_container_title .title_right span:last-child{
  34.     display: inline-block;
  35.     width:1.5rem;height:1.5rem;
  36.     background-color: #fa2c19;
  37.     color:#fff;
  38.     border-radius:1.6rem;
  39.     font-size:1.5rem;
  40.     line-height: 1.5rem;
  41.     text-align: center;
  42.     margin-right: 1rem;
  43. }
  45. .content .flash .flash_container_title .title_left .title_left_2 span:nth-of-type(2n+1){
  46.     display:inline-block;
  47.     background-color: #fa2c19;
  48.     color:#fff;
  49.     border-radius:0.5rem;
  50. }
  53. .content .flash .flash_container .nav{
  54.     display: flex;
  55.     flex-flow: row nowrap;
  56.     justify-content: space-around;
  57.     flex: 1 1;
  58. }
  60. .content .flash .flash_container .nav li{
  61.     display: flex;
  62.     flex-flow: column;
  63.     align-items: center;
  64. }
  65. .content .flash .flash_container .nav li img{
  66.     width:6rem;
  67.     height:6rem;
  68. }

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

更多相关文章

  1. 仿京东移动端首页的"部分"样式
  2. flex布局中容器及项目常用属性演示
  3. 定位以及三行三列布局方式
  4. 7/30号作业
  5. 简单表单与css选择器实战案例
  6. 注册表单实战案例
  7. HTML注册表单控件实例、CSS模块化理解与CSS基本/上下文选择器的
  8. PHP快递查询接口api和快递单号智能判断PHP代码
  9. css语法介绍

随机推荐

  1. Android开发之ConstraintLayout布局
  2. android常用知识（累计）
  3. Android系统自带主题的使用及自定义主题
  4. Android圆角图片
  5. Android系统在超级终端下必会的命令大全（a
  6. 使用系统资源的引用总结以及收到短信后给
  7. Android 之EditText自动弹出/不弹出输入
  8. Android系统的开机画面显示过程分析（4）
  9. android相对布局的案例
  10. Android(安卓)Material Design控件之Card