Probably talk about how to beautify it Baidu chant
1. The first is the choice of skin is SimpleMemory is SimpleMemory is SimpleMemory
2. Then css code
body { color: #000; background: url(http://images.cnblogs.com/cnblogs_com/siro/1493254/o_1.jpg) no-repeat fixed; background-size: cover; /*background-repeat: repeat;*/ font-family: "微软雅黑","Helvetica Neue",Helvetica,Verdana,Arial,sans-serif; font-size: 12px; min-height: 101%; } #home { margin: 0 auto; width: 65%; min-width: 950px; background-color: rgba(255,255,255,0.8); padding: 30px; margin-top: 50px; margin-bottom: 50px; box-shadow: 0px 0px 10px #3E4B53; border-radius:20px; } /* adblock */ #ad_t2 { display: none; } .c_ad_block { display: none; } .catListTitle {/*边侧公告*/ margin - Top: 21px; margin -bottom: 10 .5px; text - align = left: left; border -left: 10px Solid RGBA ( 82 , 168 , 236 , 0.8 ); padding: 5px 0 5px 10px; background -color: RGBA ( 245 , 245 , 245 , 0.3 ); } / * go side white background * / .newsItem, .catListEssay, .catListLink, .catListNoteBook, .catListTag, .catListPostCategory, .catListPostArchive, .catListImageCategory, .catListArticleArchive, .catListView, .catListFeedback, .mySearch, .catListComment, .catListBlogRank, .catList, .catListArticleCategory{ background: rgba(0,0,0,0); } /*调整签名*/ #emmm{ font-family: "微软雅黑","Helvetica Neue",Helvetica,Verdana,Arial,sans-serif; display: block; margin-block-start: 1em; margin-block-end: 1em; margin-inline-start: 0px; margin-inline-end: 0px; }
3. blog sidebar announcement
<style> #clock { font-family: 'Share Tech Mono', monospace; color: #ffffff; margin:0 auto; text-align: center; /*position: absolute;*/ /*left: 83%; top: 45%%; margin-top: 70px; max-width: 80%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);*/ color: #25a9da; text-shadow: 0 0 20px #0aafe6, 0 0 20px rgba(10, 175, 230, 0); } #clock .time { margin: 0 auto; letter-spacing: 0.05em; font-size: 38px; padding: 5px 0; } #clock .date { letter-spacing: 0.1em; font-size: 20px; } #clock .text { letter-spacing: 0.1em; font-size: 12px; padding: 20px 0 0; } #waifu{ left:85%; } </style> <script type="text/javascript" src="https://blog-static.cnblogs.com/files/clwydjgs/vue.min.js"></script> <script>var clock = new Vue({ el: '#clock', data: { time: '', date: '' } });var week = ['星期天', '星期一', ','Tuesday " Wednesday " , " Thursday " , " Friday " , " Saturday " ]; var timerId = the setInterval (updateTime, 1000 ); updateTime (); function updateTime () { var CD = new new a Date (); clock.time = zeroPadding ( cd.getHours (), 2 ) + ' : ' + zeroPadding (cd.getMinutes (), 2 ) + ' : ' + zeroPadding (cd.getSeconds (), 2 ); clock.date= zeroPadding(cd.getFullYear(), 4) + '-' + zeroPadding(cd.getMonth()+1, 2) + '-' + zeroPadding(cd.getDate(), 2) + ' ' + week[cd.getDay()]; }; function zeroPadding(num, digit) { var zero = ''; for(var i = 0; i < digit; i++) { zero += '0'; } return (zero + num).slice(-digit); } </script> <div style="border-top: 1px dashed #ccc;padding: 5px;border-bottom: 1px dashed #ccc;height: 120px;"> <div id="clock"> <p class="date">{{ date }}</p> <p class="time">{{ time }}</p> </div> </div> /*头像路径*/ <a href="https://www.cnblogs.com/siro/"> <img src="http://images.cnblogs.com / cnblogs_com / Syrian / 1493254 / o_d20e883fb13533fa6a7518bda3d3fd1f43345bbe.jpg "= width 100 % style = " border-the RADIUS: 50% " > </a> <the p-the above mentioned id = " emmm " > <br> Hello everyone, the next is a third-class finance and economics school of software engineering student <br> play games to play tired to brush the question, writing a blog about her <del> is not possible to update the updated </ del> <br> also put it as a notepad <br> above <br> </ the p->
/ * Netease cloud music * / <the embed the src = " //music.163.com/style/swf/widget.swf?sid=857619&type=2&auto=1&width=210&height=32 " width = " 230 " height = " 52 is " allowNetworking="all"></embed> /*可爱的小恶魔*/ <link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/clwydjgs/waifu.css"/> <link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/clwydjgs/waifu.css"/> <link rel="stylesheet" type="text/css" href="https://files.cnblogs.com/files/yjlblog/flat-ui.min.css"/> <div class="waifu" id="waifu"> <div class="waifu-tips" style="opacity: 1;"></div> <canvas id="live2d" width="280" height="250" class="live2d"></canvas> <div class="waifu-tool"> <span class="fui-home"></span> <span class="fui-chat"></span> <span class="fui-eye"></span> <span class="fui-user"></span> <span class="fui-photo"></span> <span class="fui-info-circle"></span> <span class="fui-cross"></span> </div> </div> <script src="https://blog-static.cnblogs.com/files/clwydjgs/live2d.js"></script> <script src="https://blog-static.cnblogs.com/files/clwydjgs/waifu-tips.js"></script> <script type="text/javascript">initModel()</script>
Well, I'm probably the case.