博客园美化基本完成！！！

Posted 2022-03-04 siro

大概说说如何美化的吧  百度呗

1.首先是皮肤选择的是SimpleMemory   是SimpleMemory  是SimpleMemory

2.然后是css代码

 

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;
    border-left: 10px solid rgba(82, 168, 236, 0.8);
    padding: 5px 0 5px 10px;
    background-color: rgba(245,245,245,0.3);

/*去侧边背景白色*/
.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.博客侧边栏公告

<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 = [‘星期天‘, ‘星期一‘, ‘星期二‘, ‘星期三‘, ‘星期四‘, ‘星期五‘, ‘星期六‘];
var timerID = setInterval(updateTime, 1000);
updateTime();
function updateTime() 
    var cd = new 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/siro/1493254/o_d20e883fb13533fa6a7518bda3d3fd1f43345bbe.jpg" width=100% style="border-radius:50%">
</a>

<p id="emmm">
    <br>
    大家好，在下是一个一流财经学校的三流软件工程学生<br>
    打游戏打累了就刷刷题,写写博客啥的
    <del>更新是不可能更新的</del><br>
    也把这当个记事本吧<br>
    以上<br>
    
</p>

/*网易云音乐*/
<embed src="//music.163.com/style/swf/widget.swf?sid=857619&type=2&auto=1&width=210&height=32" width="230" height="52"  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>

好了我大概就是这样了。