此博客使用的CSS样式详解!
页面使用的博客园模板为:LuxInteriorLight,可以在博客皮肤里找到。
页首屏蔽广告代码
<script>console.log("顶部标题栏屏蔽开始;");
document.all.top_nav.style.display='none';
console.log("顶部标题栏屏蔽完成;");</script>
页面定制CSS代码
这些都是可以自己使用浏览器的检查元素的模式改的,然后将改动处放入博客设置中的此处。
此为2021年2月版本。
/* 更改容器的宽度,也就是扩大主要文字页面的宽度 */
#container {
width: 69em;
}
/* 设置正文部分和侧边栏部分的相应宽度 */
#content {
width: 53em;
}
#sidebar-a {
width: 13em;
}
/* 更改body属性的字体大小 */
body {
font-size: 1em;
}
/* 增大侧边栏的标题字号,从1em改为1.25em */
#sidebar-a h3 {
font-size: 1.25em;
margin-left: 0.3em;
}
/* 改变首页、新随笔等等几个标题链接的颜色与字号,将之调为灰色,增大字号 */
#nav ul li a {
color: #666;
font-size: 1.1em;
}
/* 设置各项文字的行高与字体间距 */
p {
line-height: 160%;
}
.postbody {
line-height: 160%;
font-size: 1em;
}
.post {
margin: 0 0 1.3em;
}
/* 设置移动设备上浏览的文章宽度 */
@media only screen and (max-width:767px) {
#container {
width:100%
}
#content,
#sidebar-a {
width:auto;
float:none
}
}
/* 设置文字颜色,#000代表黑色,如果是黑色主题则需要相应的将颜色调整为黑色,也就是#fff */
a {
text-decoration:none;
color:#000;
}
/* 设置从h2标题,h3,h4,正文的相应字体大小,间距 */
#cnblogs_post_body p {
margin: 1em auto;
text-indent: 0;
}
#cnblogs_post_body h2 {
font-size: 1.63em;
font-weight: bold;
line-height: 1.5;
margin: 10px 0;
}
#cnblogs_post_body h4 {
font-size: 18px;
}
#cnblogs_post_body h3 {
font-size: 1.38em;
font-weight: bold;
line-height: 1.546;
margin: 10px 0;
}
.posthead h2 {
font-size: 1.40em;
letter-spacing: 1.2px;
text-transform: uppercase;
}
页脚生成博文目录的JS代码
<!-- 目录索引列表生成 -->
<script language="javascript" type="text/javascript">
function GenerateContentList()
{
if ($('#cnblogs_post_body').length == 0) { return; }
var jquery_h1_list = $('#cnblogs_post_body h1');
var jquery_h2_list = $('#cnblogs_post_body h2');
var jquery_h3_list = $('#cnblogs_post_body h3');
if (jquery_h1_list.length != 0)
{
var content = '<a name="_labelTop"></a>';
content += '<div id="navCategory">';
content += '<p style="font-size:18px"><b>目录</b></p>';
content += '<ul class="first_class_ul">';
for (var i = 0; i < jquery_h1_list.length; i++)
{
var go_to_top = '<div style="text-align: right"><a href="#_labelTop">返回目录</a><a name="_label' + i + '"></a></div>';
$(jquery_h1_list[i]).before(go_to_top);
var li_content = '<li><a href="#_label' + i + '">' + $(jquery_h1_list[i]).text() + '</a></li>';
var nextH1Index = i + 1;
if (nextH1Index == jquery_h1_list.length) { nextH1Index = 0; }
var jquery_h2_list = $(jquery_h1_list[i]).nextUntil(jquery_h1_list[nextH1Index], "h2");
if (jquery_h2_list.length > 0)
{
li_content += '<ul class="second_class_ul">';
}
for (var j = 0; j < jquery_h2_list.length; j++)
{
var go_to_top2 = '<div style="text-align: right"><a href="#_labelTop">返回目录</a><a name="_lab2_'+ i + '_' + j + '"></a></div>';
$(jquery_h2_list[j]).before(go_to_top2);
li_content +='<li><a href="#_lab2_'+ i +'_' + j + '">' + $(jquery_h2_list[j]).text() + '</a></li>';
var nextH2Index = j + 1;
var next;
if (nextH2Index == jquery_h2_list.length)
{
if (i + 1 == jquery_h1_list.length)
{
next = jquery_h1_list[0];
}
else
{
next = jquery_h1_list[i + 1];
}
}
else
{
next = jquery_h2_list[nextH2Index];
}
var jquery_h3_list = $(jquery_h2_list[j]).nextUntil(next, "h3");
if (jquery_h3_list.length > 0)
{
li_content += '<ul class="third_class_ul">';
}
for (var k = 0; k < jquery_h3_list.length; k++)
{
var go_to_third_Content = '<div style="text-align: right"><a href="#_labelTop"></a><a name="_label3_' + i + '_' + j + '_' + k + '"></a></div>';
$(jquery_h3_list[k]).before(go_to_third_Content);
li_content += '<li><a href="#_label3_' + i + '_' + j + '_' + k + '">' + $(jquery_h3_list[k]).text() + '</a></li>';
}
if (jquery_h3_list.length > 0)
{
li_content += '</ul>';
}
li_content += '</li>';
}
if (jquery_h2_list.length > 0)
{
li_content +='</ul>';
}
li_content +='</li>';
content += li_content;
}
content += '</ul>';
content += '</div>';
}
else if (jquery_h2_list.length != 0)
{
var content = '<a name="_labelTop"></a>';
content += '<div id="navCategory">';
content += '<p style="font-size:18px"><b>目录</b></p>';
content += '<ul class="second_class_ul">';
for(var i =0; i < jquery_h2_list.length; i++)
{
var go_to_top2 = '<div style="text-align: right"><a href="#_labelTop">返回目录</a><a name="_lab2_'+ i + '_' + j + '"></a></div>';
$(jquery_h2_list[j]).before(go_to_top2);
var li_content = '<li><a href="#_lab' + i + '">' + $(jquery_h2_list[i]).text() + '</a></li>';
var nextH1Index = i + 1;
if (nextH1Index == jquery_h2_list.length) { nextH1Index = 0; }
var jquery_h3_list = $(jquery_h2_list[i]).nextUntil(jquery_h2_list[i+1], "h3");
if(jquery_h3_list.length>0)
{
li_content +='<ul class="third_class_ul">';
}
for(var j = 0;j < jquery_h3_list.length;j++)
{
var go_to_third_Content = '<div style="text-align: right"><a href="#_labelTop"></a><a name="_label3_' + i + '_' + j + '_' + k + '"></a></div>';
$(jquery_h3_list[k]).before(go_to_third_Content);
li_content +='<li><a href="#_lab2'+ i +'_' + j + '">' + $(jquery_h3_list[j]).text() + '</a></li>';
}
if(jquery_h3_list.length>0)
{
li_content +='</ul>';
}
li_content +='</li>';
content += li_content;
}
content += '</ul>';
content += '</div>';
}
else if (jquery_h3_list.length != 0)
{
var content = '<a name="_labelTop"></a>';
content += '<div id="navCategory">';
content += '<p style="font-size:18px"><b>目录</b></p>';
content += '<ul>';
for(var i = 0; i < jquery_h3_list.length; i++)
{
var go_to_third_Content = '<div style="text-align: right"><a href="#_labelTop"></a><a name="_label3_' + i + '_' + j + '_' + k + '"></a></div>';
$(jquery_h3_list[k]).before(go_to_third_Content);
var li_content = '<li><a href="#_label' + i + '">' + $(jquery_h3_list[i]).text() + '</a></li>';
content += li_content;
}
content += '</ul>';
content += '</div>';
}
else
{
return;
}
$($('#cnblogs_post_body')[0]).prepend(content);
}
GenerateContentList();
</script>
黑色主题
如果将博客皮肤更改为LuxInteriorDark,并且将CSS里的字体颜色更改为黑色(#fff)的话(标题字体的颜色可以改为蓝色或黄色),则可以获得黑色主题,也就是夜间模式,白色文字的主体。
是另外一种风格。
存在问题
- H3标题不够突出,字体太小且没有加黑!
- 为什么Markdown随笔的页面显示就和编辑的预览不一样呢?
- 页尾生成目录代码有瑕疵,如果没有H1标题,生成的目录就无法跳转。暂未修改成功。
此博客使用的CSS样式详解!的更多相关文章
-
JSX设置CSS样式详解
JSX设置CSS样式详解 1. 使用className设置样式(CSS的其他选择器也是同理) (1)定义一个CSS文件style.css,和普通CSS一样定义class选择器 .sty1{//和普通C ...
-
把cnblogs变成简书 - cnblogs博客自定义皮肤css样式
吐槽 博客园cnblogs作为老牌的IT技术博客类网站,为广大的开发者提供了非常不错的学习交流平台. 虽然博客内容才是重点,但是如果有赏心悦目的页面不更好吗! cnblogs可以更换博客模板,并且提供 ...
-
Gridea博客无法载入CSS样式的解决办法
今日在使用Gridea客户端更新博客的过程中,推送到远端仓库后内容显示正常,但是无法载入主题样式,就是没有载入CSS样式,折腾了一下午在搞懂问题出在哪里了,下面说一下自己的解决思路. 问题描述 首先, ...
-
统一我的博客文章的CSS样式代码
一.前因后果 之前写博客的时候也有写一些CSS代码来美化,不过都是凌乱的,每次再写一篇,又得重头来过去想,或者去拷贝原来的CSS设置.由于逻辑性不强,找一个配套的格式出来要花费不少时间. 今天我把部分 ...
-
部份css样式详解(附实际应用)
本文的所有实例均基于博客园的页面定制. 所有表格内容来自W3CSchool. 页面背景(background) 博客开通之后,很多人最先做的事情一定是改页面的背景,换成一张图片或者换上一个自己喜欢的颜 ...
-
Chrome开发工具Elements面板(编辑DOM和CSS样式)详解
Element 译为“元素”,Element 面板可以让我们动态查看和编辑DOM节点和CSS样式表,并且立即生效,避免了频繁切换浏览器和编辑器的麻烦. 我们可以使用Element面板来查看源代码,它不 ...
-
sencha touch list css(样式) 详解
/* *自定义列表页面 */ Ext.define('app.view.util.MyList', { alternateClassName: 'myList', extend: 'Ext.List' ...
-
Ionic Css样式详解
Header是固定在屏幕顶部的组件.可以包含如标题和左右的功能按钮.Sub Header同样是固定在顶部,只是是在Header的下面,就算没有写Header这个,Sub Header这个样式也会距离顶 ...
-
css控制UL LI 的样式详解
用<ul>设置导航 <style> #menu ul {list-style:none;margin:0px;} #menu ul li {float:left;} </ ...
随机推荐
-
最新Mac OS X 10.12.1 安装cocoapods及使用详解
cocoapods官网:https://cocoapods.org 一.什么是CocoaPods 每种语言发展到一个阶段,就会出现相应的依赖管理工具,例如 Java 语言的 Maven,nodejs ...
-
python tkinter
1. 在python3中使用 import tkinter 异常:no module named _tkinter apt-get install python-tk
-
Bug库
netsh int tcp set global ecn=disable C:\Windows\Microsoft.NET\Framework\v4.0.30319\InstallUtil.exe ...
-
Android之ListView性能优化
ListView滚动速度优化主要可以应用以下几点方法来实现: 1.使用Adapter提供的convertView convertView是Adapter提供的视图缓存机制,当第一次显示数据的时候,ad ...
-
Log4Net .NET log处理
1.NuGet 安装Log4Net. 2.新建一个Common的project,并且添加一个LogWriter的类: public class LogWriter { //Error log publ ...
-
rebar3自动编译
功能:修改完代码可以自动编译加载到VM中 必须安装的软件: Linux: inotify 链接https://github.com/rvoicilas/inotify-tools/wiki 配置: ...
-
day 76 滑动窗口 ,头像上传
一.上传文件 前端html <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
-
Python numpy有什么用?
NumPy is the fundamental package for scientific computing with Python.就是科学计算包. a powerful N-dimensio ...
-
[LeetCode] Remove Element题解
Remove Element: Given an array and a value, remove all instances of that value in place and return t ...
-
SHOPEX快递物流单号查询插件
本SHOPEX快递物流单号跟踪插件提供国内外近2000家快递物流订单单号查询服务例如申通快递.顺丰快递.圆通快递.EMS快递.汇通快递.宅急送快递.德邦物流.百世快递.汇通快递.中通快递.天天快递等知 ...