Cnblogs自定义皮肤css样式-星空观测者

不知不觉来Cnblogs也这么久了,然而Blogs提供的主题还是依旧那么复古,总觉得阅读起来难免枯燥,虽然我认为做技术不可以太过浮躁,但是一个美观的主题终究是吸引人眼的第一要素。

毕竟这么久了,在博客园还没有发现一个比较漂亮的主题,也包括别的博主的自定义主题,要么是浮躁的大红大紫,要么是浮夸的界面系统,真正好的UI应该一眼就能让人回归阅读本质,不需要太多嘈杂的讯息。

 

4年前在Cnblog和Csdn中我选择了前者,现在看来是正确的,因为博客园提供了程序员喜欢的自定义Html和Css,这样我们就可以根据自己的审美不受限制的改造自己的网上家园了。

那么说好了就开始改造吧,基础的模板我选择了 简单的ThinkInside 作为基础模板

是个非常朴素的样式,长这样:

 

选这个主题是因为我觉得头部尚可,其他的部分改造简单,总结了下心目中喜欢的样式,我去除了所有多余的内容,比如侧边栏、年月日

回归精简

#sideBar,#blog_post_info_block{display: none;
}

再将阅读文本内容对齐,将主体内容呈现在用户第一眼中。

#under_post_news{display: none;
}/*评论框大小*/#tbCommentBody.comment_textarea{width:890px;
}/*尾部间距*/#footer{text-align:center;border-top:2px solid green;margin-left:25px;margin-right:25px;padding-top:10px;padding-bottom:10px;
}/*居中间距*/#mainContent .forFlow {margin-left:20px;margin-right:20px;margin-top:10px;float: none;width: auto;}

调整文字大小和间距

/*评论框边框*/#comment_form_container,#blog-comments-placeholder
{
background-color:#f5f5f5;
border-radius:6px 6px 6px 6px;
padding:20px;
}#comment_nav,#homepage1_HomePageDays_DaysList_ctl05_ImageLink
{display: none;
}.postBody {border-bottom: 2px solid green;
}.day {padding-bottom: 5px;padding-left: 20px;padding-right: 20px;padding-top: 10px;margin-bottom:5px;
}.postSeparator {
display: none;
}.postTitle {border-left: 3px solid #21759b;font-size: 110%px;
}.postTitle a:link, .postTitle a:visited, .postTitle a:active {padding-left: 10px;
}#cb_post_title_url.postTitle2
{font-size: 120%;
}.dayTitle a:link
{display:none;
}

关于背景图是否使用Fixed固定的问题我考虑了很久,因为目前Chrome的Webkit内核有诸多问题,内存电源占用姑且不说,当使用Fixed的时候页面渲染性能会急剧下降到30pfs以下,

给阅读造成很大的阻塞感,所以只能牺牲美观程度换取流畅度了。关于这个问题大家可以访问 这里 来尝试减缓这个问题,不过实际上效果并不明显。

这个时候我想提下windows10的edge浏览器,关于这个新内核,微软做的还是非常好的,完全没有这方面的问题,依旧如丝如滑。

 

更换背景我用了微博图床。。坚持了好多年 看来很稳


body { background
-image: url("http://ww4.sinaimg.cn/large/637d0877gw1exlma5gj0wj21hc0u04p6.jpg"); }

 

关于在文字阅读方面的细化我考虑了许多,包括文字大小,虽然说文字较小会比较美观,如下:

但是我一向是实用为主,美观为辅的性格,虽然用小号宋体字体很锐利,显示效果也不错,但是长久看起来容易导致视觉疲劳,因此改成现在用的微软大字号了

#main {
font-size:15px;
font-family:微软雅黑;padding-left: 0px;padding-right: 0px;
}

在关于边框是否加上Box描边阴影的问题上我也考虑了很久

我一开始是觉得加阴影可能会有压迫感,不加比较扁平化舒服,但是怎么说呢,WIN10和OSX都有加,那我大概降低下阴影效果也加上算了。。

背景色的话,纯白固然是最好看的,当然也是最伤眼的,眼睛这么重要的东西肯定要好好对待,因此我选择了透明土灰= =、

#home {
opacity: 0.95;
width:970px;
background-color:#f5f5f5;
border-radius:6px 6px 6px 6px;
box-shadow:0 0 20px black;
}

最后把背景色不同的引号干掉

 

