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

    1.效果图

    使用Markdown书写博客后,为了更好的美化下博客,在网上搜索了很多资料,下面代码的资料来源于:博客园样式美化
    下图为通过以下代码美化后的效果图:

    2.实现代码

    /* 文章标题样式(这个不是markdown里的标题) */
    #topics .postTitle a {
        /* color: #169fe6; */
    	font-family: Georgia,Times New Roman,Times,sans-serif, monospace;
    	font-weight: bold;
    }
     
    /* 普通文字样式 */
    #cnblogs_post_body p {
    	margin: 18px auto;
    	color: #000;
    	font-family: Georgia,Times New Roman,Times,sans-serif, monospace;
    	font-size: 16px;
    	text-indent: 0;
    }
     
    /* 标题样式 */
    #cnblogs_post_body h1 {
    	font-family: Georgia,Times New Roman,Times,sans-serif, monospace;
    	font-size: 32px;
    	font-weight: bold;
    	line-height: 1.5;
    	margin: 10px 0;
    }
    
    #cnblogs_post_body h2 {
    	font-family: Consolas, "Microsoft YaHei", monospace;
    	font-size: 26px;
    	font-weight: bold;
    	line-height: 1.5;
    	margin: 20px 0;
    }
    
    #cnblogs_post_body h3 {
    	font-family: Georgia,Times New Roman,Times,sans-serif, monospace;
    	font-size: 20px;
    	font-weight: bold;
    	line-height: 1.5;
    	margin: 10px 0;
    }
    
    #cnblogs_post_body h4 {
    	font-family: Georgia,Times New Roman,Times,sans-serif, monospace;
    	font-size: 18px;
    	font-weight: bold;
    	margin: 10px 0;
    }
    /* 标题样式设置结束 */
     
    /* 去除双下划线斜体样式 */
    em {
    	font-style: normal;
    	color: #000;
    }
     
    /* 无序列表 */
    #cnblogs_post_body ul li {
    	font-family: Georgia,Times New Roman,Times,sans-serif, monospace;
    	color: #000;
    	font-size: 16px;
    	list-style-type: disc;
    }
     
    /* 有序列表 */
    #cnblogs_post_body ol li {
    	font-family: Georgia,Times New Roman,Times,sans-serif, monospace;
    	color: #000;
    	font-size: 16px;
    	list-style-type: decimal;
    }
     
    /* 超链接 */
    #cnblogs_post_body a:link {
    	text-decoration: none;
    	color: #002C99;
    }
     
    /* 引用背景 */
    #topics .postBody blockquote {
    	background: #fff3d4;
    	border: none;
    	border-left: 5px solid #f6b73c;
    	margin: 0;
    	padding-left: 10px;
    }
     
    /* 单行代码 */
    .cnblogs-markdown code {
    	font-family: Consolas, "Microsoft YaHei", monospace !important;
    	font-size: 16px !important;
    	line-height: 20px;
    	background-color: #f5f5f5 !important;
    	border: 1px solid #ccc !important;
    	padding: 0 5px !important;
    	border-radius: 3px !important;
    	line-height: 1.8;
    	margin: 1px 5px;
    	vertical-align: middle;
    	display: inline-block;
    }
     
    /* 多行代码, 引用 */
    .cnblogs-markdown .hljs {
    	font-family: Consolas, "Microsoft YaHei", monospace !important;
    	font-size: 16px !important;
    	line-height: 1.5 !important;
    	padding: 5px !important;
    }
    
  • 相关阅读:
    分时区查询问题解决
    .htaccess伪静态实例分享
    net mvc 小目标
    PHP中钩子函数的实现与认识
    session
    修改net基本三层 动软生产
    格式化问题
    数据字典
    关联数据和formatter问题-easyui+微型持久化工具
    说说JSON和JSONP,也许你会豁然开朗
  • 原文地址:https://www.cnblogs.com/OliverQin/p/12227349.html
Copyright © 2011-2022 走看看