博客样式美化一

先看效果

再看代码

选择博客园主题

选择极简风格的SimpleMenory主题

自定义样式

页面CSS

body {
    color: #000000b3;
    background: url(https://img2018.cnblogs.com/blog/1367440/201810/1367440-20181028163415543-591919591.jpg) fixed;
    background-size: 100%;
    background-repeat: repeat;
    font-family: "微软雅黑","Helvetica Neue",Helvetica,Verdana,Arial,sans-serif;
    font-size: 12px;
    min-height: 101%;
}
#blogTitle h1 {
    font-size: 50px;
    font-family: Consolas;
    font-weight: bold;
    font-style: italic;
    margin-top: 20px;
}
.catListTitle {
    background: none repeat scroll 0% 0% rgb(43, 102, 149);
    border-bottom: 1px solid #646b87e6;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    color: #FFFFFF;
    font-size: 1.2em;
    height: 1.3em;
    line-height: 1.3em;
    padding: 5px;
    text-indent: 0.5em;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
}
#home {
    margin: 0 auto;
    width: 80%;
    min-width: 1250px;
    background-color: rgba(248, 248, 248, 0.85);
    padding: 30px;
    margin-top: 50px;
    margin-bottom: 50px;
    box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
    position: relative;
}
.newsItem, .catListEssay, .catListLink, .catListNoteBook, .catListTag, .catListPostCategory, .catListPostArchive, .catListImageCategory, .catListArticleArchive, .catListView, .catListFeedback, .mySearch, .catListComment, .catListBlogRank, .catList, .catListArticleCategory {
    background: none;
    margin-bottom: 35px;
    word-wrap: break-word;
}
#blog-calendar td {
    font-size: 12px;
    font-family: Consolas;
}
.input_my_zzk {
    border: 1px solid #ccc;
    background: none;
    width: 100%;
    height: 25px;
    padding-right: 30px;
    padding-left: 5px;
    outline: 0;
}
.CalDayHeader {
    background: rgba(245,245,245,0.3) !important;
    font-weight: 100;
    color: #5E5F63;
}
.CalTitle {
    background: none;
    width: 100%;
    height: 25px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    padding: 5px 0;
    color: #FFF;
}
.CalTitle td {
    background: rgba(245,245,245,0.3) !important;
    border: 0px !important;
    color: #5E5F63;
    font-family: "Comic Sans MS";
}
a:link {
    color: cornflowerblue;
}
a:visited {
    color: cornflowerblue;
}
a:hover {
    color:cadetblue;
}
a:active {
    color:black;
}
.CalTodayDay {
    background: rgba(247,247,247,0.3) !important;
    color: #D21414B3;
    font-weight: bold;
}
.cnblogs_code {
    background-color: rgba(247,247,247,0.3);
    font-family: Consolas !important;
    font-size: 12px!important;
    border: 1px solid #ccc;
    padding: 5px 10px;
    overflow: auto;
    margin: 5px 0;
    color: #000;
}
.cnblogs_code div {
    background-color: rgba(247,247,247,0.3);
}
.cnblogs_code_collapse {
    border-right: gray 1px solid;
    border-top: gray 1px solid;
    border-left: gray 1px solid;
    border-bottom: gray 1px solid;
    background-color: rgba(247,247,247,0.3);
    padding: 2px;
}
blockquote {
    background: rgba(197, 221, 48, 0.29);
    border:2px solid #efefef;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-top: 10px;
    margin-bottom: 10px;
}
div.commentform input.author, div.commentform input.email, div.commentform input.url {
    background-image: url(http://static.cnblogs.com/images/icon_form.gif);
    border: 1px solid white !important;
    padding: 4px 4px 4px 30px;
    width: 300px;
    font-size: 13px;
    background-color: rgba(247,247,247,0.3);
}
#comment_form_container .comment_textarea {
    width: 362px;
    height: 200px;
    font-size: 13px;
    padding: 8px;
    margin-bottom: 10px;
    color: #555;
    border: 1px solid white;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    background-color: rgba(247,247,247,0.3);
}
.cnblogs_code pre {
font-family: Consolas !important;
font-size: 12px!important;
word-wrap: break-word;
white-space: pre-wrap;
}
.cnblogs_code span {
font-family: Consolas !important;
font-size: 12px!important;
line-height: 1.5!important;
}
div#cnblogs_c2 {
display: none;
}
div#cnblogs_c1 {
display: none;
}
div#under_post_news {
display: none;
}
div#ad_t2 {
display: none;
}
div#under_post_kb {
display: none;
}
.feedbackItem {
    margin: 10px 5px 0px;
    padding: 5px;
    box-shadow: 0 0 10px 0 #AAA;
}
#topics .postTitle {
    font-size:300%;
    font-weight: normal;
}
.postTitle a:link, .postTitle a:visited, .postTitle a:active {
    color: #4b7c92;
    transition: all 0.4s cubic-bezier(0, 0, 0.12, 1) 0s;
}
#cnblogs_post_body h2 {
    padding: 10px 0px;
    margin: 20px 0px 0px;
    font-size: 20px;
    color: #263e54e6;
}
#cnblogs_post_body h3{
    padding: 2px 0px;
    color: #408392;
    font-size: 18px;
}
#cnblogs_post_body h4{
    color: #478dbacc;
    font-size: 16px;
}
#cnblogs_post_body h5{

    color: cadetblue;
}
#cnblogs_post_body h1{
    background: none repeat scroll 0% 0% rgb(43, 102, 149);
    border-radius: 6px 6px 6px 6px;
    box-shadow: 0px 0px 0px 1px rgb(95, 90, 75), 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
    color: rgb(255, 255, 255);
    font-family: "微软雅黑","宋体","黑体",Arial;
    font-size: 20px;
    font-weight: bold;
    height: 20px;
    line-height: 20px;
    margin: 15px 0px !important;
    padding: 8px 0px 10px 20px;
    text-shadow: 2px 2px 3px rgb(34, 34, 34);
}
.buryit {

}