重新PS几个图标,大家喜欢哪个就用哪个吧,以前用的是都是微博图床,但是不支持透明png,所以现在传到这里直接用博客园的。

.feedbackCon {
background
: url('http://images2015.cnblogs.com/blog/370709/201612/370709-20161230031921867-127780074.png') no-repeat 5px 0px;
}

 

改造完后,再加上一些标题的效果突出主次就差不多了,然后就是现在大家看到的这个样子了,其实还有很多想改的细节,但是实在没时间了。

我认为作为一名想要征战全领域的技术员,首先要锻炼的是自己的审美能力,其次是技术能力和自主改造力,因为审美能力是最容易在平时的生活中慢慢锻炼出来的,只有心中想的效果是美好的,

再经由自己改造才会漂亮,只有自己的体验力(UE/UX)提高了,才能设计出好的产品。

 

同时也要说一句理解万岁,要达成什么效果,就必须牺牲掉什么,一个技术博客,我不需要侧边的阅读点击排行,我也不想要技术归档,我只想一个安静的阅读环境,能够在最后有一个评论框和你的评论就足够了。

转载于:https://www.cnblogs.com/maybreath/p/5253824.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/288815.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

我的世界java版forge怎么用_我的世界电脑版MOD怎么用 我的世界pc版forge怎么安装...

我的世界由游戏本体以及启动器两部分组成,要玩游戏就要下载好本体再用启动器启动,单有游戏或者单有启动器都是玩不成的,想知道我的世界电脑版怎么开始,我的世界pc版启动器怎么用就来看看吧!▍MOD怎么用1.安装MOD前要先…

C#趣味程序---百鸡百钱

问题&#xff1a;公鸡一只5元&#xff0c;母鸡一只3元&#xff0c;小鸡三只1元&#xff0c;问100元可以买多少只鸡&#xff1f; using System;namespace ConsoleApplication1 {class Program{static void Main(string[] args){int z, i0;for (int x 0; x < 20; x)for (int …

python面向对象设计管理系统_python面向对象之单例设计模型

单例目标单例设计模式__new__ 方法Python 中的单例01. 单例设计模式设计模式设计模式 是 前人工作的总结和提炼&#xff0c;通常&#xff0c;被人们广泛流传的设计模式都是针对 某一特定问题 的成熟的解决方案使用 设计模式 是为了可重用代码、让代码更容易被他人理解、保证代码…

【C语言简单说】十八:二维数组

这里可能会让大家脑袋迷糊&#xff0c;不过没事&#xff0c;多动动脑。 这一节我们来说二维数组&#xff0c;啥叫二维数组&#xff1f;之前我们那个是一维数组&#xff0c;好了&#xff0c;我们接下来大家就会慢慢的搞懂的。 我们的一维数组就像 一列排得整整齐齐的队伍&…

移动web开发(一)——移动web开发必备知识

参考: 移动终端开发必备知识.http://isux.tencent.com/mobile-development-essential-knowledge.html

剑指offer之求两个链表的第一个公共节点

1 问题 输入两个链表&#xff0c;找出它们的第一个公共结点。 含有公共节点的两个链表的结构类似于下图中的链表&#xff1a; 1 -> 2 -> 3 -> 4 ->5 2 -> 4 ->5 可以看到两个链表中有一个公共节点&#xff0c;其中4节点就是这两个链表的公共节点 2 分析…

.Net Core 限流控制-AspNetCoreRateLimit

简介AspNetCoreRateLimit是ASP.NET核心速率限制框架&#xff0c;能够对WebApi&#xff0c;Mvc中控制限流&#xff0c;AspNetCoreRateLimit包包含IpRateLimit中间件和ClientRateLimit中间件&#xff0c;每个中间件都可以为不同的场景设置多个限&#xff0c;该框架的作者是stefan…

应用系统日志采集解决方案

概述 基于Flume MongoDB&#xff0c;对现有的多个应用系统进行日志采集。特点 采集范围每一次用户请求的请求信息。数据量大尽量减少现有系统的改动数据流图 说明&#xff1a;首先考虑的结构体系&#xff0c;是直接在应用系统中&#xff0c;将日志数据写到Flume&#xff1b;但…

0x00000001java_「十六进制表示」0x00000001是个啥?32位表示、十六进制表示 - seo实验室...

