HTML+CSS 博客园自定义样式编辑

博客样式由 BuildtoWin主题 改写生成。

页首html代码

<div class="main-top">
　　<a class="avatar" href="https://home.cnblogs.com/u/gaosirs/">
　　　　<img src="https://avatar-static.segmentfault.com/209/655/2096555534-5c10b9098455a_huge256" alt="240">
　　</a>
　　<div class="title">
　　　　<a class="name" href="https://home.cnblogs.com/u/gaosirs/">GaoSir</a>
　　</div>
　　<div class="info">
　　　　每个人都有属于自己的一片森林，也许我们从来不曾去过，但它一直在那里，总会在那里。迷失的人迷失了，相逢的人会再相逢！
　　</div>
</div>

 

 

 

页脚html代码

<span id="back-to-top"><a href="#top"></a></span>

 

 

侧边栏公共html代码

 <p>本博客仅用作学习交流使用，日常学习记录笔记</p>

 

 

页面定制css样式代码

 　　

html {
    scroll-behavior: smooth; // 实现锚点平滑滚动
}

body {
    background: #eee;
    padding-top: 20px;
}

// 锚点
a[name="top"] {
    position: absolute;
    top: -20px;
}

// a标签颜色过渡
a {
    transition: color 0.3s;
    -moz-transition: color 0.3s;
    -webkit-transition: color 0.3s;
    -o-transition: color 0.3s;
}

// 变量声明
:root {
    --hover-color:#ff410f;
}

a:link {
    color: #969696;
    text-decoration: none;
}

a:visited {
    color: #969696;
    text-decoration: none;
}

a:hover {
    color: #ff410f;
    color:var(--hover-color);
    text-decoration: none;
}


// 首页随笔标题
.postTitle {
    border-bottom: 0px solid #969696;
    border-left: 0px solid #969696;
    color: #969696;
    display: inherit;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
    padding: 0;
}

.postTitle a:link,
.postTitle a:visited,
.postTitle a:active {
    color: #4a4a4a;
    font-family: -apple-system, SF UI Display, Arial, PingFang SC, Hiragino Sans GB, Microsoft YaHei, WenQuanYi Micro Hei, sans-serif;
}

.postTitle a:hover {
    color: #ff410f;
    color:var(--hover-color);
}

// 首页随笔摘要
.c_b_p_desc {
    margin: 0 0 8px;
    font-size: 13px;
    line-height: 24px;
    color: #999;
}


// 首页随笔页脚
.postDesc {
    text-align: left;
}

// 日期发布模块
.dayTitle {
    display: none;
}

.day {
    padding: 15px 2px 20px 0px;
    border-bottom: 1px solid #f0f0f0;
}

// 隐藏阅读全文
.c_b_p_desc_readmore {
    display: none;
}

#p_b_follow a {
    color: #ff410f;
    color:var(--hover-color);
}

// 博客导航栏
#navigator {
    background-color: #fff;
    margin-top: 0px;
    border-bottom: 1px solid #f0f0f0;
}

#navList {
    margin-left:0;
}

#navList a:link,
#navList a:visited,
#navList a:active {
    padding: 18px 20px;
    font-size: 15px;
    font-weight: 700;
    color: #4a4a4a;
    line-height: 25px;
}

#navList a:hover {
    color: #ff410f;
    color:var(--hover-color);
    text-decoration: none;
}

#navList a {
    margin: 0;
}

// 导航栏随笔信息
.blogStats {
    float: right;
    color: #999;
    font-size: 13px;
    padding-right: 20px;
    line-height: 60px;
    margin: 0;
    visibility: visible;
    text-align: center;
}


// 侧边栏
#sideBar {
    background: #ffffff;
    margin-left:800px;
}

#sideBarMain ul {
    overflow: hidden;
}

#sideBarMain ul li {
    float: left;
    width: 40%;
}

#sideBarMain ul li a:hover {
    color: #ff410f!important;
}

#sideBarMain ul li a {
    font-size: 13px;
    color: #999;
}

#sidebar_recentposts ul li,
#TopViewPostsBlock ul li,
#TopFeedbackPostsBlock {
    width: 100%;
    float: none;
}

// 侧边栏功能块
.sidebar-block {
    border-bottom: 1px solid #f0f0f0;
}