#div_digg {
    /* float: right;
    position: fixed;
    width: auto;
    bottom: 0px;
    left: 0.5%;
    margin-bottom: 10px;
    background: rgba(247,247,247,0.3);
    margin-right: 30px;
    font-size: 12px;
    box-shadow: 0 0 10px 0 #AAA;
    padding: 10px;
    border: 2px solid rgba(82, 168, 236, 0.8);
    text-align: center;
    margin-top: 10px; */
}
textarea {
    background: rgba(247,247,247,0.3);
}

#navigatorTitleDiv
{
    padding: 3px;
    position: fixed;
    top:244px;
    right:304px;
    font-weight:bold;
    cursor:pointer;
    background-color: antiquewhite;
}

#navigatorDiv
{
    border-style:double;
    padding: 10px;
    padding-top:30px;
    position: fixed;
    top:240px;
    right:300px;
    background-color: antiquewhite;
}

#cnblogs_post_body ul li
{
    color: #0009;
}
#cnblogs_post_body p
{
    color: #000000b3;
}

.hljs-comment
{
    font-size: 14px;
}   

.div_my_zzk
{
    width: 198px;
}

.postBody
{
    font-size: 16px;
    color: #3c0903b3;
}

.cnblogs-markdown code, .cnblogs-post-body code{
    font-size:14px !important;
    background-color:#ce9f9f4d !important;
    margin: 0px 0px 2px 0px;
}

.cnblogs-markdown .hljs, .cnblogs-post-body .hljs{
    color:#1b871be6;
}

.hljs-keyword, .hljs-selector-tag, .hljs-built_in, .hljs-name, .hljs-tag{
    margin:0px 2px 1px 2px;
    color: #0000ffe6;
}

.hljs-comment, .hljs-quote, .hljs-variable{
    color:#1b871be6;
}

.hljs-string, .hljs-title, .hljs-section, .hljs-attribute, .hljs-literal, .hljs-template-tag, .hljs-template-variable, .hljs-type, .hljs-addition{
    color: #b13535cc;
}

/*公告栏时钟样式*/
.clockdiv{
    text-align: center;
}

/* 重载SimpleMemory样式 调整公告栏位置*/
#mainContent{
    margin-left: -20em;
    float: right;
}
#sideBar{
    width: 235px;
}

/*
github.com style (c)
*/
.cnblogs-markdown .hljs {
  background-color: #999fc61a !important;
  border: 1px solid #418a2f66 !important;
  font-size:16px !important;
}

侧边公告栏HTML

<div class="clockdiv"><canvas id="clock" width ="200px" height="200px">您的浏览器不兼容canvas</canvas><div>
<script type="text/javascript" src="http://files.cnblogs.com/files/lixu880/canvas.js"></script>

页首HTML代码

<script type="text/javascript">
$(function(){
$("#home").prepend("<a href='https://github.com/JerzyLeung' target='blank' style='position: absolute; top: 0px; right:0px; border:0; z-index: 1;'><img src='http://images.cnblogs.com/cnblogs_com/stulzq/1239211/o_forkme_right_red_aa0000.png'></a>");
});
</script>

原文地址：https://www.cnblogs.com/jerzy/p/10290211.html

时间： 2024-08-29 15:18:45

博客样式美化一的相关文章

