博客主题设置-老主题

博客主题自定义

目录

作为记录，以供回退哈哈

主题预览

image

代码自定义

页面定制CSS代码

/* css file : https://www.cnblogs.com/blog/customcss/166538.css?v=o6NlMnWKH5%2bK9ejEqSVjT7TiC3A%3d */
 
body {font-family:"微软雅黑", "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif;background-color: rgb(233, 233, 233);
}
a {
    color: #3399FF;
    font-weight: inherit;
    line-height: inherit;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
h1, .post h1 {
    font-size: 24px;
}
h2, #cnblogs_post_body h2 {
    font-size: 22px;
}
h3, #cnblogs_post_body h3 {
    font-size: 20px;
}
h4, #cnblogs_post_body h4 {
    font-size: 18px;
}
h5, #cnblogs_post_body h5 {
    font-size: 16px;
}
#home {
    
}
/**默认导航隐藏*/
#header {display:none;}
#blogTitle {
    
}
#navigator {display:none;}
#navList {
    list-style: none outside none;
    display: block;
    float: left;
    left: 0;
    right: 0;
    margin: 0 10px 0 20px;
    position: relative;
}
#navList li {
    float: left;
    margin-right: 25px;
    margin-top: 8px;
    display: inline;
}
#navList li a {
    background-color: #409EFF;
    font-size: 16px;
    text-decoration: none;
    color: #FFF;
    padding: 7px 10px;
}
#navList li a:hover {
    background-color: #2175bc;
}
.blogStats {
    float: right;
    color: #ddd;
    margin: 9px 60px 8px 0px;
    text-align: right;
    padding: 0;
    font-size: 14px;
}
#main{
    min-width: 950px;
    text-align: left;
    margin: 20px;
}
#mainContent { float: right;margin-left: -350px;width: 100%;}
#mainContent .forFlow {margin-left: 370px;}
.day {
    min-height: 10px;
    _height: 10px;
    margin: 10px 0px;
}
.dayTitle {
    border-bottom: 1px solid #DDDDDD;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    margin-bottom: 20px;
    padding-bottom: 4px;
    text-align: right;
    font-size: 14px;
    display: none;
}
.dayTitle a {
    color: #333;
}
.postTitle, .entrylistPosttitle {
    padding-right: 64px;
    padding-left: 10px;
    border-left-width: 3px;
    border-left-style: solid;
    border-left-color: #2175bc;
    font-size: 120%;
    font-weight: bold;
    line-height: 1.5;
    width: 100%;
    color: #444;
    margin: 0px 0px;
}
#mainContent #post_detail .postTitle {
    padding-left: 15px;
    font-size: 24px;
    margin: 10px 0px 23px 0px;
    color: #111;
}
.postTitle a, .entrylistPosttitle a {
    color: #000;
}
.postTitle a:hover, .entrylistPosttitle a:hover {
    color: #3399ff;
    text-decoration: none;
}
#mainContent #post_detail .postTitle a, #mainContent #post_detail .postTitle a:hover {
    color: #111;
    text-decoration: none;
}
.postCon, .entrylistPostSummary {
    float: right;
    line-height: 1.5;
    width: 100%;
    clear: both;
    padding: 13px 0;
    font-size: 15px;
}
.postBody {
    line-height: 1.5;
    width: 100%;
    font-size: 16px;
}
.postDesc, .entrylistItemPostDesc {
    float: right;
    width: 100%;
    clear: both;
    text-align: right;
    padding-right: 5px;
    color: #666;
    font-size: 13px;
    margin-bottom: 15px;
}
.day  .postDesc, .entrylist .entrylistItemPostDesc {
    border-bottom: 1px solid #DDDDDD;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    margin-bottom: 20px;
    padding-bottom: 4px;
}
.postSeparator {
	clear: both;
}
#post_detail #blog_post_info_block, #comment_form {
    font-size: 13px;
}

#sideBar {width: 350px;float: left;font-size: 12px;}
#newsSideBar .headImage {
    padding: auto;
}
#newsSideBar .headImage img {
    border: 3px solid #2586d7;
    border-radius: 50%;
    width: 150px;
    margin: auto;
    display: block;
}
#sideBarMain .newsItem .catListTitle, #sidebar_scorerank {
    display: none;
}
.newsItem #profile_block {
    padding: 0px 10px 0px 40px;
}
#blog-sidecolumn .catListTitle {
    font-size: 15px;
    padding-left: 15px;
    padding-bottom: 2px;
    font-weight: bold;
    font-family: Arial;
    margin: 15px 0px 8px 0px;
    color: #666;
    border-bottom: 1px solid #ccc;
}
#blog-sidecolumn #sidebar_search .input_my_zzk {width: 80%;background-color: transparent;border-radius: 4px;border: 1px solid #ccc;box-sizing: border-box;color:#606266;display: inline-block;font-size: inherit; height: 34px;line-height: 34px;outline: none;padding: 0 15px;}
input.btn_my_zzk{color: #fff;background-color: #409eff;border-color: #409eff; height: 34px;line-height: 1;cursor: pointer;border: 1px solid #dcdfe6;outline: none;font-size: 12px;border-radius: 4px;}
#blog-sidecolumn ul {
    margin-top: 10px;
    list-style:none;
}
#blog-sidecolumn li {
    margin-bottom: 4px;
}
#blog-sidecolumn #sidebar_recentposts .catListEssay ul, #blog-sidecolumn #sidebar_topviewedposts #TopViewPostsBlock ul {
    padding:0px;
    font-size: 13px;
}

