关键词：
我现在的博客园首页暂时应该是一个女生背景，一些星星的悬浮飘扬
那么我们怎么来设置博客园的自定义的样式，而不是不个性的默认界面呢？
第一步：进入你的首页，打开管理 => 设置
第二步：我在博客皮肤中选择了SimpleMemory，这个皮肤相对来说要轻快、干净，更方便你来修改你的样式。
第三步：事实上你可以禁用默认CSS，这也是允许的，不过就会弄成这样
学过前端的同学应该知道不掺杂任何任何的CSS就会出现这样的情况，这是浏览器默认给定的样式，而不是博客园给的CSS默认样式（所以你已经禁用了博客园的默认CSS），不过建议没有CSS基础的同学选中禁用，因为你重新构建这个界面会花费很多功夫，还可能结构搭不起来，所以这里我们用了一个基本样式。
第四步：可以按F12进入控制台或者右键点中你希望看到的结构选择查看，点击Element，右侧会出现它的CSS样式，大家可以修改这个样式
等到你认为这样还不错的时候，把这一部分复制进入管理的界面的CSS样式中
这里建议大家双开，管理和首页各开一个界面，很方便。
第五步：进入主题：设置背景的话，大家可以把中间默认的界面当成一个div然后进行制作，在页首Html代码中加入你的HTML代码，他会直接加入页面的HTML中，也可以在刚才的“页面定制CSS代码”中修改其样式。
第六步：我的背景思路是
1、将中间的部分透明度设为0.7
2、新加入几个HTML的div，全部设为fixed，这样不会到处乱跑。
3、定义你的CSS动画，能让你的背景星星动起来。
4、背景图别放在你的QQ空间中，在界面中不会显示的。你可以上传至你的服务器或者某些图片上传网站。（博主没试过上传百度，有知道的小伙伴可以留言告诉我一下哦）
5、我下面的代码改了我的首页字体大小，大家按我的示例也可以做一下美化。
第七步：以下是我的代码
页首Html代码
1 <div id="midground" class="wall"></div> 2 <div id="foreground" class="wall"></div> 3 <div id="top" class="wall"></div>
页面定制CSS代码
1 #home h1 2 font-size:45px; 3 4 body 5 background-image: url("放你的背景图链接"); background-position: initial; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; background-origin: initial; background-clip: initial; 6 height:100%; 7 width:100%; 8 9 #home 10 opacity:0.7; 11 12 .wall 13 position: fixed; 14 top: 0; 15 left: 0; 16 bottom: 0; 17 right: 0; 18 19 div#midground 20 background: url("https://i.postimg.cc/PP5GtGtM/midground.png"); 21 z-index: -1; 22 -webkit-animation: cc 200s linear infinite; 23 -moz-animation: cc 200s linear infinite; 24 -o-animation: cc 200s linear infinite; 25 animation: cc 200s linear infinite; 26 27 div#foreground 28 background: url("https://i.postimg.cc/z3jZZD1B/foreground.png"); 29 z-index: -2; 30 -webkit-animation: cc 253s linear infinite; 31 -o-animation: cc 253s linear infinite; 32 -moz-animation: cc 253s linear infinite; 33 animation: cc 253s linear infinite; 34 35 div#top 36 background: url("https://i.postimg.cc/PP5GtGtM/midground.png"); 37 z-index: -4; 38 -webkit-animation: da 200s linear infinite; 39 -o-animation: da 200s linear infinite; 40 animation: da 200s linear infinite; 41 42 @-webkit-keyframes cc 43 from 44 background-position: 0 0; 45 transform: translateY(10px); 46 47 to 48 background-position: 600% 0; 49 50 51 @-o-keyframes cc 52 from 53 background-position: 0 0; 54 transform: translateY(10px); 55 56 to 57 background-position: 600% 0; 58 59 60 @-moz-keyframes cc 61 from 62 background-position: 0 0; 63 transform: translateY(10px); 64 65 to 66 background-position: 600% 0; 67 68 69 @keyframes cc 70 0% 71 background-position: 0 0; 72 73 100% 74 background-position: 600% 0; 75 76 77 78 @keyframes da 79 0% 80 background-position: 0 0; 81 82 100% 83 background-position: 0 600%; 84 85 86 @-webkit-keyframes da 87 0% 88 background-position: 0 0; 89 90 100% 91 background-position: 0 600%; 92 93 94 @-moz-keyframes da 95 0% 96 background-position: 0 0; 97 98 100% 99 background-position: 0 600%; 100 101 102 @-ms-keyframes da 103 0% 104 background-position: 0 0; 105 106 100% 107 background-position: 0 600%; 108 109
加油啊柯基~
博客园自定义样式编辑(代码片段)
...gt;</a></span> 侧边栏公共html代码<p>本博客仅用作学习交流使用， 查看详情
博客园自定义样式修改标签页的icon图标(代码片段)
有没有发现大多数的博客园标签右上角都是一个小矿工，千篇一律没有什么特色，想不想设置一个像我一样的个性化icon图标呢？按照以下四步你也可以实现自定义标签图标。FromTo第一步：挑挑拣拣选一张icon图标（尺寸不要太大... 查看详情
博客园自定义鼠标点击特效(代码片段)
需要申请JS权限，JS权限申请通过之后，将如下代码放入侧边栏，页首，页末，都可以复制如下代码<scripttype="text/javascript">/*鼠标特效*/vara_idx=0;jQuery(document).ready(function($)$("body").click(function(e)vara=newArray("?Linux?","?Shell?","? 查看详情
博客园自定义css代码
*{margin:0;padding:0;}ul{list-style-type:none;}ul::after{content:‘‘;display:block;clear:both;}a,a:link,a:visited,a:hover,a:active{color:black;text-decoration:none;}#blogTitle,#blog-calendar,#blogCalen 查看详情
博客园自定义页面风格设计后续篇(页面设计模式及代码高亮鼠标点击效果升级)(代码片段)
前言在之前所写过的博客园自定义页面风格设计篇中，我们已经说明了其中两种风格的页面设计，鼠标图案的修改，公告栏的设置，背景音乐的制作，关于CSS以及用Canvas和requestAnimFrame做动画特效，在本文中我们将教大家制作当... 查看详情
cnblog博客园自定义样式修改标签页的icon图标
有没有发现大多数的博客园标签右上角都是一个小矿工，千篇一律没有什么特色，想不想设置一个像我一样的个性化icon图标呢？按照以下四步你也可以实现自定义标签图标。From To 第一步：挑挑拣拣 选一张icon图... 查看详情
博客园自定义公告显示代码
1.博客公告栏中显示时间如图所示。2.在我的博客页面点击管理按钮。3.在管理界面中点击设置按钮。4.在设置界面中找到下图红色区域，把相应的代码加入其中即可。5.各种时间显示代码小人时间a.背景透明版本<scriptcharset="Shift... 查看详情
如何设置博客园好看的标题样式(代码片段)
1.向博客园申请js权限 我们需要进入博客园自定义博客模板的页面，向博客园管理团队申请页面运行js的权限。【博客园】->【设置】->【博客设置】，点击页面上的js权限申请，然后填写申请的理由，耐心等几分钟，再刷... 查看详情
如何设置博客园好看的标题样式(代码片段)
1.向博客园申请JS权限我们需要进入博客园自定义博客模板的页面，向博客园管理团队申请页面运行js的权限。【博客园】->【设置】->【博客设置】，点击页面上的js权限申请，然后填写申请的理由，耐心等几分钟，再刷新一... 查看详情
博客园自定义页面风格设计
转：http://www.cnblogs.com/ECJTUACM-873284962/p/7628894.html#_nav_0Angel_Kitty的原创博文①拥有自己的CSS代码②修改鼠标图案③公告栏的设置关于背景音乐④关于CSS动画特效⑤用Canvas和requestAnimFrame做动画特效 查看详情
博客园自定义地址栏logo
自定义博客园地址栏logo一、首先自己需要下载一个logo图片，png、jpg格式的都可以。挑选自己喜欢的图片就可以。二、然后制作成icon图标 在线制作icon图标网站：http://www.bitbug.net/ 三、上传至博客园文件中四、将以下代码... 查看详情
博客园自定义页面风格设计
最近好多人问我博客的页面设计模版，时间挺紧张的，赶着搞策划和学习。。。趁着现在放假写写吧~~~全部过程都是在“管理->设置”中完成的，博客皮肤推荐使用SimpleMemory，可以自适应，方便我们进行页面CSS定制论如... 查看详情
如何设置博客园好看的标题样式
1.向博客园申请js权限 我们需要进入博客园自定义博客模板的页面，向博客园管理团队申请页面运行js的权限。【博客园】->【设置】->【博客设置】，点击页面上的js权限申请，然后填写申请的理由，耐心等几分钟，再刷... 查看详情
记录帖如何自定义博客园界面
关于如何自定义博客园界面的文章记录博客园美化教程大集合----极致个性化你的专属博客（超详细，看这篇就够了）博客园cnblogs：自定义页面风格博客园自定义样式 查看详情
制作博客园目录导航(代码片段)
在博客园文章的上方制作一个导航窗口，方便浏览文章内容。点击按钮可以跳转到指定标题，还具备返回顶部功能。 1.向博客园申请JS权限我们需要进入博客园自定义博客模板的页面，向博客园管理团队申请页面运行js的权限... 查看详情
自定义博客样式(代码片段)
自定义博客样式一、添加自定义CSS1.收藏按钮悬浮#div_diggposition:fixed;bottom:10px;right:15px;border:2pxsolid#ECD7B1;padding:10px;width:140px;background-color:#fff;border-radius:5px5px5px5px!important;box-shadow:0001px#5F 查看详情
自定义博客园布局样式(代码片段)
自定义主体样式参数在皮肤里先挑一个现成的模板开始我们的定制之旅，这里我选了SimpleMemory，我还是喜欢这种朴素的风格。选择SimpleMemory模板上图成品的修改源码如下：bodybackground-color:#176d4694;#homewidth:90%;background-color:#f‘f‘f;.... 查看详情
自定义博客园首页样式(代码片段)
1、来个效果图2、进入博客园后台（设置->添加页首Html代码），将下面的代码复制粘贴保存即可11<scriptsrc="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js">22<canvasid="c_n4"width="860"height="958"style="position:fixed;top:0 查看详情