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

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

效果：

  <div data-log-id="liveCardList" data-log-data="{&quot;logType&quot;:&quot;liveUnit&quot;,&quot;sceneLog&quot;:&quot;直播&quot;}" class="live-module_list"><div class="live-module_item"><div data-log-act="click" data-log-id="liveCard" data-log-data="{&quot;itemId&quot;:1282585072,&quot;itemUrl&quot;:&quot;https://study.163.com/lessonlive/h5/1282585072.htm&quot;,&quot;itemName&quot;:&quot;前端必备-从源码中学会思维与技巧&quot;,&quot;logType&quot;:&quot;liveUnit&quot;}" data-log-exp="" class="live-card"><div class="live-card_avatar"><img src="//edu-image.nosdn.127.net/30E68D63D5CF732BF3CD6390A2AFCB27.png?imageView&amp;quality=100&amp;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="{&quot;itemId&quot;:1282574073,&quot;itemUrl&quot;:&quot;https://study.163.com/lessonlive/h5/1282574073.htm&quot;,&quot;itemName&quot;:&quot;vue高级实战技巧-骚操作和最佳实践&quot;,&quot;logType&quot;:&quot;liveUnit&quot;}" data-log-exp="" class="live-card"><div class="live-card_avatar"><img src="//edu-image.nosdn.127.net/E3C1D09E2463D34DDA722A8A25F87594.png?imageView&amp;quality=100&amp;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="{&quot;itemId&quot;:1282576080,&quot;itemUrl&quot;:&quot;https://study.163.com/lessonlive/h5/1282576080.htm&quot;,&quot;itemName&quot;:&quot;加快项目进度-大型vue项目api层架构解析&quot;,&quot;logType&quot;:&quot;liveUnit&quot;}" data-log-exp="" class="live-card"><div class="live-card_avatar"><img src="//edu-image.nosdn.127.net/BCA538B666A0B0FABADFF7962CE44ED8.png?imageView&amp;quality=100&amp;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;
}