标签：color 主题 li -- var font size

页面定制css代码

html {
	--font-color: #454d64;
	--border-color: #eaecef;
	--bg-body: #f2f4f5;
	--bg-section: #fff;
	--h-color: rgba(0, 0, 0, .85);
	--a-color: #4569d4;
	--bg-theme: #1890ff;
	--bg-theme-hover: #40a9ff;
	font-size: 14px;

}

.html-night {
	--bg-section: rgb(36, 37, 37);
	--bg-body: rgb(40, 44, 45);
	--border-color: rgb(63, 65, 65);
	--font-color: #b3ab9e;
	--h-color: rgba(229, 224, 216, 0.85);
	--a-color: rgb(97, 144, 198);
	--bg-theme: rgb(23, 101, 174);
	--bg-theme-hover: rgb(22, 95, 153);
}

body {
	/* background-color: #f2f3f5; */
	/* color: #555; */
	background-color: var(--bg-body);
	color: var(--font-color);
	margin: 0;
	padding: 0;
	line-height: 1.6;
	font-size: 1rem;
	font-family: -apple-system, system-ui, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--h-color);
}

ul {
	margin: 0;
	padding: 0;

}

li {
	list-style: none;
}

a {
	text-decoration: none;
	color: inherit
}

.hide {
	display: none;
}

.affix {
	position: fixed;
}



#top_nav,
#blogTitle,
.blogStats,
#header {
	display: none
}

#main {
	margin: 0 auto;
	max-width: 1880px;
	padding: 0 20px;
	display: flex;
	align-items: flex-start;
}










#mainContent {
	order: 2;
	flex: 1;
	display: flex;
	background-color: var(--bg-section);
	box-shadow: 0 2px 2px 0 rgb(0 0 0 / 12%), 0 3px 1px -2px rgb(0 0 0 / 6%), 0 1px 5px 0 rgb(0 0 0 / 12%);
	padding: 20px 30px 20px;
}

/* ---------------------博文列表 ---------------------*/
#mainContent>.forFlow {
	flex: 1;
	font-size: 16px;
}

.dayTitle a {
	display: none
}



.postTitl2 a,
.postTitle2,
.entrylistPosttitle {
	display: block;
	padding-bottom: 16px;
	font-size: 18px;
	font-weight: 600;
	color: var(--h-color);
}

.c_b_p_desc {
	color: #666;
}

.postDesc,
#myposts .postDesc2,
.entrylistItemPostDesc {
	font-size: 14px;
	color: #999;
	margin: 0 0 24px 0;
	padding: 20px 0 14px 0;
	border-bottom: 1px solid var(--border-color);
}

.forFlow>.PostListTitle {
	margin: 0;
	font-size: 20px;
	font-style: italic;
	text-align: right;
	display: block;
	height: 0;
}

.entrylistTitle {
	font-size: 20px;
	margin: 0;
	text-align: right;
	font-style: italic;
	height: 1px;
}

.pager {
	display: none
}

#myposts {
	margin: 0
}

#myposts .postDesc2 {
	text-align: left
}



/* ---------------------博文内容 ---------------------*/

#topics>.post>.postTitle {
	margin: 0;
	padding: 0;

}





#post-info div {
	text-align: left;
	padding-bottom: 10px;
}



#cb_post_title_url {
	font-size: 24px;
	line-height: 1.5;
	padding: 0 !important;
}



#cnblogs_post_body hr {
	border: none;
	height: 2px;
	background-color: var(--border-color);
}

#cnblogs_post_body h1 {
	font-weight: 500;
	font-size: 36px
}



.cnblogs-markdown {
	line-height: 2;
	letter-spacing: 1px;
}

.cnblogs-markdown .hs-item a {
	display: none
}

.cnblogs-markdown .hs-item:hover a {
	display: initial;
	color: var(--a-color);
	text-decoration: none
}

#cnblogs_post_body a {
	color: var(--a-color)
}

#cnblogs_post_body a:hover {
	text-decoration: underline
}

#cnblogs_post_body h2 {
	font-weight: 500;
	font-size: 34px;
}

#cnblogs_post_body h3 {
	font-weight: 500;
	font-size: 30px
}

