自定义博客样式-程序员宅基地

技术标签: ViewUI  前端  

自定义博客样式


用了一天时间简单的更改了下博客的样式,前端技术不甚了解,暂且粗制至此。
有一些问题没解决,还有些功能没实现。

模板使用博客园的官方模板:En_summerGarden。基于此模板进行自定义。

前后对比:

img_da0edc20f72278d04f26c636f08d88a1.png
img_cb197ce78ccf9cd295dab49387777c5d.png

定制 Css

#container pre code {
    display: block  !important;
}
body {
    font-size: 12px;
    font-family: sans-serif;
    min-height: 100%;
    background: url("https://images.pexels.com/photos\
        /1438254/pexels-photo-1438254.jpeg?auto=compress\
        &cs=tinysrgb&dpr=2&h=650&w=940") no-repeat
    center center fixed;
    border-radius: 6px;
    background-size: cover;
 }

#header {
    background: inherit;
    height: 146px;
    padding-top: 30px;
}


#blogTitle {
    height: 80px;
    clear: both;
    color: #333;
    /*border-bottom: 1px solid #333;*/
    background-color: #eff1f7d1;
}

div#post_detail {
    font-size: 16px;
}

p {
    font-size: 16px;
}

#topics .postDesc {
    font-size: 10px;
}

#sideBar {
    background: #fffdfaed;
    border-radius: 6px;
}

.postBody {
    padding: 15px 10px 10px 15px;
    background: #fffdfa;
    border-radius: 6px;
}

/* new post,Admin color*/
#navList a:link {
    color: #a9b5b7;
}

#navList li {
    margin-right: 4px;
    color: #a9b5b7;
}


/*博客列表页面--------------*/
/*博客列表的部分效果*/
#mainContent .forFlow {
    border-radius: 6px;
    padding: 10px 15px 10px 15px;
}

/* 去掉博客列表的底部图片*/
#footer {
    background: unset;
}

/*使博客园文章列表分块*/
.day {
    background: #fffdfa;
    padding: 0px 10px 0px 10px;
    border-radius: 6px;
    border-bottom: unset;
}
/* end block ------------*/

/* 让日历居中*/
#sideBar {
    text-align: center;
}

/*调整日历排版*/
#sideBarMain ul {
    line-height: 1.75;
    padding-top: 10px;
}

/*隐藏“发表评论”这段字*/
#commentform_title {
    display: none;
}

/* 隐藏评论编辑框的功能条*/
.commentbox_title_right {
    display: none;
}

/* 隐藏“评论内容” 这段字*/
.commentbox_title_left {
    visibility: hidden;
}

/* 调整评论编辑框大小*/
.textarea#tbCommentBody {
    width: 55%;
    height: 40%;
}

/* 隐藏编辑框的退出按钮(我觉得他没什么用,简单的挺好*/
#commentbox_opt a {
    display: none;
}

/*隐藏文章底部新闻部分*/
div#under_post_news {
    display: none;
}

/*隐藏底部文本*/
div#under_post_kb {
    display: none;
}

/* 将文章底部的文本域调整为条状*/
div.commentform textarea {
    width: 55%;
    height: 45%;
}

/*可能的话,用 js 每次评论随机生成颜色(待实现)*/
/*评论的头部的颜色*/
.feedback_area_title {
    background: #83a;
    border-radius: 3px; 
}

/*评论块的颜色*/
.feedbackCon {
    background: #83a;
    border-radius: 6px;
}

/* 因为对比度的问题,需要根据动态生成
的 块 的颜色更改合适的评论颜色 (待实现)*/
/*暂时将评论文本设置为白色*/
.blog_comment_body {
    color: white;
}

/*从日期档案入口进入的页面----------*/
.entrylistItem {
    background:  #fffdfa;
    border-radius: 6px;
    padding: 15px 10px 15px 10px;
}
/*end block -------------------*/

/* 刚递交的评论的样式 */
.bq_post_comment {
    background: #83a;
    color: white;
    border-radius: 4px;
}

/*下一页背景色*/
.topicListFooter {
    background-color: #2e6ab1;
    border-radius: 3px;
}

/*下一页颜色*/
#nav_next_page a {
        color: white;
}

/将上一页,下一页颜色改为白色*/
#homepage1_HomePageDays_homepage_bottom_pager .pager a:visited {
        color: white;
}

/*去掉 下一页,上一页的边框*/
#homepage1_HomePageDays_homepage_bottom_pager .pager a {
    border:unset;
        color: white;
}

/*隐藏顶部的 上一页 一栏*/
#homepage_top_pager {
display: none;
}
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_33692284/article/details/89611580

智能推荐

解决django makemigrations和migrate数据库无变化的问题_django无法makemigrations,migrate-程序员宅基地

文章浏览阅读5.7k次,点赞3次,收藏3次。1.首先,检查app下有无migrations文件夹,如果没有则创建2.检查文件夹下有无__init__.py 文件,如果没有则创建,如果有该文件,删除该文件夹下除该文件以外所有其他文件,并删除数据库所有表。3.执行makemigrations命令4.执行migrate命令..._django无法makemigrations,migrate

