zoukankan html css js c++ java

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

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

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;
     65%;
    min- 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- 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>


<!-- 爱心特效 -->
<script type="text/javascript">

(function(window,document,undefined){
        var hearts = [];
        window.requestAnimationFrame = (function(){
                return window.requestAnimationFrame || 
                           window.webkitRequestAnimationFrame ||
                           window.mozRequestAnimationFrame ||
                           window.oRequestAnimationFrame ||
                           window.msRequestAnimationFrame ||
                           function (callback){
                                   setTimeout(callback,1000/60);
                           }
        })();
        init();
        function init(){
                css(".heart{ 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: ''; inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}");
                attachEvent();
                gameloop();
        }
        function gameloop(){
                for(var i=0;i<hearts.length;i++){
                    if(hearts[i].alpha <=0){
                            document.body.removeChild(hearts[i].el);
                            hearts.splice(i,1);
                            continue;
                    }
                    hearts[i].y--;
                    hearts[i].scale += 0.004;
                    hearts[i].alpha -= 0.013;
                    hearts[i].el.style.cssText = "left:"+hearts[i].x+"px;top:"+hearts[i].y+"px;opacity:"+hearts[i].alpha+";transform:scale("+hearts[i].scale+","+hearts[i].scale+") rotate(45deg);background:"+hearts[i].color;
            }
            requestAnimationFrame(gameloop);
        }
        function attachEvent(){
                var old = typeof window.onclick==="function" && window.onclick;
                window.onclick = function(event){
                        old && old();
                        createHeart(event);
                }
        }
        function createHeart(event){
            var d = document.createElement("div");
            d.className = "heart";
            hearts.push({
                    el : d,
                    x : event.clientX - 5,
                    y : event.clientY - 5,
                    scale : 1,
                    alpha : 1,
                    color : randomColor()
            });
            document.body.appendChild(d);
    }
    function css(css){
            var style = document.createElement("style");
                style.type="text/css";
                try{
                    style.appendChild(document.createTextNode(css));
                }catch(ex){
                    style.styleSheet.cssText = css;
                }
                document.getElementsByTagName('head')[0].appendChild(style);
    }
        function randomColor(){
                return "rgb("+(~~(Math.random()*255))+","+(~~(Math.random()*255))+","+(~~(Math.random()*255))+")";
        }
})(window,document);

</script>

4.博客侧边栏公告

<a href="https://github.com/sirodeneko" title="我的github地址(虽然啥都没有）" target="_Blank" class="github-corner" aria-label="View source on Github"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#FD6C6C; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>

好了我大概就是这样了。

查看全文

相关阅读:
kafka 重启consumer 重复消费问题
 预约系统（十）预约页面--首页
 预约系统（九）管理页面--部门管理
 预约系统（八）管理页面--会议室管理
 预约系统（七）管理页面--用户管理页面
 预约系统（六）管理页面首页
 预约系统（五）管理页面框架密码修改和用户信息功能
 重读C# -- 1.net体系结构
 预约系统（四）管理页面框架搭建easyUI
预约系统（三）登录功能和验证码

原文地址：https://www.cnblogs.com/siro/p/11111959.html