#cnblogs_post_body h4 {
	font-weight: 500;
	font-size: 28px
}

#cnblogs_post_body h5 {
	font-weight: 500;
	font-size: 26px
}

#cnblogs_post_body h6 {
	font-weight: 500;
	font-size: 24px
}



.pre-btn {
	position: absolute;
	top: 1px;
	font-size: 20px;
	background: #fff;
	color: #555;
	line-height: 1;
	padding: 4px;
	border-radius: 2px;
}

.btn-copy {
	right: 1px;
	opacity: 0;
}

.btn-fold {
	left: 1px
}

pre:hover .btn-copy {
	opacity: 1
}

.cnblogs-markdown pre {
	border-radius: 4px;
}

.cnblogs-markdown code {
	font: 14px/1.8 source-code-pro, Menlo, Monaco, Consolas, Courier New, monospace !important;
}

#cnblogs_post_body blockquote {
	background-color: var(--bg-bpdy);
	border-width: 8px;
}

#cnblogs_post_body p {
	margin: 18px 0
}

/* ---------------------评论 ---------------------*/
#blog-comments-placeholder .feedbackItem {
	border-bottom: 1px solid var(--border-color);
	margin-bottom: 24px;
}

.feedbackListSubtitle {
	color: var(--bg-section);
}

.feedbackListSubtitle :not(p) {
	line-height: 2;
	/* 	color: #333; */
	color: var(--font-color);
	font-size: 14px
}

#blog-comments-placeholder .feedbackItem .louzhu {
	background-color: var(--bg-theme);
	color: #fff;
	padding: 2px 6px;

}

.comment_vote {
	padding: 20px 0 16px;
}

#div_digg {
	/* position:fixed; */
	background-color: #fff;
	bottom: 160px;
	right: 50px;
	padding: 16px 16px 8px;
	border-radius: 4px;
	box-shadow: 0 0px 2px 2px rgb(0 0 0 / 5%);
}

/* ---------------------博文目录 ---------------------*/

#toc-container {
	width: 322px;
	margin-left: 30px;
	line-height: 1.5;
}

#toc {
	position: fixed;
	top: 0;

	border-left: 2px solid var(--border-color);
	padding: 20px 30px 20px;
	width: 260px;
}




#toc ul {
	padding-left: 20px;
	line-height: 1.8;
	display: none;
}

#toc a {
	display: inline-block;
	margin: 2px 0;
	cursor: pointer;
}


#toc .active>ul {
	display: block;
}

#toc a:hover {
	color: var(--a-color)
}

#toc .active.active-last>a {
	color: var(--a-color);
}



#toc div>span.li-level {
	color: #999;
	margin-right: 4px;
	font-size: 14px
}

/* ---------------------侧边栏 ---------------------*/
#sideBar {
	width: 310px;
	margin-right: 20px;

}

#sideBarMain {

	background-color: var(--bg-section);

	box-shadow: 0 2px 2px 0 rgb(0 0 0 / 12%), 0 3px 1px -2px rgb(0 0 0 / 6%), 0 1px 5px 0 rgb(0 0 0 / 12%);

	width: 310px;
}

#sideBarMain>div {
	padding-left: 30px;
	padding-right: 30px;
}

#sidebar_news {
	background-color: #000;
	padding: 20px;
	color: #9d9d9d;
	line-height: 1.8
}

#sidebar_news h3 {
	display: none
}

#notice-links {
	display: flex;
	justify-content: space-between;
	margin-bottom: 5px
}

#notice-links a:hover {
	color: #fff
}

#profile_block {
	line-height: inherit !important
}

#sideBar a {
	color: inherit
}

#leftcontentcontainer a:hover {
	color: var(--a-color)
}


#sideBarMain.affix {
	top: 70px;
}

#profile_block {
	margin: 0;
}

#sideBarMain h3 {
	font-size: 16px;
	margin: 0 0 10px 0;
}

#sideBarMain .input_my_zzk {
	width: 176px;
	border: 1px solid #999;
}

.sidebar-block {
	padding: 16px 0 0 0;
}

.sidebar-block ul {
	margin: 4px 0 4px 0
}