Eclipse配置Maven_<version>8.0.8-dmr</version>-程序员宅基地

文章浏览阅读210次。一 配置MAVEN 环境: 1.新建MAVEN_HOME:D:\JavaTool\apache-maven-3.2.1-bin\apache-maven-3.2.1 2.配置Path:%MAVEN_HOME%\bin; PS:完成之后,检测一下(必须先配好JAVA的环境变量), 进入cmd命令台 echo %MAVEN_HOME% mvn_8.0.8-dmr

光标变成下横线,变回竖线方法_光标怎么变成竖线-程序员宅基地

文章浏览阅读1.1w次,点赞16次,收藏8次。#光标变成下横线,变回竖线方法_光标怎么变成竖线

hadoop2.6.0本地编译,仅作学习记录-程序员宅基地

文章浏览阅读61次。  官网下载hadoop二进制文件,安装部署,可以成功,但是每次运行命令之前均会报错Unable to load native-hadooplibrary for your platformhadoop,经查明为官网提供的是32位,但实际生产环境中一般均需要64位,下面就结合网上资料,整理编译64位hadoop2.6.0 的步骤。  编辑环境为:redhat6.6 +jdk1.7+had..._hadoop2.6.0编译

运行deeplabv3plus-程序员宅基地

文章浏览阅读3k次。1、 参考博客网址:利用deeplab v3+开源代码训练PASCAL VOC 2012数据集https://blog.csdn.net/lfs666666/article/details/83042119论文笔记: DeepLab v3+https://delnasay.github.io/2018/10/14/%E8%AE%BA%E6%96%87%E7%AC%94%E8%AE..._deeplabv3plus

java基础知识-程序员宅基地

文章浏览阅读160次。文章目录基础知识泛型可变参基础知识泛型常用的通配符有T,E,K,V分别表示类型、元素、键、值E 未知的数据类型,在集合中使用T - Type(Java 类) 方法前等等使用可变参* 前提:方法的参数数据类型确定,参数的个数任意* 可变参的语法个数:数据类型…变量名* 可变参数本质上就是一个数组...

随便推点

讲明白了-Python的多线程和多处理_python多线程资源管理-程序员宅基地

文章浏览阅读1.8k次,点赞5次,收藏16次。什么是MultiProcessing?MultiProcessing允许在程序中生成多个进程。它允许在计算机上利用多个 CPU内核程序中的多个进程不共享内存全局解释器锁定限制:只允许一个线程控制 Python 解释器用于计算或 CPU 密集型程序那么什么是多线程, 什么时候使用它?线程在程序中执行的最小独立命令集应用程序中的多个线程可以在称为多线程的 CPU上同时执行始终在程序内运行,不能自己运行当程序受网络绑定或存在繁重的 I/O 操作时使用内存在进程中的多个线程之间共享,因_python多线程资源管理

曲线积分与曲面积分总结_geogebra进阶21:妙用曲面指令进行涂色-程序员宅基地

文章浏览阅读1.3k次。geogegebra进阶20:非常实用的ggb课件中文本放大的方法涂色在笔者文章中写了2篇:如下geogebra进阶13:(多边形、积分)涂色和计算面积geogebra基础入门27:简单的涂色方法和涂色旋转在geoegebra多种涂色方案中,曲面指令是一个作用神奇的方法。要了解曲面指令,首先看看曲线指令。一、相关指令学习先参考唐家军老师的指令汇编:Curve(CurveCartesian..._封闭曲面ggb

python PIL.Image使用-程序员宅基地

文章浏览阅读617次。一、 基本概念通道每张图片由一个或多个通道构成RGB图像为例,每张图片由3个通道构成,即R通道,G通道,B通道。对于灰度图像,则只有一个通道。获取图像的通道数量和名称,可以由方法PIL.Image.getbands()获取,此方法返回一个字符串元组,包含每一个通道的名称模式图像的模式定义了图像的类型和像素的位宽。当前支持如下模式:1:1位像素,表示黑和白,但是存储的时候每个像素存储为8..._pil.image 通道

python比较两张图片是否一样_使用PIL(Python成像库)按像素比较两个图像-程序员宅基地

文章浏览阅读293次。I need a function which compares two PIL images of the same size. Let's call them A and B. The result is supposed to be a new image of the same size. If a pixels is the same in both A and B it's suppo..._python diff.convert("rgb")

Android开发点滴 - 实现层级式导航(API 16+)_android studio层级式导航父页面自左至右出现-程序员宅基地

文章浏览阅读439次。在Jelly Bean(API 16)以前,为了实现顶部的导航菜单,程序员们不得不手工写代码,神马在OnCreate啊,神马onOptionsItemSelected啊,但是,现在一切都是浮云了。你需要做的只是在AndroidManifest中增加那么一小句话,指定父Activity就好了。我们来看下代码:...

react打包项目的时候页面空白_react打包为空白 vite.svg为空-程序员宅基地

文章浏览阅读781次。样式图并且控制台报错解决方法和问题原因路径错误,在weback.json里面添加成功图例个人github:https://github.com/webxingkong如有不正确的地方请指教联系修改,后期将不断更新,谢谢你们的支持..._react打包为空白 vite.svg为空