.topicListFooter a {
    font-weight: bold;
    font-size: 17px;
}
#pageBeginBar{
    background-color: rgb(255,255,255,0.1);
    height: 90px;
}
#footer {
    text-align: center;
    min-height: 25px;
    _height: 25px;
    border-top: 1px solid black;
    margin-top: 10px;
    padding-top: 10px;
    padding-bottom:35px;
    font-size: 14px;
}
#pageEnd {
    width: 100%;
    height: 200px;
    background-color: #2d94de;
    background-image: url(//www.cnblogs.com/skins);
    display: none;
}
.entrylistTitle {
    font-size: 23px;
    margin: 5px auto;
}
.entrylistDescription {
    font-size: 15px;
    padding: 5px 0px 5px 20px;
    color: #555;
    border-bottom: 1px dashed #666;
    margin: 0px 0px 25px 0px;
}

.loader-box .loader {
    
}
@media (max-width: 900px){
img {max-width: 100%;height: auto;}
.el-menu-item{padding:0 15px !important;}
}
/**日历设置**/
#blogCalendar{display:none;}
.el-calendar-table .el-calendar-day{height:auto !important;}

.el-menu--horizontal .el-menu-item:not(.is-disabled):focus, .el-menu--horizontal .el-menu-item:not(.is-disabled):hover,.el-menu--horizontal>.el-menu-item:not(.is-disabled):focus, .el-menu--horizontal>.el-menu-item:not(.is-disabled):hover, .el-menu--horizontal>.el-submenu .el-submenu__title:hover,.el-calendar,.el-button-group .el-button{background-color: transparent !important}

/**搜索框**/
#widget_my_google{display:none;}

.comment_textarea{width:auto;}

/**侧边栏个人介绍**/
#profile_block{display:none;}