// 侧边栏标题
.catListEssay h3,
.catListLink h3,
.catListNoteBook h3,
.catListTag h3,
.catListPostCategory h3,
.catListPostArchive h3,
.catListArticleArchive h3,
.catListImageCategory h3,
.mySearch h3,
.catListComment h3,
.catListView h3,
.catListFeedback h3,
#blog-sidecolumn .catListTitle,
.newsItem h3 {
    background: #fff!important;
    margin-bottom: 10px;
    font-size: 14px;
    color: #4a4a4a;
}

// 侧边栏公告
#blog-news p {
    color: #ff410f;
    color:var(--hover-color);
}

#profile_block {
    color: #969696;
}

// 页脚信息
#footer {
    color: #a3a3a3;
}


// 博客头部信息
.main-top {
    margin: 0 auto;
    width: 1100px;
    box-sizing: border-box;
    padding-left: 20px;
    padding: 40px;
    background: #FFF;
}

.main-top .avatar {
    width: 80px;
    height: 80px;
    margin-left: -2px;
    display: block;
    margin: 0 auto;
}

.avatar img {
    width: 100%;
    height: 100%;
    border: 1px solid #ddd;
    border-radius: 50%;
}

.main-top .title .name {
    display: inline;
    font-size: 21px;
    font-weight: 700;
    vertical-align: middle;
    color: #4a4a4a;
}

.main-top .title {
    padding: 5px 0 0 0px;
    text-align: center;
}


.info {
    color: #999;
    font-size: 13px;
    font-weight: 700;
    vertical-align: middle;
    padding: 20px 0 0 0px;
    text-align: center;
}

.fa {
    padding: 0 2px 0 2px;
}

#topics .postTitle {
    border-bottom: 0px;
}

#ad_t2,
#cnblogs_c1,
#under_post_news,
#cnblogs_c2,
#under_post_kb,
#blogTitle,
#sidebar_recentcomments {
    display: none;
}


.pager {
    color: #969696;
}

.pager a {
    border: 0px solid #9aafe5;
}

div.commentform textarea {
    padding: 0px;
    width: 100%;
    height: 80px;
    font-size: 13px;
    border: 1px solid #dcdcdc;
    border-radius: 4px;
    background-color: hsla(0, 0%, 71%, .1);
    resize: none;
    display: inline-block;
    vertical-align: top;
    outline-style: none;
}

#btn_comment_submit {
    padding: .2em;
    margin-top: .5em;
    float: right;
    width: 100px;
    margin: 10px 0;
    padding: 8px 18px;
    font-size: 16px;
    border: none;
    border-radius: 20px;
    color: #fff!important;
    background-color: #3db922;
    cursor: pointer;
    outline: none;
    display: block;
    height: auto;
}

// 博客整体页面
#home {
    width: 1100px;
}

// 随笔列表
#mainContent {
    width: 800px;
}

#homepage_top_pager {
    display: none;
}

#BlogPostCategory,
#BlogPostCategory>a {
    color: #c8c8c8;
    font-size: 12px;
}

#comment_nav {
    display: none;
}

#commentbox_opt>a {
    display: none;
}

#comment_form_container>div:first-child {
    display: none;
}

.commentbox_title {
    width: 100%;
}

#div_digg {
    display: none;
}

#author_profile {
    width: 100%;
    background-color: hsla(0, 0%, 71%, .1);
    border: 1px solid #e1e1e1;
    border-radius: 4px;
    font-size: 12px;
}

.author_avatar {
    vertical-align: top;
    float: left;
    margin-right: 5px;
    padding-top: 0px;
    padding-left: 0px;
    border: 0;
    border: 1px solid #ddd;
    border-radius: 50%;
}

#author_profile_info {
    padding: 20px;
}

#author_profile_detail {
    padding-left: 20px;
}

#author_profile_detail a {
    color: #969696;
    text-decoration: none;
}

#author_profile_detail a:first-child {
    color: #333;
    margin-right: 3px;
    line-height: 1.8;
    vertical-align: middle;
}

#commentform_title {
    display: none;
}

#green_channel {
    border: 0px;
}

#green_channel #green_channel_digg {
    display: none;
}