.sidebar-block ul li {
	line-height: 1.5;
	margin-bottom: 5px;
}

#sidebar_toptags ul {
	display: flex;
	flex-wrap: wrap;
}

#sidebar_toptags li {
	margin: 0 12px 12px 0
}

#sidebar_toptags li a {


	white-space: nowrap;
	display: block;
	font-size: 14px;
	background-color: #f2f5f8;
	padding: 2px 8px;
	color: #666;
	border-radius: 4px;
}

#sidebar_toptags li a:hover {

	font-weight: 500;
	color: #fff;
	background-color: var(--bg-theme);

}

#footer {
	text-align: center;
	padding: 24px
}

/* ---------------------页脚 ---------------------*/
#page_end_html {
	max-width: 1600px;
	margin: 0 auto;
}

#blog-btns {
	margin-right: -100px;
	float: right;
	line-height: 1;
}

#blog-btns .blog-btn {
	font-size: 32px;
	background-color: var(--bg-section);
	cursor: pointer;
	box-shadow: 0 0 2px 2px #ccc;
	width: 48px;
	height: 48px;
	text-align: center;
	line-height: 48px;

}

#blog-btns .blog-btn:hover {
	font-weight: 600;
	font-size: 42px
}

#btn-theme {
	position: fixed;
	bottom: 180px;

	font-size: 32px;

}

#gotop {

	bottom: 112px;
	visibility: hidden;
	font-size: 24px;

}

#gotop.affix {
	visibility: initial;
}

侧边栏公告

<ul id='notice-links'>
	<li>
		<a href="https://www.cnblogs.com/" target='_blank'>博客园</a>
	</li>
	<li>
		<a href="https://www.cnblogs.com/ctudou/">首页</a>
	</li>
	<li>
		<a id="blog_nav_rss" class="menu" href="javascript:void(0)" data-rss="https://www.cnblogs.com/ctudou/rss/">订阅</a>
	</li>
	<li>
		<a href="https://msg.cnblogs.com/send/user_2008" target='_blank'>联系</a>
	</li>
	<li>
		<a href="https://i.cnblogs.com/EditPosts.aspx?opt=1" target='_blank'>新随笔</a>
	</li>
</ul>

页首html

<link rel="stylesheet" href="https://at.alicdn.com/t/font_2872767_2nwgey8gb8m.css">

页脚html

<div id='blog-btns'>


	<div id="btn-theme" class="iconfont icon-day blog-btn"></div>
	<div id="gotop" class='icon-arrow-up  iconfont blog-btn' data-spy='affix' data-offset-top="200"></div>

</div>


<script src="https://cdn.bootcdn.net/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>
<script src="https://blog-static.cnblogs.com/files/blogs/712181/scrollspy.js"></script>

<script src="https://blog-static.cnblogs.com/files/blogs/712181/affix.js"></script>



