首页 > 其他分享 >（二）博客园美化：背景图字体及主体排版

（二）博客园美化：背景图字体及主体排版

时间：2023-03-16 11:56:25浏览次数：49  
标签：rgba color 背景图 博客园 247 background 10px font 排版

空闲的时候自己根据很多大神的美化教程，把自己的博客园简单装修了下。

再此整理一下美化方式和步骤，如果喜欢本人博客这种风格，可以参考一下这个系列。

一、背景图设置

打背景图设置需要在 页面定制 CSS 代码 栏追加以下CSS 代码，另外设置下字体

（其中图片地址请换成自己的图片外链地址，不会设置的看第一篇第二节）

图片：https://images.cnblogs.com/cnblogs_com/xxhxs-21/1782400/o_200607135014123.jpg

body {
    color: #000;
    background: url(https://images.cnblogs.com/cnblogs_com/xxhxs-21/1782400/o_200607135014123.jpg) fixed;
    background-size: cover;
    background-repeat: repeat;
    font-family: "微软雅黑","Helvetica Neue",Helvetica,Verdana,Arial,sans-serif;
    font-size: 12px;
    min-height: 101%;
}

保存后看效果

 

 

二、设置中间模块的透明度及排版

页面定制 CSS 代码 栏追加以下CSS 代码：

/* 主模块版式加透明度 */
#home {
    margin: 0 auto;
    width: 65%;
    min-width: 950px;
    background-color: rgba(255,255,255,0.8);
    padding: 30px;
    margin-top: 300px;
    margin-bottom: 50px;
    box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
}

顺便设置下其他细节，页面定制 CSS 代码 栏追加以下CSS 代码：

/* 博客园名称字体样式 */
#blogTitle h1 {
    font-size: 50px;
    font-family: Consolas;
    font-weight: bold;
    font-style: italic;
    margin-top: 20px;
}
/* 标题样式 */
.catListTitle {
    margin-top: 21px;
    margin-bottom: 10.5px;
    text-align: left;
    border-left: 10px solid rgba(82, 168, 236, 0.8);
    padding: 5px 0 5px 10px;
    background-color: rgba(245,245,245,0.3);
}
.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: #FFF;
    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(247,247,247,0.3);
    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:230%;
}
.postTitle a:link, .postTitle a:visited, .postTitle a:active {
    color: #21759b;
    transition: all 0.4s cubic-bezier(0, 0, 0.12, 1) 0s;
}
#cnblogs_post_body h2 {
    border-left: 10px solid rgba(82, 168, 236, 0.3);
    background: rgba(247,247,247, 0.3);
    padding: 3px 10px;
}
#cnblogs_post_body h3{
    border-left: 5px solid rgba(0, 235, 255, 0.3);
    padding: 2px 5px;
    background: rgba(247,247,247,0.3);
}
#cnblogs_post_body h4{
    border-left: 5px solid rgba(222, 101, 114,0.3);
    padding-left: 5px;
    background: rgba(247,247,247,0.3);
}
#cnblogs_post_body h1{
    background: rgba(247,247,247,0.3);
    border-left: 15px solid rgba(0, 122, 255, 0.3);
    padding: 3px 10px;
    font-size: 175%;
    border-right: 15px solid rgba(0, 122, 255, 0.3);
}
.buryit {
    display: none;
}
#div_digg {
    float: right;
    position: fixed;
    width: auto;
    bottom: 10px;
    left: 70%;
    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;
}
.pln{color:#4d4d4c}ol.linenums{margin-top:0;margin-bottom:0;color:#8e908c}li.L0,li.L1,li.L2,li.L3,li.L4,li.L5,li.L6,li.L7,li.L8,li.L9{padding-left:1em;background-color:#fff;list-style-type:decimal!important;}@media screen{.str{color:#718c00}.kwd{color:#8959a8}.com{color:#8e908c}.typ{color:#4271ae}.lit{color:#f5871f}.pun{color:#4d4d4c}.opn{color:#4d4d4c}.clo{color:#4d4d4c}.tag{color:#c82829}.atn{color:#f5871f}.atv{color:#3e999f}.dec{color:#f5871f}.var{color:#c82829}.fun{color:#4271ae}}
/*下面是我设置背景色，字体大小和字体*/
.cnblogs-markdown code{
background:#fff!important;
}
.cnblogs_code,.cnblogs_code span,.cnblogs-markdown .hljs{
    font-size:16px!important;
}
.syntaxhighlighter a, .syntaxhighlighter div, .syntaxhighlighter code, .syntaxhighlighter table, .syntaxhighlighter table td, .syntaxhighlighter table tr, .syntaxhighlighter table tbody, .syntaxhighlighter table thead, .syntaxhighlighter table caption, .syntaxhighlighter textarea {
    font-size: 16px!important;
}
.cnblogs_code, .cnblogs_code span, .cnblogs-markdown .hljs{
font-family:consolas, "Source Code Pro", monaco, monospace !important;
}
#div_digg {
    float: right;
    position: fixed;
    width: auto;
    bottom: 10px;
    left: 70%;
    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;
}
.buryit {
    display: none;
}
#blog_nav_sitehome{
    display: none;
}