#green_channel #green_channel_follow {
    display: none;
}

#green_channel #green_channel_favorite {
    display: none;
}

#green_channel {
    width: 100%;
    text-align: right;
}

#post_next_prev {
    margin-bottom: 20px;
    margin-top: 20px;
}

.postBody {
    border-bottom: 1px solid #f0f0f0;
}

#topics .postDesc {
    margin-top: 20px;
}

.commentbox_title_left {
    display: none;
}

#tip_comment+p {
    display: none;
}

#tip_comment2+p {
    display: none;
}

.feedback_area_title {
    color: #969696;
    border-bottom: 1px solid #ccc;
}

.feedbackCon {
    border-bottom: 1px solid #f0f0f0;
}

#cnblogs_post_body p {
    font-size: 16px;
}

#cnblogs_post_body ul li {
    font-size: 15px;
}

#author_profile_follow {
    float: right;
    padding-right: 30px;
    padding-bottom: 10px;
}

#author_profile_follow a {
    color: #969696;
    text-decoration: none;
}


#widget_my_zzk .input_my_zzk {
    border: 1px solid #999;
    border-radius: 6px;
    height: 1.7rem;
    text-indent: 5px;
    outline: none;
}



#btnZzk {
    height: 30px;
    background: #969696;
    outline: none;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    padding: 0 10px;
    font-family: '微软雅黑';
    cursor: pointer;
    color: #FFF;
}

#btnZzk:hover {
    background: #ff410f;
    color:var(--hover-color);
}



// 回到顶部
#back-to-top {
    bottom: 60px;
    position: fixed;
    right: 60px;
    cursor: pointer;
}

#back-to-top a {
    background: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1552995096957&di=a2c587673204f1689e65862bad685c25&imgtype=0&src=http%3A%2F%2Fku.90sjimg.com%2Felement_origin_min_pic%2F01%2F48%2F04%2F255744106a221a2.jpg) no-repeat left center;
    display: block;
    width: 50px;
    height: 50px;
    background-size: cover
}


// 随笔详情标题
#cnblogs_post_body h1,
#cnblogs_post_body h2,
#cnblogs_post_body h3,
#cnblogs_post_body h4,
#cnblogs_post_body h5,
#cnblogs_post_body h6 {
    color: #ff410f;
    color:var(--hover-color);
}


// 常用链接列表标题
#myposts .myposts_title,
#taglist_title {
    font-size: 21px;
    color: #4a4a4a;
}

// 常用链接列表
#myposts .PostList {
    font-size: 14px;
    margin: 0;
    padding-top: 10px;
    padding-bottom: 5px;
}
#myposts .postTitl2 {
    width:100%;
}

// 随笔分类
.entrylistTitle,
.PostListTitle,
.thumbTitle {
    color: #ff410f;
    color:var(--hover-color);
    text-align: center;
    border-bottom: 0;
}
.entrylistPosttitle {
    border-left: 5px solid #ff410f;
    padding-bottom: 0;
    line-height: 2em;
}
.entrylistPosttitle a {
    color: #4a4a4a;
    font-weight: 700;
    font-size: 16px;
}

.entrylistItemPostDesc,
.entrylistItemPostDesc a:link,
.entrylistItemPostDesc a:visited,
.entrylistItemPostDesc a:active {
    color:#a3a3a3;
}


.entrylistPosttitle a:hover,
.entrylistItemPostDesc a:hover {
    color: #ff410f;
    color:var(--hover-color);
}


// 改变滚动条
::-webkit-scrollbar {
    width: 10px;
    height: 4px;
    background-color: #C0C0C0;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #C0C0C0;
}

::-webkit-scrollbar-track {
    background: #EEE;
}

::-webkit-scrollbar-track:hover {
    background-color:#E0E0E0;
}

// 增加媒体查询
@media only screen and (max-width: 767px) {
    body {
        padding-top:0;
    }

    .main-top {
        width:100%;
    }

    #home,
    #mainContent {
        width:auto;
    }

    #sideBar {
        margin-left:0;
    }

    #back-to-top {
        display:none;
    }
}

 

 

 

 

此样式整理自 vayci ，感谢博主分享！

原主题链接：https://www.cnblogs.com/vayci/p/9560637.html