页面显示

代码

html

  1. <div class="ms">
  2.     <div class="ms-top">
  3.         <div class="left">
  4.             <div class="title">京东秒杀</div>
  5.             <div class="notice">
  6.                 <div class="tips">20点场</div>
  7.                 <div class="time">00:47:20</div>
  8.             </div>
  9.         </div>
  10.         <div class="right">更多秒杀</div>
  12.     </div>
  13.     <ul class="ms-body">
  14.         <li class="item">
  15.             <a href=""><img src="static/images/ms/ms-3.jpg" alt=""></a>
  16.             <div class="iconfont icon-rmb">9.9</div>
  17.             <div class="iconfont icon-rmb">28.8</div>
  18.         </li>
  19.         <li class="item">
  20.             <a href=""><img src="static/images/ms/ms-4.jpg" alt=""></a>
  21.             <div class="iconfont icon-rmb">29</div>
  22.             <div class="iconfont icon-rmb">65</div>
  23.         </li>
  24.         <li class="item">
  25.             <a href=""><img src="static/images/ms/ms-5.jpg" alt=""></a>
  26.             <div class="iconfont icon-rmb">84</div>
  27.             <div class="iconfont icon-rmb">168</div>
  28.         </li>
  29.         <li class="item">
  30.             <a href=""><img src="static/images/ms/ms-6.jpg" alt=""></a>
  31.             <div class="iconfont icon-rmb">55</div>
  32.             <div class="iconfont icon-rmb">165</div>
  33.         </li>    
  34.     </ul>
  35. </div>

css

  1. .main .ms{
  2.    background-color: white;
  3.    padding:1rem;
  4.    margin:1rem 1.8em;
  5.    border: 1px solid #fafafa;
  6.    border-radius: 1rem;
  8. }
  9. .main .ms .ms-top {
  10.     height: 3rem;
  11.     display: flex;
  12.     justify-content: space-between;
  13. }
  14. .main .ms .ms-top .left {
  15.     display: flex;
  16. }
  17. .main .ms .ms-top .left .notice {
  18.     display: flex;
  19.     height: 2rem;
  20.     margin:0 1.5rem;
  21.     border: 1px solid #e43130;
  22.     border-radius: 2rem;
  23.     justify-content: center;
  24.     align-items: center;
  25. }
  26. .main .ms .ms-top .left .notice .tips {
  27.     background-color: #e43130;
  28.     color: #fff;
  29.     border-radius: 2rem;
  30.     padding: 0.3rem 0.5rem;
  31. }
  32. .main .ms .ms-top .right {
  33.     color: #e43130;
  34.     font-size: 1.2rem;
  35. }
  36. .main .ms .ms-body {
  37.     display: flex;
  38.     justify-content: space-between;
  39. }
  40. .main .ms .ms-body .item {  
  41.     display: flex;
  42.     flex-flow: column nowrap;
  43.     align-items: center;
  44. }
  45. .main .ms .ms-body .item img {
  46.     height: 12rem;
  47.     width: 12rem;
  48. }
  49. .main .ms .ms-body .item div:first-of-type {
  50.     color: #e43130;
  51.     font-weight: bolder;
  52. }
  53. .main .ms .ms-body .item div:last-of-type {
  54.     color: grey;
  55.     font-weight: bolder;
  56.     text-decoration-line: line-through;
  57.     text-decoration-color: #666;
  58. }

更多相关文章

  1. 将仿京东移动端首页的"秒杀区"样式
  2. flex布局中容器及项目常用属性演示
  3. 定位以及三行三列布局方式
  4. 字体图标用法与盒模型页面布局
  5. 实战:简单的注册页面与常用选择器
  6. PHP快递查询接口api和快递单号智能判断PHP代码
  7. html制作table
  8. 7.【商城后台管理系统】基于TP6开发友情链接增删改查以及网站基
  9. 小程序页面传递报错

随机推荐

  1. Javascript知识汇总------面向对象中继承
  2. 在关联数组中移动元素[重复]
  3. 对JavaScript优化及规范的一些感想
  4. 键盘出现时，UIWebView滚动。导致点击偏移
  5. 我如何捕获并插入Meteor.Error警报从Mete
  6. JavaScript 实现GridView汇总
  7. 如何使用try，catch在错误处理中打印消息
  8. javascript之DOM技术（二）
  9. 有没有办法在javascript控制台中将上下文
  10. 如何使用Require JS配置具有第三方js依赖