博主信息
博文 12
粉丝 0
评论 0
访问量 9556
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
京东秒杀区
Giesen?
原创
665人浏览过
  1. <div class="ms">
  2. <div class="msbt">
  3. <div>京东秒杀</div>
  4. <div class="msdjs">00:00:31</div>
  5. <div><a href="">更多秒杀</a></div>
  6. </div>
  7. <div>
  8. <ul class="mssp">
  9. <li>
  10. <a href=""><img src="static/images/ms/ms-1.jpg" alt=""></a>
  11. <div class="iconfont icon-rmb">79</div>
  12. <div class="iconfont icon-rmb">179</div>
  13. </li>
  14. <li>
  15. <a href=""><img src="static/images/ms/ms-2.jpg" alt=""></a>
  16. <div class="iconfont icon-rmb">79</div>
  17. <div class="iconfont icon-rmb">179</div>
  18. </li>
  19. <li>
  20. <a href=""><img src="static/images/ms/ms-3.jpg" alt=""></a>
  21. <div class="iconfont icon-rmb">79</div>
  22. <div class="iconfont icon-rmb">179</div>
  23. </li>
  24. <li>
  25. <a href=""><img src="static/images/ms/ms-4.jpg" alt=""></a>
  26. <div class="iconfont icon-rmb">79</div>
  27. <div class="iconfont icon-rmb">179</div>
  28. </li>
  29. <li>
  30. <a href=""><img src="static/images/ms/ms-5.jpg" alt=""></a>
  31. <div class="iconfont icon-rmb">79</div>
  32. <div class="iconfont icon-rmb">179</div>
  33. </li>
  34. <li>
  35. <a href=""><img src="static/images/ms/ms-6.jpg" alt=""></a>
  36. <div class="iconfont icon-rmb">79</div>
  37. <div class="iconfont icon-rmb">179</div>
  38. </li>
  39. </ul>
  40. </div>
  41. </div>

CSS 样式表

  1. .main .ms {
  2. border-radius: 1rem;
  3. background-color: #fff;
  4. margin-bottom: 2rem;
  5. width: 85%;
  6. flex-flow: nowrap;
  7. }
  8. .main .ms .msbt {
  9. display: flex;
  10. align-items: center;
  11. }
  12. .main .ms .msbt :first-of-type{
  13. flex-basis: 30%;
  14. flex: 1;
  15. flex: auto;
  16. font-size: 2rem;
  17. padding-left: 3rem;
  18. }
  19. .main .ms .msbt .msdjs {
  20. flex: auto;
  21. flex: 8;
  22. }
  23. .main .ms .msbt :last-of-type {
  24. flex: 1 ;
  25. color: red ;
  26. flex: auto;
  27. }
  28. /* 秒杀商品 */
  29. .main .ms .mssp {
  30. flex: auto;
  31. display: flex;
  32. justify-content: space-between;
  33. flex-flow: nowrap;
  34. }
  35. .main .ms .mssp li {
  36. display: flex;
  37. flex-flow: column;
  38. align-items: center;
  39. flex: auto;
  40. }
  41. .main .ms .mssp img {
  42. width: 100%;
  43. height: 100%;
  44. }
批改老师:PHPzPHPz

批改状态:合格

老师批语:
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学