【笔记】css卡片式地展示人物信息和一些展示信息的相关美化记录

我就是我 2022-10-22 06:29 23阅读 0赞

还是美观了很多的，从某网站复制弄了好久  
由于主要的兴趣方向不在前端，所以对我来说我只要知道怎么用现成的就好，自己去写一个是不存在的。

效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzU4NTc0_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][20210404195438968.png]

<div data-log-id="liveCardList" data-log-data="{ "logType":"liveUnit","sceneLog":"直播"}" class="live-module_list"><div class="live-module_item"><div data-log-act="click" data-log-id="liveCard" data-log-data="{ "itemId":1282585072,"itemUrl":"https://study.163.com/lessonlive/h5/1282585072.htm","itemName":"前端必备-从源码中学会思维与技巧","logType":"liveUnit"}" data-log-exp="" class="live-card"><div class="live-card_avatar"><img src="//edu-image.nosdn.127.net/30E68D63D5CF732BF3CD6390A2AFCB27.png?imageView&quality=100&thumbnail=116y116" loading="lazy"></div> <div class="live-card_content"><div class="live-card_content_head"><span class="live-card_content_head_time">04月06日 20:00</span><span class="live-card_content_head_remind">开启提醒</span></div> <div class="live-card_content_title">
              学霸必备-从解题中学会思维与技巧
            </div> <div class="live-card_content_des">
              高中数学高级讲师
            </div></div></div> <div class="el-dialog__wrapper remind-dialog" style="display: none;"><div role="dialog" aria-modal="true" aria-label="dialog" class="el-dialog" style="margin-top: 15vh; width: 440px;"><div class="el-dialog__header"><span class="el-dialog__title"></span><button type="button" aria-label="Close" class="el-dialog__headerbtn"><i class="el-dialog__close el-icon el-icon-close"></i></button></div></div></div></div><div class="live-module_item"><div data-log-act="click" data-log-id="liveCard" data-log-data="{ "itemId":1282574073,"itemUrl":"https://study.163.com/lessonlive/h5/1282574073.htm","itemName":"vue高级实战技巧-骚操作和最佳实践","logType":"liveUnit"}" data-log-exp="" class="live-card"><div class="live-card_avatar"><img src="//edu-image.nosdn.127.net/E3C1D09E2463D34DDA722A8A25F87594.png?imageView&quality=100&thumbnail=116y116" loading="lazy"></div> <div class="live-card_content"><div class="live-card_content_head"><span class="live-card_content_head_time">04月07日 20:00</span><span class="live-card_content_head_remind">开启提醒</span></div> <div class="live-card_content_title">
              巧解大题-骚操作和最佳实践
            </div> <div class="live-card_content_des">
              唐磊 前新东方明星讲师
            </div></div></div> <div class="el-dialog__wrapper remind-dialog" style="display: none;"><div role="dialog" aria-modal="true" aria-label="dialog" class="el-dialog" style="margin-top: 15vh; width: 440px;"><div class="el-dialog__header"><span class="el-dialog__title"></span><button type="button" aria-label="Close" class="el-dialog__headerbtn"><i class="el-dialog__close el-icon el-icon-close"></i></button></div></div></div></div><div class="live-module_item"><div data-log-act="click" data-log-id="liveCard" data-log-data="{ "itemId":1282576080,"itemUrl":"https://study.163.com/lessonlive/h5/1282576080.htm","itemName":"加快项目进度-大型vue项目api层架构解析","logType":"liveUnit"}" data-log-exp="" class="live-card"><div class="live-card_avatar"><img src="//edu-image.nosdn.127.net/BCA538B666A0B0FABADFF7962CE44ED8.png?imageView&quality=100&thumbnail=116y116" loading="lazy"></div> <div class="live-card_content"><div class="live-card_content_head"><span class="live-card_content_head_time">04月08日 20:00</span><span class="live-card_content_head_remind">开启提醒</span></div> <div class="live-card_content_title">
              加快解题速度
            </div> <div class="live-card_content_des">
             挑战自我
            </div></div></div> <div class="el-dialog__wrapper remind-dialog" style="display: none;"><div role="dialog" aria-modal="true" aria-label="dialog" class="el-dialog" style="margin-top: 15vh; width: 440px;"><div class="el-dialog__header"><span class="el-dialog__title"></span><button type="button" aria-label="Close" class="el-dialog__headerbtn"><i class="el-dialog__close el-icon el-icon-close"></i></button></div></div></div></div></div></div>
          </div>
        </div>

css:

