博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
两分钟搞定博客园自定义样式
阅读量:4916 次
发布时间:2019-06-11

本文共 2829 字,大约阅读时间需要 9 分钟。

整体皮肤样式

选用的是在 SimpleMemory 基础上进行改造。所以注意:引用模板css样式取药取消勾选

将以下样式复制到 页面定制CSS代码 中:

html {    font-size: 14px !important;}#home h1 {    font-size: 45px;}#blogTitle h1,#blogTitle h2 {    font-family: 'comic sans ms';}body {    background-color: #f5f5d5 !important;    font-family: Georgia, serif;    word-spacing: 0.2rem;    height: 100%;    width: 100%;}#cnblogs_post_body h2 {    color: #21759b;}#cnblogs_post_body h3 {    margin: 1.5rem 0;}#home {    width: 65% !important;    min-width: 640px !important;    max-width: 960px !important;    border-radius: 1rem !important;    background-color: #f5f5d5 !important;    box-shadow: none;    opacity: 0.95;}.catListEssay,.catListLink,.catListNoteBook,.catListTag,.catListPostCategory,.catListPostArchive,.catListImageCategory,.catListArticleArchive,.catListView,.catListFeedback,.mySearch,.catListComment,.catListBlogRank,.catList,.catListArticleCategory {    background: none !important;}.newsItem {    background: none !important;}#sideCatalog-catalog ul .active {    background-color: #fff !important;}.postBody blockquote {    margin: 1rem 0;    padding: 0.5rem 1rem;    border: 1px solid #d3d3d3;    border-radius: 1rem;    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #deebf7), color-stop(1, #aad2f0));}.cnblogs-markdown .hljs,.cnblogs-post-body .hljs {    border-width: 0.3rem !important;    border-color: #e0dfcc !important;    border-style: solid !important;    text-shadow: 0 1px white;    border-radius: 1rem !important;    padding: 10px 20px !important;    font-family: Consolas, monospace, Microsoft YaHei !important;    font-size: 14px !important;    margin: 20px 0 !important;    background-color: #f5f2f0 !important;}img {    border-width: 0.3rem !important;    border-color: #e0dfcc !important;    border-style: solid !important;    text-shadow: 0 1px white;    border-radius: 1rem !important;    margin: 20px 0 !important;    overflow: hidden;}#cnblogs_post_body p {    margin: 1rem 0;    line-height: 2rem;    font-size: 1.2rem !important;}.cnblogs-markdown code,.cnblogs-post-body code,.cnblogs-markdown pre code,.cnblogs-post-body pre code {    display: inline-block;    padding-left: 5px !important;    padding-right: 5px !important;    font-family: monospace !important;    background-color: pink !important;    border-radius: 5px !important;    font-size: 14px !important;    margin: auto 3px;    border: none !important;}

添加看板萌娘

博客侧边栏公告(支持HTML代码)(支持JS代码) 中添加:

注意:如果没有开通js代码权限,需要发送邮件到博客园邮箱申请开通,否则无效。

增加鼠标点击样式

还是在 博客侧边栏公告(支持HTML代码)(支持JS代码) 中添加:

文章增加目录

页脚Html代码 中添加:

添加图片放大镜

很多时候图片比较小,图片文字在博文中不是很清楚,这时候如果可以点击放大就很好了,推荐一个实现该功能的代码,放在【页脚Html代码】中,具体的代码如下:

添加 Github 丝带链接

在【页首HTML】代码中填入如下内容:

Fork me on GitHub

更多丝带样式参考:

还有一种三角形的 Github 样式,参考链接:

至此,页面基本上效果已经达到我想要的效果,希望能帮助到你。

转载于:https://www.cnblogs.com/lvonve/p/11142394.html

你可能感兴趣的文章
springboot部署到tomcat
查看>>
jquery-ajax之4:无刷新 select 数据源及事件绑定(2)
查看>>
(六)Hive的高级操作
查看>>
java并发阻塞队列
查看>>
poj 2449 Remmarguts' Date 求第k短路 Astar算法
查看>>
lightoj1063【求割点】
查看>>
C#是怎么获取窗口标题的
查看>>
LeetCode 24 Swap Nodes in Pairs
查看>>
JavaScript Boolean(布尔) 对象
查看>>
IIS下的SSL证书配置
查看>>
Dynamics CRM Form表单中通过javascript抓取触发change事件字段的属性名
查看>>
Activiti的后台数据库表详解
查看>>
java 映射处理类方法和属性(get set)
查看>>
Auto Completion ComboBox for WTL
查看>>
javascript 拷贝文本
查看>>
html之a标签
查看>>
python-匿名函数lambda
查看>>
poj 1179 Polygon (区间dp)
查看>>
lxml视频讲座
查看>>
程序员50题(JS版本)(六)
查看>>