還是美觀了很多的，從某網站復制弄了好久
由于主要的興趣方向不在前端，所以對我來說我只要知道怎么用現成的就好，自己去寫一個是不存在的。

效果：

<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; }

總結

以上是生活随笔為你收集整理的【笔记】css卡片式地展示人物信息和一些展示信息的相关美化记录的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。