span.start-bg{ 
      -webkit-font-smoothing: antialiased;
      font-size: 12px;
      -webkit-text-size-adjust: 100%;
      color: #333;
      line-height: 1.5;
      font-family: PingFangSC-Regular,Helvetica,Tahoma,Arial,Microsoft Yahei,"\5B8B\4F53",sans-serif;
      list-style: none;
      -webkit-box-direction: normal;
      top: -5px;
      left: 21px;
      width: 10px;
      height: 20px;
      background: url(data:image/png;base64,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) no-repeat 50%;
      background-size: contain;
      position: absolute;
      display: inline-block;
      transition: all .3s ease-in-out;
    }
    em.main-bg{ 
      -webkit-font-smoothing: antialiased;
      font-size: 12px;
      -webkit-text-size-adjust: 100%;
      color: #333;
      line-height: 1.5;
      font-family: PingFangSC-Regular,Helvetica,Tahoma,Arial,Microsoft Yahei,"\5B8B\4F53",sans-serif;
      list-style: none;
      -webkit-box-direction: normal;
      font-style: normal;
      position: absolute;
      display: inline-block;
      transition: all .3s ease-in-out;
      right: 0;
      top: 0;
      width: 35px;
      height: 41px;
      background: url(data:image/png;base64,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) no-repeat 50%;
      background-size: 100% 100%;
    }
    span.gifts-title{ 
      -webkit-font-smoothing: antialiased;
      -webkit-text-size-adjust: 100%;
      font-family: PingFangSC-Regular,Helvetica,Tahoma,Arial,Microsoft Yahei,"\5B8B\4F53",sans-serif;
      list-style: none;
      -webkit-box-direction: normal;
      color: #333;
      font-size: 28px;
      line-height: 40px;
      font-weight: 700;
      margin: 19px 0 6px;
    }
    p.gifts-desc{ 
      -webkit-font-smoothing: antialiased;
      -webkit-text-size-adjust: 100%;
      font-family: PingFangSC-Regular,Helvetica,Tahoma,Arial,Microsoft Yahei,"\5B8B\4F53",sans-serif;
      list-style: none;
      -webkit-box-direction: normal;
      margin: 0;
      padding: 0;
      color: #666;
      font-size: 14px;
      line-height: 20px;
    }
    
    div.gifts-icon{ 
      -webkit-font-smoothing: antialiased;
      font-size: 12px;
      -webkit-text-size-adjust: 100%;
      color: #333;
      line-height: 1.5;
      font-family: PingFangSC-Regular,Helvetica,Tahoma,Arial,Microsoft Yahei,"\5B8B\4F53",sans-serif;
      list-style: none;
      -webkit-box-direction: normal;
      position: relative;
      margin-top: 40px;
      width: 52px;
      height: 52px;
      border-radius: 6px 20px 6px 20px;
      background: linear-gradient(225deg,rgba(94,232,193,.2),rgba(71,198,162,.2));
    }
    .transition-box{ 
      -webkit-font-smoothing: antialiased;
      font-size: 12px;
      -webkit-text-size-adjust: 100%;
      color: #333;
      line-height: 1.5;
      font-family: PingFangSC-Regular,Helvetica,Tahoma,Arial,Microsoft Yahei,"\5B8B\4F53",sans-serif;
      list-style: none;
      /*position: absolute;*/
      /*left: 0;*/
      /*top: 0;*/
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      flex-direction: column;
      -webkit-box-align: center;
      align-items: center;
      width: 260px;
      height: 215px;
      background: #fff;
      border-radius: 6px 20px 6px 20px;
      transition: all .3s ease-in-out;
    }
    .btnDiv a{ display:inline-block;width:90px;height:36px;line-height:36px;border-radius:3px;text-align:center;margin:0 11px;font-size:14px}
    
    .fl{ float:left;}
    .fr{ float:right;}
    .footer .gotop { 
      text-align: center;
      position: fixed;
      right: 50px;
      bottom: 30px;
      cursor: pointer;
      padding: 10px;
      border-radius: 50%;
      background: white;
      color: #000000;
    }
    .spread-module{ 
      color: #000;
      font: 12px Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;
      /*padding: 0;*/
      padding-top:20px;
      /*position: relative;*/
    
      font-size: 12px;
      /*overflow: hidden;*/
      float: left;
      margin-left: 50px;
    }
    
    .spread-module2{ 
      color: #000;
      font: 12px Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;
      /*padding: 0;*/
      padding-top:20px;
      /*position: relative;*/
    
      font-size: 12px;
      overflow: hidden;
      float: left;
      margin-left: 50px;
    }
    
    
    
    
    .content1 roundcorner{ 
      color: #333;
      font: 12px/1.5 微软雅黑, 黑体, Arial, Helvetica, sans-serif;
      -webkit-font-smoothing: antialiased;
      margin: 0;
      padding: 0;
      border-radius: 3px;
      position: relative;
      border: 1px solid #ddd;
      padding-bottom: 30px;
      padding-top: 15px;
    }
    
    .left .content, .left .content1 { 
      position: relative;
      border: 1px solid #ddd;
      padding-bottom: 30px;
      padding-top: 15px;
    }
    .open-course-list_window{ 
    font-family: "Arial","Hiragino Sans GB", \5fae\8f6f\96c5\9ed1, "Helvetica", "sans-serif";
    font-size: 14px;
    line-height: 21px;
    color: #343d42;
    text-align: left;
    padding: 0;
    margin: 0;
    overflow: hidden;
    padding-top: 24px;
    padding-bottom: 32px;}
    .j-open{ 
      font-family: "Arial","Hiragino Sans GB", \5fae\8f6f\96c5\9ed1, "Helvetica", "sans-serif";
      font-size: 14px;
      line-height: 21px;
      color: #343d42;
      text-align: left;
      padding: 0;
      margin: 0;
      width: 825px;
      margin-right: 24px;
    }
    .doload-img{ 
      font-size: 14px;
      line-height: 21px;
      color: #343d42;
      text-align: left;
      font-family: PingFangSC;
      cursor: pointer;
      border: 0;
      width: 100%;
      height: 100%;
    }
    .ykt-image{ 
      font-size: 14px;
      line-height: 21px;
      color: #343d42;
      text-align: left;
      font-family: PingFangSC;
      cursor: pointer;
      padding: 0;
      margin: 0;
      background: #e4e7eb;
      width: 100%;
      height: 100%;
    }
    .open-course-list_content{ 
      font-family: "Arial","Hiragino Sans GB", \5fae\8f6f\96c5\9ed1, "Helvetica", "sans-serif";
      font-size: 14px;
      line-height: 21px;
      color: #343d42;
      text-align: left;
      padding: 0;
      margin: 0;
      width: max-content;
      position: relative;
    }
    .open-card_img{ 
      font-size: 14px;
      line-height: 21px;
      color: #343d42;
      text-align: left;
      font-family: PingFangSC;
      cursor: pointer;
      padding: 0;
      margin: 0;
      height: 145px;
      width: 100%;
    }
    .open-card_content{ 
      font-size: 14px;
      line-height: 21px;
      text-align: left;
      font-family: PingFangSC;
      cursor: pointer;
      margin: 0;
      color: #333;
      padding: 8px 12px 11px;
    }
    .open-card_content_time{ 
      text-align: left;
      font-family: PingFangSC;
      cursor: pointer;
      color: #333;
      padding: 0;
      margin: 0;
      height: 20px;
      line-height: 20px;
      font-size: 14px;
      margin-bottom: 8px;
    }
    .open-card_content_des{ 
      text-align: left;
      font-family: PingFangSC;
      cursor: pointer;
      padding: 0;
      margin: 0;
      max-height: 18px;
      line-height: 18px;
      width: 235px;
      font-size: 12px;
      color: #666;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    #j-open-and-live { 
      font-family: "Arial", "Hiragino Sans GB", \5fae\8f6f\96c5\9ed1, "Helvetica", "sans-serif";
      font-size: 14px;
      line-height: 21px;
      color: #343d42;
      text-align: left;
      padding: 0;
      width: 1205px;
      margin: 0 auto;
      display: flex;
    }
    .open-card_content_teacher{ 
    font-size: 14px;
    line-height: 21px;
    text-align: left;
    font-family: PingFangSC;
    cursor: pointer;
    margin: 0;
    color: #333;
    padding: 8px 12px 11px;}
    .open-card_img { 
      font-size: 14px;
      line-height: 21px;
      color: #343d42;
      text-align: left;
      font-family: PingFangSC;
      cursor: pointer;
      padding: 0;
      margin: 0;
      height: 145px;
      width: 100%;
    }
    .open-module{ 
      font-family: "Arial","Hiragino Sans GB", \5fae\8f6f\96c5\9ed1, "Helvetica", "sans-serif";
      font-size: 14px;
      line-height: 21px;
      color: #343d42;
      text-align: left;
      padding: 0;
      margin: 0;
      width: 801px;
    }
    div.open-card.open-course-card{ 
      font-size: 14px;
      line-height: 21px;
      color: #343d42;
      text-align: left;
      padding: 0;
      width: 259px;
      height: 291px;
      background: #fff;
      border-radius: 6px;
      overflow: hidden;
      font-family: PingFangSC;
      cursor: pointer;
      float: left;
      margin: 0 12px 0 0;
    }
    .open-card_content_title { 
      text-align: left;
      font-family: PingFangSC;
      cursor: pointer;
      color: #333;
      padding: 0;
      margin: 0;
      height: 48px;
      line-height: 24px;
      font-size: 16px;
      margin-bottom: 8px;
      font-weight: 500;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .open-card_content{ 
      font-size: 14px;
      line-height: 21px;
      text-align: left;
      font-family: PingFangSC;
      cursor: pointer;
      margin: 0;
      color: #333;
      padding: 8px 12px 11px;
    }
    .open-course-list{ 
      font-family: "Arial","Hiragino Sans GB", \5fae\8f6f\96c5\9ed1, "Helvetica", "sans-serif";
      font-size: 14px;
      line-height: 21px;
      color: #343d42;
      text-align: left;
      padding: 0;
      margin: 0;
      height: 200px;
      position: relative;
    }
    
    .publicity { 
      text-align: left;
      padding: 0;
      width: 800px;
      height: 80px;
      line-height: 50px;
      margin: 12px auto 0;
      background: #dc9393;
      border-radius: 6px;
      font-size: 13px;
      color: #DD4A68;
      font-family: PingFang SC;
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzU4NTc0_size_16_color_FFFFFF_t_70]: /images/20221022/f39908e1445949ee9aecce0bc00a141d.png
[20210404195438968.png]: /images/20221022/ea44eb2e43384b47b3537e16f8b58725.png