Blog garden landscaping basically completed! ! !

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.

 

Guess you like

Origin www.cnblogs.com/siro/p/11111959.html