一、背景

    在园子里浪迹有很长一段时间了,里面遇到了很多大神,学习了很多知识,也帮助我解决很多现实工作的问题……非常感谢各位园友们的分享。说来惭愧,在园子这么久,很少发布博文。主要原因是自己有点懒,其他的客观原因也就不说了,每个人都有自己当时的想法。结果现在就有一种“我虽在江湖,但江湖没有我的传说”的尴尬,本着“迟到比不到好”的思想,就想着在这里记录一下自己平凡的学习成长历程,也希望能帮助园友们避免我踩过的坑。

   之前在逛园子的时候,就发现有些博主的主题很好看,查找了一些攻略,根据自己的喜好,简单的修改了主题样式以及添加了一些功能。如果你想定制自己的博客,可以跟我一起,需要有css基础。

二. 定制自己的博客

1、准备工作

     先在博客主页依次点击“管理”=》“设置”,下面找到“申请JS权限”,等待审核,审核通过之后才能,定制的主题才能成功。同时在博客皮肤那里选择博客园提供的皮肤。我没有像园子里面的大神直接自定义一套css样式,我觉得站在巨人的肩上,一样也可以摘到自己的星星。于是我选择了我觉得合适的皮肤[“SimpleBlue”],每个人的爱好不一样,你可以选择你喜欢的皮肤进行修改,不过下面的一些样式可能需要做一些修改,具体看你想要怎么展示。博客园自定义皮肤博客园自定义皮肤

  自定义主题样式操作,对于你不满意的元素,你可以在该页面按F12调出Debug工具,然后对该元素的css进行修改,调整满意之后,你把修改过的css保存到“页面定制CSS代码”里面。

2、公共样式

下面是我对SimpleBlue皮肤的公共样式做了一些调整,如果你想跟博主一样的定制,可以直接copy到"页面定制CSS代码"里面

  1 @font-face {
  2   font-family: 'FontAwesome';
  3   font-style: normal;
  4   font-weight: normal;
  5   src: url("http://blog.zhaishidan.cn/css/font/fontawesome-webfont.eot?#iefix") format('embedded-opentype'), url("http://blog.zhaishidan.cn/css/font/fontawesome-webfont.woff") format('woff'), url("http://blog.zhaishidan.cn/css/font/fontawesome-webfont.ttf") format('truetype'), url("http://blog.zhaishidan.cn/css/font/fontawesome-webfont.svg#FontAwesomeRegular") format('svg');
  6 }
  7 * {
  8   margin: 0;
  9   padding: 0;
 10 }
 11 body {
 12   background: #eee;
 13   color: #444;
 14   font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
 15   font-size: 14px;
 16   text-shadow: 0 0 1px transparent;
 17   color:#505050;
 18 }
 19 @media screen and (max-width: 1260px) {
 20   body {
 21     margin: 0px;
 22   }
 23 }
 24 @media screen and (max-width: 600px) {
 25   body {
 26     font-size: 13px;
 27   }
 28 }
 29 h1,h2,h3,h4,h5,h6 {
 30   font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
 31 }
 32 h1 {
 33   font-size: 1.8em;
 34 }
 35 h2 {
 36   font-size: 1.5em;
 37 }
 38 h3 {
 39   font-size: 1.3em;
 40 }
 41 a {
 42   text-decoration: none;
 43   color: #258fb8;
 44 }
 45 a:hover {
 46   text-decoration: underline;
 47 }
View Code

相关文章:

  • 2021-11-01
  • 2021-11-12
  • 2022-02-16
  • 2022-12-23
  • 2020-09-24
  • 2021-04-11
  • 2021-05-22
  • 2022-12-23
猜你喜欢
  • 2022-12-23
  • 2022-12-23
  • 2019-03-20
  • 2022-12-23
  • 2022-01-22
  • 2022-12-23
相关资源
相似解决方案