十六进制表示0x0000 0001首先他是个16进制的数字、8进制的是0开头的、比如 077 他是八进制的、十进制的话就是63、7*87630x0000 0001他表示一个32位的、因为十六进制的一位有16种变化、四位的变化也是16种。那么、想表示32位的数据、需要16进制的bit 0000 0000 0000 0000 0000 …

每个程序员都可能犯过的10个错误

1. 面向编译器写代码&#xff0c;而不是面向用户 当人们使用编译器创建自己的 app 时&#xff0c;在把自己的想法诉诸于机器代码的过程中&#xff0c;常常会将那些可以使得编程更为简单却又冗长的语法遗忘于脑后。 无论你使用的是单字母的标识符还是更易于人脑理解的标识符&…

C#趣味程序---爱因斯坦的台阶问题

问题&#xff1a;设有一阶梯&#xff0c;每步跨2阶&#xff0c;最后余1阶&#xff1b;每步跨3阶&#xff0c;最后余2阶&#xff1b;每步跨5阶&#xff0c;最后余4阶&#xff1b;每步跨6阶&#xff0c;最后余5阶&#xff1b;每步跨7阶&#xff0c;刚好到阶顶&#xff0c;问共有多…

【C语言简单说】十九:二维数组循环嵌套(1)

(▼ _ ▼) 又到了这一节 了&#xff0c;这是痛苦的一节&#xff0c;因为我完全不懂如何像新手说明循环嵌套。。。 因为很多新手理解不了。&#xff0c;我就直接拿我以前的教程复制上来了。 首先先说循环嵌套&#xff1a; 循环嵌套的意思就是循环里面有一个循环&#xff0c;例…

剑指offer之C语言实现链表(两种方式)

1 问题 用C语言实现链表 2 代码实现 #include <stdio.h> #include <stdlib.h>#define true 0 #define false -1typedef struct Node {int value;struct Node *next; } List;/***初始化链表*/ struct Node* init_list() {struct Node *head (struct Node*)malloc…

python数据类型描述_【文山玩Python】用python的数据类型,来简单的描述世界

前文讲过&#xff0c;编程语言是对现实世界的抽象与模拟&#xff0c;那么数据类型就是用来构造模拟现实世界的工具。那么python中的数据类型&#xff0c;在现实生活中可以找到那些原型呢&#xff1f;我们先回顾一个幼儿教育的过程&#xff1a;出生后&#xff0c;我们先教的是什…

Xamarin效果第二十二篇之录音效果

在前面文章中简单玩了玩GIS的基本操作、Mark相关、AR、测距、加载三维白模和可扩展浮动操作;今天抽空再来分享一下录音效果;啥也不说了都在效果里:1、首次尝试了开源的Plugin.AudioRecorder结果发现没效果,也可能是我的姿势不对:https://github.com/NateRickard/Plugin.AudioRe…

@action 注解

下载 注解配置 private String fileName; private String contentType "application/octet-stream"; Action(value "/download", results { Result(name "download", type"stream", params{ "contentType"…

从零开始来看一下Java泛型的设计

引言 泛型是Java中一个非常重要的知识点&#xff0c;在Java集合类框架中泛型被广泛应用。本文我们将从零开始来看一下Java泛型的设计&#xff0c;将会涉及到通配符处理&#xff0c;以及让人苦恼的类型擦除。 泛型基础 泛型类 我们首先定义一个简单的Box类&#xff1a; public c…

6.对象和数组

对象和数组 学习要点&#xff1a;1.Object类型2.Array类型3.对象中的方法 什么是对象&#xff0c;其实就是一种类型&#xff0c;即引用类型。而对象的值就是引用类型的实例。在ECMAScript中引用类型是一种数据结构&#xff0c;用于将数据和功能组织在一起。它也常被称作为类&am…

php json error,PHP 7.3 中的 JSON 错误处理

PHP 7.3 为 json_encode() 和 json_decode() 函数增加的一个新特性使其更好的处理错误。这个特性「 RFC 」以 23 比 0 的投票结果被一致接受。让我们看一看在 PHP 7.2 及一下版本中是如何处理 JSON 错误的&#xff0c;以及 PHP 7.3 中新的改进。背景当前在 PHP7.2 版本中&#…

C#趣味程序---三色球问题

问题&#xff1a;若一个口袋中放有12个球&#xff0c;3红3白和6黑&#xff0c;问从袋中任意取8个球&#xff0c;有多少种不同的颜色搭配&#xff1f; using System;namespace ConsoleApplication1 {class Program{static void Main(string[] args){Console.WriteLine("共有…