/**时钟**/
.clock {display: flex;}
.clock .divider {font-size: 66px;line-height: 102px;font-style: normal;color:white;}
.clock .flip {position: relative; width: 60px;height: 100px;margin: 2px;font-size: 66px;line-height: 100px;text-align: center;background: transparent;border: 1px solid #ccc;border-radius: 12px;}
.clock .flip .digital::before, .clock .flip .digital::after {position: absolute;content: attr(data-number);left: 0;right: 0;color: white;background: transparent;overflow: hidden;-webkit-perspective: 160px;perspective: 160px;}
.clock .flip .digital::before {top: 0;bottom: 50%;border-bottom: 1px solid #ccc;border-radius: 10px 10px 0 0;}
.clock .flip .digital::after {top: 50%;bottom: 0;line-height: 0;border-radius: 0 0 10px 10px;}
.clock .flip .back{display:none;}
.clock .flip.running .back{display:block;}
.clock .flip.running .front{display:none;}
.clock .flip .back::before,.clock .flip .front::after {z-index: 1;}
.clock .flip .back::after {z-index: 2;}
.clock .flip .front::before {z-index: 3;}
.clock .flip .back::after {-webkit-transform-origin: center top;transform-origin: center top;-webkit-transform: rotateX(0.5turn);transform: rotateX(0.5turn);}
.clock .flip.running .front::before {-webkit-transform-origin: center bottom;transform-origin: center bottom;-webkit-animation: frontFlipDown 0.6s ease-in-out;animation: frontFlipDown 0.6s ease-in-out;-webkit-backface-visibility: hidden;backface-visibility: hidden;}
.clock .flip.running .back::after {-webkit-animation: backFlipDown 0.6s ease-in-out;animation: backFlipDown 0.6s ease-in-out;}
@-webkit-keyframes frontFlipDown {
        to {-webkit-transform: rotateX(0.5turn);transform: rotateX(0.5turn);}
}
@keyframes frontFlipDown {
        to {-webkit-transform: rotateX(0.5turn);transform: rotateX(0.5turn);}
}
@-webkit-keyframes backFlipDown {
        to {-webkit-transform: rotateX(0);transform: rotateX(0);}
}
@keyframes backFlipDown {
        to {-webkit-transform: rotateX(0);transform: rotateX(0);}
}

#homepage_top_pager{display:none;}
.pager{text-align:right;}
.topicListFooter a{font-weight: bold;margin: 0 5px;background-color: #909399;color: #fff;min-width: 30px;border-radius: 2px;padding: 0 4px; vertical-align: top;display: inline-block;font-size: 13px; height: 28px; line-height: 28px; cursor: pointer;box-sizing: border-box; text-align: center;border: none;text-decoration: none;}
.topicListFooter a:hover{color:#409EFF}

[v-cloak] { display: none;}

侧边栏公告

<!-- 引入样式 -->
<link rel="stylesheet" href="https://files.cnblogs.com/files/zhlii/element.css">
<!-- 引入组件库 -->
<script type="text/javascript" src="https://files.cnblogs.com/files/zhlii/vue.min.js"></script>
<script type="text/javascript" src="https://files.cnblogs.com/files/zhlii/element.js"></script>
<script type="text/javascript" src="https://files.cnblogs.com/files/zhlii/mouseAnimate.js"></script>
<script type="text/javascript" src="https://files.cnblogs.com/files/zhlii/index.js"></script>
<script type="text/javascript" src="https://files.cnblogs.com/files/zhlii/mouseClick.js"></script>

<!--百度统计-->
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?5612bf283c8291eeb2901d2bb4e6d808";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>

<!--时钟-->
<div id="zhlii_clock" class="clock">
        <div class="flip">
            <div class="digital front" :data-number="nextTimes[0]"></div>
            <div class="digital back" :data-number="nowTimes[0]"></div>
        </div>
        <div class="flip">
            <div class="digital front" :data-number="nextTimes[1]"></div>
            <div class="digital back" :data-number="nowTimes[1]"></div>
        </div>
        <em class="divider">:</em>
        <div class="flip">
            <div class="digital front" :data-number="nextTimes[2]"></div>
            <div class="digital back" :data-number="nowTimes[2]"></div>
        </div>
        <div class="flip">
            <div class="digital front" :data-number="nextTimes[3]"></div>
            <div class="digital back" :data-number="nowTimes[3]"></div>
        </div>
        <em class="divider">:</em>
        <div class="flip">
            <div class="digital front" :data-number="nextTimes[4]"></div>
            <div class="digital back" :data-number="nowTimes[4]"></div>
        </div>
        <div class="flip">
            <div class="digital front" :data-number="nextTimes[5]"></div>
            <div class="digital back" :data-number="nowTimes[5]"></div>
        </div>
</div>


<script>

$(function(){
//分页
if("上一页" == $("#homepage_bottom_pager .pager a:first").html()){
        $("#homepage_bottom_pager .pager a:first").html("<<");
}
if("下一页" == $("#homepage_bottom_pager .pager a:last").html()){
        $("#homepage_bottom_pager .pager a:last").html(">>");
}
$("#nav_next_page a").html(">>");
})

</script>

页首HTML代码

<div id="my_page_begin_html">
<!--首页入口模块-->
<div v-show="loading_show" class="loader-box" style="position: fixed; top: 0;left: 0;width: 100%;height: 100%;background-color: #E9E9E9;z-index: 333;">
    <div class="loader" style="text-align:center;position: absolute;top: 40%;left: 50%;width: 450px;height: 224px;margin: -112px 0 0 -225px;">
      <img src="https://blog-static.cnblogs.com/files/zhlii/preload.gif">
      <p style="font-size: 33px; color:#5E5141;">welcome to zhlii's blog</p>
    </div>
 </div>

<!--页首导航栏-->
<el-menu class="el-menu-demo" mode="horizontal" background-color="transparent">
  <el-menu-item index="1"><a href="https://www.cnblogs.com/">博客园</a></el-menu-item>
  <el-menu-item index="2"><a href="https://www.cnblogs.com/zhlii">首页</a></el-menu-item>
  <el-submenu index="3">
    <template slot="title">工作台</template>
      <el-menu-item index="3-1"><a href="https://i.cnblogs.com/posts/edit">随笔</a></el-menu-item>
      <el-menu-item index="3-2"><a href="https://i.cnblogs.com/articles/edit">文章</a></el-menu-item>
      <el-menu-item index="3-3"><a href="https://i.cnblogs.com/diaries/edit">日记</a></el-menu-item>
  </el-submenu>
  <el-menu-item index="4" @click="contactMe">联系我</el-menu-item>
  <el-menu-item index="5"><a id="blog_nav_rss" class="menu" href="javascript:void(0)" data-rss="https://www.cnblogs.com/zhlii/rss/">订阅</a></el-menu-item>
   <el-menu-item index="6" style="float:right;">
   <div><el-avatar src="https://pic.cnblogs.com/avatar/575699/20180820225915.png"></el-avatar></div>
  </el-menu-item>
</el-menu>
</div>

页脚 HTML 代码

未定制

博客皮肤

随意，我这选的是darkgreentrip

相关文件

详见代码里相关文件

posted @ 2021-03-12 14:18  时间会有答案  阅读(60)  评论(0)  编辑  收藏  举报