保存后看效果，大体效果已经出来了

翻译

搜索

复制

<iframe></iframe>

标签：rgba,color,背景图,博客园,247,background,10px,font,排版
From： https://www.cnblogs.com/xxhxs-21/p/17222001.html

相关文章

  • (一) 博客园美化：准备工作加基础美化
    空闲的时候自己根据很多大神的美化教程，把自己的博客园简单装修了下。再此整理一下美化方式和步骤，如果喜欢本人博客这种风格，可以参考一下这个系列一、默认皮肤选择点击博......
  • Markdown 利用HTML进行优雅排版
    Markdown利用HTML进行优雅排版我在使用Markdown整理文档的时候发现，Markdown本身对文本格式的排版很单一，只有编号、字体加粗、固定标题格式等一些基础的排版，使用不够灵活......
  • 【快应用】让背景图完美无“缺”
    ​ 【关键字】快应用、背景图显示部分 【问题背景】快应用中在给组件设置后背景图的时候，背景图不能全部展示，只有展示了部分，该如何处理？代码：<template><divcl......
  • 【快应用】让背景图完美无“缺”
    【关键字】快应用、背景图显示部分【问题背景】快应用中在给组件设置后背景图的时候，背景图不能全部展示，只有展示了部分，该如何处理？代码：<template><divclass="container">......
  • 博客园美化教程
    博客园美化教程前言：没啥时间写博客，不过最进将博客美化了一遍现在，选了好几款不错的主题，感觉都很喜欢，选择困难症犯了，决定写一个完整详细的教程，将几款博客都试一遍，现在先介......
  • 博客园SimpleMemory美化搬运工教程
    我的博客园主页我的博客这不是我写的代码，但是，我是负责把写代码的大佬的代码分享出来。接下来，就开始吧。1.开通博客权限。点击左上角头像，然后点击左上角我的博......
  • 【考研】2020年，计算机，考研，专业课（408）大纲，排版校对版
    I考试性质计算机学科专业基础综合考试是为高等院校和科研院所招收计算机科学与技术学科的硕士研究生而设置的具有选拔性质的联考科目，其目的是科学、公平、有效地测试考生掌......
  • 博客园装修小记
    前几天想要在自己自己的小站，但是写到一半感觉实在是有些麻烦，所以还是打算直接使用博客园。打开博客园的时候，突然发现好像在2021年就注册了博客园，但是一直没有用过的样子…......
  • 浏览器对于特定域名的缓存资源没有更新导致前端页面排版出错
    如题，在使用网上下载来的前端模板，放入我的项目（已经部署过）中，启动服务器后访问，发现排版出现问题： 但资源已经更新在项目里了，css、font等等。随后发现不部署到服务器的时候......
  • 博客园主题美化
    参考地址：https://cloud.tencent.com/developer/article/1953331文档参考：https://bndong.github.io/Cnblogs-Theme-SimpleMemory/v1.1/#/**window.cnblogsConfig配置详情......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99