DIY了一下自己blog的UI

当年才学前端时就想改自己blog的UI，然鹅当时没看见那个“申请JS权限”，一直以为blog不能随意DIY样式，只改了少许CSS。
现在重新看看设置管理选项，简单修改了一下样式（注意：修改样式之前发邮件给"contact@cnblogs.com"）。自己设置样式还是感受到了很大的局限性，收到了皮肤框架的限制，并且编辑调试CSS什么的很困难，希望cnblog今后增加完全DIY的选择，提供blog API直接完全从头制作。

• 修改了半透明效果
• 修改了flex布局
• 修改点击特效
• 修改visitor统计
• 特别注意：修改样式应注意自己的内容可视性，添加的东西不要干扰阅读者的注意力，动画样式太多会严重影响阅读体验

附上我的CSS（未禁用默认样式，仅仅覆盖）：

 * {
     box-sizing: border-box;
 }
 body{
     background: url(YOUR IMAGE'S URL) 50% 0% / cover no-repeat fixed;
     position: static;
 }
 #home {
     margin: 0 auto;
     width: 100%;
     display: flex;
     flex-direction: column;
 }
 #header{
     width: 100%;
     height: 60px;
     position: fixed;
     z-index:;
     opacity: 0.9;
     margin-left:;
     background-color: #97765a4a;
 }
 #blogTitle {
     top: 14px;
     font-family: fantasy;
     left: 10px;
     font-size: 27px;
 }
 #Header2_HeaderTitle{
     font-size: 27px;
 }
 #blogTitle .headermaintitle:link, #blogTitle .headermaintitle:visited, #blogTitle .headermaintitle:hover, #blogTitle .headermaintitle:active {
     font-size: 27px;
 }
 #navigator {
     position: absolute;
     width: auto;
     right:;
     top: 20px;
 }
 #navList {
     margin-top: 15px;
 }
 #main {
     width: 100%;
     display: flex;
     flex-direction: row-reverse;
     flex-wrap: wrap;
 }
 #mainContent {
     margin-top: 60px;
     top:;
     flex:;
     left:;
     opacity: 0.9;
     background: #ffffffe3;
 }
 #sideBar {
     margin-top: 60px;
     float: left;
     width: auto;
     background: none;
     word-break: break-all;
 }
 #sideBarMain {
     background-color: #f7f7f738;
     opacity: 0.7;
     margin-top:;
 }
 .catListTag ul a,.catListLink ul a,.catListPostArchive ul a,.catListComment ul a,.catListView ul a,.catListFeedback ul a,.catListView ul a{
     margin-right: 5px;
     color: #f5f5f5;
     font-family: 幼圆;
 }
 #my_footer {
     width: 100%;
     height: auto;
     margin-top: 5px;
     position: relative;
     background-color: #a27b5c;
     color: #FFFFFF;
     font-size: 12px;
     text-align: center;
     font-family: Arial, sans-serif;
 }

 #leftcontentcontainer {
     background: #00000000;
 }
 .div_my_zzk input{
     border-radius: 5px;
     border: none;
 }
 #my_footer a{
     color: #dddddd;
 }
 #footer {
     display: none;
 }

我的JS（JS扔哪都行，jQuery库cnblog自带了）：

<script type="text/javascript">
/* 鼠标点击特效 */
var a_idx = 0;
jQuery(document).ready(function($) {
    $("body").click(function(e) {
        var a = new Array("富强","民主","文明","和谐","自由","平等","公正","法治","爱国","敬业","诚信","友善");
        var $i = $("<span/>").text(a[a_idx]);
        a_idx = (a_idx + 1) % a.length;
        var x = e.pageX,
        y = e.pageY;
        $i.css({
        "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
        "top": y - 20,
        "left": x,
        "position": "absolute",
        "font-weight": "bold",
        "color": "rgb("+(255*Math.random())+","+(255*Math.random())+","+(255*Math.random())+")"
    });
        $("body").append($i);
        $i.animate({
            "top": y - 180,
            "opacity": 0
        },
        1500,
        function() {
            $i.remove();
        });
    });
});
</script>

效果预览：

　　PC端：

　　手机等小屏幕设备（响应式似乎只能用cnblog皮肤模板自带的，自己写的响应式CSS不会实现效果，有点迷）：

　　使用的背景图：

　　还设计过好几个类似的，大概就是很容易改，大家放手去设计就好了，本篇只是你的参考，别和我一样哎哎哎