cute-cnblogs 番外篇-自定义博客园样式美化

概述番外篇自己搭框架玩吧~这里给一些自定义代码喔~自己探索喔~（部分代码与本皮肤一致，但有的不喔~）这里将持续更新~一期博客园框架样式二期博客园框架样式模版选定博客皮肤选定建议选择博客园Custom标准模板喔~重置样式清除浏览器默认样式，并配置适合设计的基础样式（此 番外篇

自己搭框架玩吧~ 这里给一些自定义代码喔~ 自己探索喔~ （部分代码与本皮肤一致，但有的不喔~）这里将持续更新~

一期博客园框架样式

二期博客园框架样式

模版选定

博客皮肤选定 建议选择博客园 Custom 标准模板喔~

重置样式

清除浏览器默认样式，并配置适合设计的基础样式（此处使用的nec的CSS reset）

/* reset */HTML,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fIEldset,legend,input,button,textarea,menu{margin:0;padding:0;}header,footer,section,article,asIDe,nav,hgroup,address,figure,figcaption,menu,details{display:block;}table{border-collapse:collapse;border-spacing:0;}caption,th{text-align:left;Font-weight:normal;}HTML,body,fIEldset,img,iframe,abbr{border:0;}i,cite,em,var,address,dfn{Font-style:normal;}[hIDefocus],summary{outline:0;}li{List-style:none;}h1,h2,h3,h4,h5,h6,small{Font-size:100%;}sup,sub{Font-size:83%;}pre,code,kbd,samp{Font-family:inherit;}q:before,q:after{content:none;}textarea{overflow:auto;resize:none;}label,summary{cursor:default;}a,button{cursor:pointer;}h1,h2,h3,h4,h5,h6,em,strong,b{Font-weight:bold;}del,ins,u,s,a,a:hover{text-decoration:none;}body,textarea,input,button,select,keygen,legend{Font:14px/1.14 arial,b8bf53;color:#333;outline:0;}body{background:#fff;}a,a:hover{color:#333;}复制代码

增加鼠标样式

url可更换为你想更换的图标样式（ico文件可上传在 博客园文件 中，上传ok后点进文件即可获取路径）

*{cursor: url(https://files-cdn.cnblogs.com/files/miluluyo/cursora.ico),auto;}复制代码

字体颜色及样式

我比较喜欢思源字体，因此贴出思源字体吧~

/*修改字体*/*{Font-family: "Noto Sans SC";Font-weight: 100;}/*修改默认a标签颜色*/a:visited,a:link{color: #2daebf;text-decoration: none;}a:hover{color: #f60;text-transform: none}/*字体大小及颜色*/#cnblogs_post_body p{Font-size: 1rem;}body, textarea, input, button, select, keygen, legend{color:#7f8c93}复制代码

<link rel="stylesheet" href="https://blog-static.cnblogs.com/files/miluluyo/siyuan.CSS" />复制代码

浏览器图标

href 可更换为自己的图标链接   （文件可上传在 博客园相册 中，上传ok后点进图片 F12 获取路径即可）

$("head").append('<link type="image/x-icon" rel="icon"  href="https://images.cnblogs.com/cnblogs_com/elkyo/1762178/o_200511031646f12.png">')复制代码

顶部背景图

`#blogTitle 中的 background url 可更换（博主的二期框架使用了一张图片，从网上搜罗了一堆图片API，如有需要，请看文章底部，并加以替换~）
顶部背景图样式如下：

#blogTitle {    background: url(http://API.dujin.org/bing/1366.PHP) center center / cover no-repeat rgb(34, 34, 34);    overflow: hIDden;    wIDth: 100%;    height: 40vh;    max-height: 40vh;    Box-shadow: 0 1px 2px rgba(150, 150, 150, .7);    text-align: center;    display: table;}.vertical {    display: table-cell;    vertical-align: mIDdle;    wIDth: 100%;    position: relative;    z-index: 2;}#header1_headerTitle {    Font-family: 'Playball', cursive;    color: #fff;    Font-size: 3rem;    text-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);    margin: 10px 0 10px 0;    letter-spacing: -1px;    Font-weight: 700;    animation: fade-in-down 1s both;    animation-delay: .5s;}.vertical h2{    margin: 0;    Font-size: 1rem;    line-height: 1.5em;    Font-weight: 400;    letter-spacing: .01rem;    color: rgba(255, 255, 255, 0.8);    -webkit-animation: fade-in-down .9s;    animation: fade-in-down .9s both;    -webkit-animation-delay: .1s;    animation-delay: .3s;    text-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);    -webkit-Box-orIEnt: vertical;    -webkit-line-clamp: 10;    overflow: hIDden;    Font-family: 'Playball', cursive;}复制代码

此处Js将文本外部增加了div

var blogTitle = $("#blogTitle").HTML()$("#blogTitle").HTML( "<div class='vertical'>"+blogTitle+"</div>" )复制代码

自定义顶部背景图片（文件可上传在 博客园相册 中，上传ok后点进图片 F12 获取路径即可）

顶部背景点点动效随鼠标而动

直接引入即可（样式在Js里，如需更改，自己手动）

<script src="https://blog-static.cnblogs.com/files/miluluyo/three.min.Js"></script><script src='https://blog-static.cnblogs.com/files/miluluyo/star.Js'></script>复制代码

动漫人物背景图片

div#home::after 中的 background-image 可更换（这里使用了随机二次元图片API，从网上搜罗了一堆图片API，如有需要，请看文章底部，并加以替换~）

/*动漫人物背景图*/div#home::after{    content: "";    background-repeat: no-repeat;    background-position: center;    opacity: 0.06;    -webkit-filter: grayscale(100%);    -moz-filter: grayscale(100%);    -ms-filter: grayscale(100%);    -o-filter: grayscale(100%);    filter: grayscale(100%);    filter: gray;    position: fixed;    top: 0;    left: 0;    wIDth: 100%;    height: 100%;    z-index: -1;}div#home::after {    background-image: url(https://API.imacroc.cn/acg/);}复制代码

页面诗意诗句模块

此处调用了 今日诗词 的API

.poem-wrap {    position: relative;    wIDth: 1000px;    max-wIDth: 80%;    border: 2px solID #797979;    border-top: none;    text-align: center;    margin: 40px auto;}.poem-left {    left: 0;}.poem-right {    right: 0;}.poem-border {    position: absolute;    height: 2px;    wIDth: 27%;    background-color: #797979;}.poem-wrap p {    wIDth: 70%;    margin: auto;    line-height: 30px;    color: #797979;}.poem-wrap h1 {    position: relative;    margin-top: -20px;    display: inline-block;    letter-spacing: 4px;    color: #797979;    Font-size: 2em;    margin-bottom: 20px;}#poem_sentence {    Font-size: 25px;}#poem_info {    Font-size: 15px;    margin: 15px auto;}复制代码

<script>$("#navigator").after('<div ><div ></div><div ></div><h1>念两句诗</h1><div ID="poem_sentence"></div><div ID="poem_info"></div></div>')</script><!--添加古诗词--><script src="https://sdk.jinrishici.com/v2/browser/jinrishici.Js" charset="utf-8"></script><script type="text/JavaScript">  jinrishici.load(function(result) {    var sentence = document.querySelector("#poem_sentence")    var info = document.querySelector("#poem_info")    sentence.INNERHTML = result.data.content    info.INNERHTML = '【' + result.data.origin.dynasty + '】' + result.data.origin.author + '《' + result.data.origin.Title + '》'  });</script>复制代码

随机图片API

从网络搜罗来的随机图片API，欢迎补充，有的已注明出处，未标注的表示未查到来源，欢迎指出API来源与出处，如链接已失效，请广大网友告知。

/*岁月小筑的随机图片API（https://www.xjh.me/3090.HTML），API如下：*///随机图片API中的环境背景图片https（推荐）：https://img.xjh.me/random_img.PHP?type=bg&ctype=nature&return=302http（更快，快一点点，不安全，可能会被劫持）：http://img.xjh.me/random_img.PHP?type=bg&ctype=nature&return=302//随机人物背景图片https（推荐）：https://img.xjh.me/random_img.PHP?type=bg&ctype=acg&return=302http（更快，快一点点，不安全，可能会被劫持）：http://img.xjh.me/random_img.PHP?type=bg&ctype=acg&return=302/*小歪API（https://API.ixiaowai.cn/），API如下：*/https://API.ixiaowai.cn/API/API.PHP	//二次元动漫https://API.ixiaowai.cn/mcAPI/mcAPI.PHP	//menhear酱https://API.ixiaowai.cn/gqAPI/gqAPI.PHP	//风景//二次元随机图http://www.dmoe.cc/random.PHPhttp://API.mtyqx.cn/API/random.PHPhttps://API.PingPing6.com/tools/acg2/index.PHP/*东方Project随机图片API （https://img.paulzzh.tech/），API如下：*/https://img.paulzzh.tech/touhou/random		/*随机二次元图片API（https://API.julym.com/HTML/doc-ecy.HTML），API如下：*/*/https://API.imacroc.cn/acg/			/*保罗随机动漫壁纸API（https://API.paugram.com/help/wallpaper），API如下：*/https://API.paugram.com/wallpaper/		//随机人物APIhttps://API.lyiqk.cn/purelady?1559f782	//Bing的随机图片https://uploadbeta.com/API/pictures/random/?key=BingEverydayWallpaperPicture	//Bing当日壁纸http://API.dujin.org/bing/1366.PHP	//一个API的网站（自行寻找里面API）https://source.unsplash.com/复制代码

持续更新中…

最后请吃糖

如果您喜欢这里，感觉对你有帮助，并且有多余的软妹币的话，不妨投喂一颗糖喔~

<(▰˘◡˘▰)> 谢谢老板~

微信扫码

支付宝扫码

赞赏的时候，留下一句你觉得很励志与美的话给我吧~

（也可以加一个博客园给我喔，会添加在名字的旁边喔~点击可以跳转~ 例如：去瞧瞧都有谁赞赏了

为了响应大家的号召，方便大家技术交流，之前建立了一个微信群，如果大家有需要可以关注公众号，发送“加群”即可～本群是一个纯交流学习工作的群，不准发布广告、营销相关的信息！

公众号：麋鹿鲁哟

总结

以上是内存溢出为你收集整理的cute-cnblogs 番外篇-自定义博客园样式美化全部内容，希望文章能够帮你解决cute-cnblogs 番外篇-自定义博客园样式美化所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。