zoukankan      html  css  js  c++  java
  • 博客园样式

    https://segmentfault.com/a/1190000012956911

    1. 基础介绍

    1-1. 介绍一下我的博客设置

    1. 我个人比较习惯用 Makedown 来编写,所以我选择的编辑器是 Makedown,在 [ 管理 ] - [ 选项 ] 中可以设置。
    2. 在 [ 管理 ] - [ 模版 ] 中有许多博客模板,可以直接使用,界面也会变好看一点。我使用的是 red_autumnal_leaves (红叶)
    3. 因为我的样式定制是在红叶的模版基础上进行修改的,所以可能其他的模版会出现兼容的问题,这个可以根据自己的模版和喜好进行修改。(我已经尽量做到样式兼容了,但是模版太多,心有余而力不足啊。。。)

    1-2. 简单的操作

    可以通过审查元素的方法,来设置自己满意的样式。操作是F12
    F12操作可以打开控制面板,具体的样式可以直接在上面修改,然后把修改后的样式保存下来。

    保存后的样式,复制到[ 管理 ] - [ 设置 ] - 页面定制CSS代码上面,然后[ 保存 ]

    注意:
    有时候修改的样式没有起作用,是因为样式的优先级的原因,这里我选择简单粗暴的!important来解决

    2. 设置标题、子标题、导航栏

    2-1. 标题和子标题

    标题和子标题 是页面最顶部的,设置在 [ 管理 ] - [ 设置 ] - 标题,子标题

    /* 博客标题和副标题 */
    #blogTitle {
        overflow: hidden;
        height: auto;
        text-align: center;
    }
    

    blogTitle h1 {

    font-size</span>:<span style="color: #0000ff;"> 35px</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 100%</span>;<span style="color: #ff0000;">
    margin-left</span>:<span style="color: #0000ff;"> 0</span>;
    

    }

    blogTitle h2 {

    margin-left</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 100%</span>;<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 20px</span>;<span style="color: #ff0000;">
    font-weight</span>:<span style="color: #0000ff;"> bold</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #000</span>;
    

    }

    css

    2-2. 博客顶部的导航栏

    /*博客导航栏 */
    #navList {
        float: left;
    }
    

    navList li {

    border</span>:<span style="color: #0000ff;"> none</span>;<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 16px</span>;
    

    }

    .blogStats {
    display
    : none;
    }

    css

    3. 设置博客侧边栏

    3-1. 侧边栏整体公共样式

    /*sideBar博客侧边栏容器*/
    #sideBar {
        width: 300px;
        box-sizing: border-box;
        margin-left: 30px;
        padding: 0;
    }
    

    .newsItem, .catListComment, .catListEssay, .catListView, .catListFeedback,

    blog-calendar, #sidebar_postcategory, #sidebar_postcategory, #sidebar_postarchive, #sidebar_search {

    <span style="color: #008000;">/*</span><span style="color: #008000;">侧边栏每一模块添加圆角和阴影</span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
    border-radius</span>:<span style="color: #0000ff;"> 10px</span>;<span style="color: #ff0000;">
    box-shadow</span>:<span style="color: #0000ff;"> 1px 2px 3px #A7A8AD</span>;<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> #fff</span>;
    

    }

    sideBarMain h3, .newsItem h3 {

    <span style="color: #008000;">/*</span><span style="color: #008000;">侧边栏每个模块的标题部分</span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 1.2em</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 50px</span>;<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;"> 50px</span>;<span style="color: #ff0000;">
    text-indent</span>:<span style="color: #0000ff;"> 0.5em</span>;<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> url(http://www.cnblogs.com/skins/red_autumnal_leaves/images/titlebg.png) no-repeat left center #fff</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 0 0 0 50px</span>;<span style="color: #ff0000;">
    margin-bottom</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;"> 1px solid #55895B</span>;<span style="color: #ff0000;">
    border-left-width</span>:<span style="color: #0000ff;"> 5px</span>;<span style="color: #ff0000;">
    border-radius</span>:<span style="color: #0000ff;"> 10px</span>;<span style="color: #ff0000;">
    border-right-width</span>:<span style="color: #0000ff;"> 5px</span>;
    

    }

    /侧边栏列表样式/

    sideBarMain ul {

    background-color</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 15px 20px</span>;<span style="color: #ff0000;">
    border-bottom-left-radius</span>:<span style="color: #0000ff;"> 10px</span>;<span style="color: #ff0000;">
    border-bottom-right-radius</span>:<span style="color: #0000ff;"> 10px</span>;
    

    }

    sideBarMain li {

    line-height</span>:<span style="color: #0000ff;"> 40px</span>;<span style="color: #ff0000;">
    border-bottom</span>:<span style="color: #0000ff;"> 1px solid #ddd</span>;<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 14px</span>;
    

    }

    css

    3-2. 侧边栏公告

    3-3. 头像设置

    在 [ 管理 ] - [ 设置 ] - 博客侧边栏公告 这里添加 html 代码,用来添加头像,地址用自己的头像

    //图片的地址更换成你的头像的地址
    <img src="https://cnblogspic.oss-cn-hangzhou.aliyuncs.com/avatar/937605/20180122200140.png">

    3-4. 侧边栏公告样式

    /*侧边栏公告*/
    #blog-news > img {
        /*头像*/
        display: block;
        margin: auto;
        border-radius: 50%;
    }
    

    profile_block {

    font-size</span>:<span style="color: #0000ff;"> 15px</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 20px</span>;<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;"> 1.8</span>;
    

    }

    profile_block > a:link {

    color</span>:<span style="color: #0000ff;"> #F60</span>;
    

    }

    /公告结束/

    css

    3. 侧边栏日历

    /* 日历 */
    #blog-calendar, #calendar {
        width: 300px;
    }
    

    blog-calendar td {

    padding</span>:<span style="color: #0000ff;"> 5px 3px</span>;<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 14px</span>;
    

    }

    blog-calendar td a {

    font-weight</span>:<span style="color: #0000ff;"> bold</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #59a020</span>;
    

    }

    blog-calendar table a:hover {

    color</span>:<span style="color: #0000ff;"> #59a020</span>;<span style="color: #ff0000;">
    text-decoration</span>:<span style="color: #0000ff;"> underline</span>;<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> transparent</span>;
    

    }

    blog-calendar table u {

    text-decoration</span>:<span style="color: #0000ff;"> none</span>;
    

    }

    /日历结束/

    css

    4. 侧边栏搜索框

    .mySearch #q {
        height: 40px;
        width: 150px;
        border-radius: 5px;
        border: 1px solid #ddd;
    }
    

    .mySearch #btnZzk {
    height
    : 42px;
    width
    : 90px;
    background
    : #fd6d0dd1;
    color
    : #fff;
    border-radius
    : 5px;
    border
    : none;
    font-size
    : 15px;
    cursor
    : pointer;
    }

    .div_my_zzk {
    padding
    : 0 20px;
    display
    : flex;
    justify-content
    : space-around;
    }

    /搜索框结束/

    css

    4. 评论列表

    /*评论*/
    /*评论列表*/
    #blog-comments-placeholder {
        border-radius: 10px;
        background: #fff;
        padding: 30px 40px;
    }
    

    .feedback_area_title {
    background
    : url(//www.cnblogs.com/skins/red_autumnal_leaves/images/titlebg.png) no-repeat left center #fff;
    border
    : 1px solid #55895B;
    border-left-width
    : 5px;
    border-radius
    : 10px;
    border-right-width
    : 5px;
    padding
    : 15px 50px;
    }

    css
    /* 提交评论按钮 */
    #btn_comment_submit {
        border: solid 1px #fd6d0dd1 !important;
        width: 90px;
        height: 40px;
        color: #fff !important;
        background-color: #fd6d0dd1 !important;
        border-radius: 5px;
        font-size: 16px;
        cursor: pointer;
    }
    css

    4-2. 侧边栏评论

    /*侧边评论*/
    li.recent_comment_body {
        line-height: 30px;
    }
    View Code

    5. 个性签名

    个性签名 这个是根据个人的喜好设置的,可以在 [ 管理 ] - [ 设置 ] - [ 博客签名 ] 里面自定义设置。下面展示我的个性签名的设置。

    /* 个性签名 */
    #MySignature {
        box-shadow: 8px 1px 10px #989898;
        padding: 10px;
        text-shadow: 1px 1px 1px #FFF;
        font-size: 17px;
        border-left: solid 5px #55895B;
        background: #F3F3F3;
        border-radius: 10px 10px 50% 10px;
        line-height: 2.4;
        margin: 40px 0;
    }
    

    MySignature a {

    text-decoration</span>:<span style="color: #0000ff;"> none</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #4183c4</span>;<span style="color: #ff0000;">
    font-weight</span>:<span style="color: #0000ff;"> bold</span>;
    

    }

    MySignature a:hover {

    text-decoration</span>:<span style="color: #0000ff;"> underline</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #f60</span>;
    

    }

    MySignature span {

    color</span>:<span style="color: #0000ff;"> #f60</span>;
    

    }

    View Code

    6. 博客文章主体样式

    /* 标题title样式 */
    #topics .postTitle {
        font-size: 25px;
        padding: 0 40px;
        border: none;
        box-sizing: border-box;
    }
    

    cb_post_title_url {

    border</span>:<span style="color: #0000ff;"> 1px solid #55895B</span>;<span style="color: #ff0000;">
    border-left-width</span>:<span style="color: #0000ff;"> 5px</span>;<span style="color: #ff0000;">
    border-radius</span>:<span style="color: #0000ff;"> 10px</span>;<span style="color: #ff0000;">
    border-right-width</span>:<span style="color: #0000ff;"> 5px</span>;<span style="color: #ff0000;">
    background-position</span>:<span style="color: #0000ff;"> left center</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 15px 50px</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 100%</span>;<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> inline-block</span>;<span style="color: #ff0000;">
    box-sizing</span>:<span style="color: #0000ff;"> border-box</span>;
    

    }

    View Code
    /*设置背景色和字体大小*/
    body {
        font-size: 15px;
        box-sizing: border-box;
    }
    

    /mainContent主体内容容器/

    main {

    display</span>:<span style="color: #0000ff;"> flex</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 95%</span>;
    

    }

    mainContent .forFlow {

    margin</span>:<span style="color: #0000ff;"> 0 0 0 310px</span>;
    

    }

    mainContent {

    margin</span>:<span style="color: #0000ff;"> 0 0 0 -310px</span>;
    

    }

    post_detail {

    overflow</span>:<span style="color: #0000ff;"> hidden</span>;
    

    }

    / 主体内容样式 /
    .postBody
    {
    padding
    : 20px 40px;
    }

    cnblogs_post_body {

    font-size</span>:<span style="color: #0000ff;"> 15px</span>;
    

    }

    cnblogs_post_body h2 {

    //标题h2
    border-left</span>:<span style="color: #0000ff;"> 5px solid #55895B</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 10px 20px</span>;<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;"> 2</span>;<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> #d6dbdf8a</span>;<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 30px 0</span>;
    

    }

    topics .postDesc {

    display</span>:<span style="color: #0000ff;"> none</span>;
    

    }

    View Code

    7. 其他部分的样式

    /* 关注收藏等几个按钮 */
    #green_channel {
        padding: 10px;
        margin: 20px 0;
        font-size: 15px;
        width: 400px;
    }
    

    green_channel a {

    border-radius</span>:<span style="color: #0000ff;"> 3px</span>;<span style="color: #ff0000;">
    text-shadow</span>:<span style="color: #0000ff;"> none</span>;<span style="color: #ff0000;">
    font-weight</span>:<span style="color: #0000ff;"> normal</span>;<span style="color: #ff0000;">
    box-shadow</span>:<span style="color: #0000ff;"> none</span>;
    

    }

    / 禁用下划线 /
    .postBody a:link, .postBody a:visited, .postBody a:active
    {
    text-decoration
    : none;
    }

    / 上一篇下一篇 /

    post_next_prev {

    font-size</span>:<span style="color: #0000ff;"> 14px</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #535353</span>;
    

    }

    /底部隐藏作者,隐藏推荐和反对/

    author_profile {

    display</span>:<span style="color: #0000ff;"> none</span>;
    

    }

    div_digg {

    display</span>:<span style="color: #0000ff;"> none</span>;
    

    }

    /隐藏广告/

    ad_t2, #cnblogs_c1, #under_post_news, #cnblogs_c2, #under_post_kb {

    display</span>:<span style="color: #0000ff;"> none</span>;
    

    }

    View Code
    **------------恢复内容结束------------**
  • 相关阅读:
    .NET Cache缓存
    异步
    es6常用功能
    vue-router路由懒加载
    vue中nextTick和$nextTick
    动态模板中 swiper 划不动问题
    javaScript正则判断手机号
    Mac终端使用技巧
    alert IOS自带域名
    vue css background路径不对
  • 原文地址:https://www.cnblogs.com/Neroi/p/12405526.html
Copyright © 2011-2022 走看看