<script>
	$(function() {
		var theme = window.localStorage.getItem('theme') || 'day';
		if (theme == 'night') {
			if ($('html').hasClass('html-night')) {
				return
			}
			$('html').addClass('html-night');
			$('#btn-theme').addClass('icon-night').removeClass('icon-day');
		}
		$('#btn-theme').on('click', function() {
			if ($(this).hasClass('icon-day')) {
				$(this).addClass('icon-night').removeClass('icon-day')
				theme = 'night'
			} else {
				$(this).addClass('icon-day').removeClass('icon-night')
				theme = 'day'
			}
			if (theme == 'day') {
				$('html').removeClass('html-night')
			} else {
				$('html').addClass('html-night')
			}
			window.localStorage.setItem('theme', theme)
		})
		var isArticle = $("#post-date").length == 1;

		if (isArticle) {

			addPostInfo();

			addPreBtn();
			var toc = createToc(
				"#cnblogs_post_body h2,#cnblogs_post_body h3,#cnblogs_post_body h4,#cnblogs_post_body h5,#cnblogs_post_body h6"
			);
			if (toc !== false) {
				$('#mainContent').append($('<div id="toc-container"></div>').append(toc.addClass('nav')))
				$('body').scrollspy({
					target: '#toc-container'
				})
				var activeLast = $('<div></div>')
				$('#toc-container').on('activate.bs.scrollspy', function() {
					activeLast.removeClass('active-last');
					activeLast = $('#toc .active').slice(-1).addClass('active-last')
				})
			}

		}

		$('#gotop').on('click', function() {
			$("body,html").animate({
				scrollTop: 0
			}, 300);
		})

		function setComments() {
			var comments = $('#blog-comments-placeholder .feedbackItem');
			if (comments.length == 0) {
				return
			}

		}

		function addPreBtn() {
			var pres = $(".cnblogs-markdown pre");
			if (pres.length == 0) {
				return;
			}
			pres.each(function() {
				var t = $(this).children("code").text();
				var copyBtn = $('<div class="iconfont icon-copy pre-btn btn-copy"></div>').attr(
					"data-clipboard-text",
					t
				);
				var foldBtn = $('<div class="iconfont icon-arrow-down pre-btn btn-fold"></div>')
				$(this).prepend(copyBtn).prepend(foldBtn);
				var c = new ClipboardJS(copyBtn[0]);
				c.on("success", function() {
					copyBtn.removeClass('icon-copy').addClass('icon-check')
				});
				c.on("error", function() {
					copyBtn.text("复制失败");
				});
				copyBtn.mouseleave(function() {
					copyBtn.text("").removeClass("icon-check").addClass('icon-copy');
				});
				foldBtn.on('click', function() {
					if ($(this).hasClass('icon-arrow-right')) {
						$(this).addClass('icon-arrow-down').removeClass('icon-arrow-right')
					} else {
						$(this).addClass('icon-arrow-right').removeClass('icon-arrow-down')
					}
					$(this).siblings('code').toggle('fast')
				})
			});
		}

		function addPostInfo() {
			if ($('#post_detail').length == 0) {
				return
			}
			var postInfo = $('<div id="post-info"></div>')
				.append($(".post>.postDesc"))
				.append($("#BlogPostCategory"));
			$(".post>.postTitle").after(postInfo);
		}

		function createLi(el, index) {
			return $("<li></li>").html(
				$("<a></a>").attr("href", "#" + el.textContent).text(el.textContent)
			)
		}

		function createToc(selector) {
			var hs = $(selector);
			if (hs.length === 0) {
				return false;
			}
			var min = {
				value: hs[0].tagName[1],
				index: 0
			};


			hs.each(function(index, el) {


				if (el.tagName[1] - min.value < 0) {
					min = {
						index: index,
						value: el.tagName[1]
					};
				}
			});
			var arr = [];
			var toc = $("<ul   id='toc' class='nav'></ul>");

			var preLevel = ""; //父级序号
			var parentLi = ""; //父级li
			hs.each(function(index, el) {

				var li = createLi(el);

				var t = el.tagName[1];
				$(el).addClass('hs-item')
				if (
					t === min.value ||
					index === 0 ||
					(index < min.index && t === hs[0].tagName[1])
				) {
					toc.append(li);
					arr = [];
					preLevel = "";
					parentLi = li;
				} else {
					var r = t - hs[index - 1].tagName[1];
					preLevel = arr[0].li.data("level");
					if (r === 0) {
						arr[0].li.after(li);
						preLevel = preLevel.slice(0, preLevel.lastIndexOf("."));
					} else if (r > 0) {
						arr[0].li.append($("<ul></ul>").append(li));
						parentLi = arr[0].li;
					} else {
						var item = arr.find(function(value) {
							return t > value.el.tagName[1];
						});
						item.li.children("ul").append(li);
						preLevel = item.li.data("level");
						parentLi = item.li;
					}
					preLevel += ".";
				}
				var span = $('<span class="li-level"></span>');
				$(el)
					.attr("id", el.textContent)
					.append($("<a>#</a>").attr({
						href: "#" + el.textContent
					}));
				li.data({
						level: preLevel + "" + (li.index() + 1)
					})
					.children("a")
					.prepend(span.text(li.data("level") + ". "));

				arr.unshift({
					el: el,
					li: li,
				});
			});
			return toc;
		}
	});
</script>

标签：color,主题,li,--,var,font,size
来源： https://www.cnblogs.com/ctudou/p/15505682.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。