博客园美化教程大集合（超详细，看这篇就够了）

阅读目录: 1. 前言 2. 定制自己的博客 0. 美化整体效果 1. 准备工作 2. 自定义个性化导航栏 3. 添加顶部博主信息 4. 添加顶部滚动公告 5. 为博客文章添加目录导航 6. 添加分享功能按键 7. 定制推荐和反对按键的炫酷样式 8. 添加快速返回顶部的功能按键 9. 添加打赏功能按键 10. 添加页面放大缩小功能按键 11. 添加Github图标及链接 12. 添加公告栏图片 13. 添加公告栏文字信息 14. 添加公告栏个性时钟 15. 为公告栏添加访客来源统计 16. 为公

博客园美化首页随笔展示美化

博客园美化首页随笔展示美化一.css .postDesc-img { position: absolute; padding-bottom: 0; float: right; right: 0; bottom: 0; z-index: -1; } .cnblogs-post-body h3 { text-decoration: none; font-size: 10px; line-height: 1px; } .cnblogs-post-body h2 { color: red; font-

个人博客主题美化

个人博客主题美化选择主题 Hexo默认的主题是landscape,推荐以下主题: snippet Hiero JSimple BlueLake 详见:https://github.com/search?q=hexo-theme 应用主题下载主题将下载好的主题文件夹,粘贴到站点目录的themes下. 更改站点配置文件_config.yml 的theme字段,为主题文件夹的名称: # Extensions## Plugins: https://hexo.io/plugins/## Themes

博客园美化夜间模式

博客园美化夜间模式一.点击控制样式主要看思路,自己增删改查,里面样式只针对我的博客一.触发点击二.修改按钮样式以及对于类名三.将模式信息存入sessionStorage中四.更具按钮的类名,自己博客样式进行跟换  <script > let night_close = document.querySelector('.night-close')||document.querySelector('.night-open'); night_

博客园美化博客随笔目录

博客园美化博客随笔目录基于孤傲苍狼在2014-5-11写的目录代码基础上进行改进一.js代码  <script type="text/javascript"> var BlogDirectory = { /* 获取元素位置,距浏览器左边界的距离(left)和距浏览器上边界的距离(top) */ getElementPosition:function (ele) { var topPosition = 0; var leftPosition

博客样式测试

博客样式测试博客样式测试博客样式测试博客样式测试博客样式测试博客样式测试博客样式测试博客样式测试博客样式测试博客样式测试博客样式测试博客样式测试博客样式测试博客样式测试博客样式测试博客样式测试博客样式测试博客样式测试博客样式测试博客样式测试博客样式测试博客样式测试博客样式测试博客样式测试博客样式测试博客样式测试博客样式测试博客样式测试博客样式测试博客样式测试博客样式测试博客样式测试博客样式测试博客样式测试博客样式测试博客样式测试博客样式测试博客样式测试 ? 1 2 3 4 5 6 7 8 9 1

博客园美化资源网站链接

详谈如何定制自己的博客园皮肤(禁用css模板级别) 博客美化汇总 NSDog 博客园美化教程大集合----极致个性化你的专属博客(超详细,看这篇就够了) 博客园美化教程第二篇----极致个性化你的专属博客(为博客添加背景音乐插件,调整页面布局等) 原文地址:https://www.cnblogs.com/CH520/p/9813646.html

博主自己的博客样式分享

#下载 ??Github:源码下载 #声明 ??1. 本站模仿[夏日浅笑.]博主的博客样式,再此基础上进行二次加工,因为该博主分享出来的源码我使用时出来挺多问题. ??2. 本分享提供给懒于设置样式的人和新入门的小白. ??3. 如果使用该样式请说明出处 #使用方式打开博客设置,将博客皮肤设置为BlueSky,并申请JS代码支持一般来说,快的话1小时,慢的话最晚一天下载源码将修改好的源码,复制到后台中,3个文件对应. #修改源码 ??列出需要修改的地方 ??1.所有a标签以及页面描述改

博客主题美化

1. 博客主题美化 cnblogs是一个老牌博客站点,是一个非常好的记录学习与生活的地方,但是主题看着着实有些年代感,所以找了一些博客主题美化下博客. 首先展示一下修改后的效果主页效果侧边栏效果博客页面效果 2. 需要修改的地方注意:需要申请JS权限,一般申请后都能通过博客皮肤页面定制CSS 禁用模板默认CSS 博客侧边栏公告 3. 修改方法打开博客设置地址修改主题为SimpleMemory 选中禁用模板CSS 复制页面定制CSS(请打开复制)到第一个框中复制侧边栏公告代码到第

博客样式美化 一