mskitten

又惘又怠

写给前端白痴的博客园样式定制指南

THE SHORT STORY

只要两步就可以拥有以下页面。（猫是会眨眼的哦）

第一步：到你的博客后台管理，将博客皮肤设置为darkgreentrip

第二步： 分别粘贴以下代码到“页面定制CSS代码”和“页首Html代码”中（注意，不要勾选“禁用模板默认CSS”）

/*-----------------------------页面定制css代码------------------------------*/
body{
    background: transparent;
}

#main{
    background-color: rgb(236, 239, 241);
}

#blogTitle {
    height: 270px;
    background-color: black;
   color:white;
}

#blogTitle h1{
    text-align: center;
    margin-left: 0;
    font-size: 2.5em;
    font-family: 'Lato', sans-serif;
    position: relative; 
    left: 25%;
    width: 50%;
    letter-spacing: 5px;
    top: 100px;
}

#Header1_HeaderTitle{
    color:white;
}

#blogTitle h2{
    text-align: center;
    font-size: 1em;
    font-family: 'Lato', sans-serif;
    margin-left: 0;
    letter-spacing: 3px;
    position: absolute;
    top: 190px; 
    left: 25%;
    width: 50%;
}

#blogTitle a:hover{
    color: white;
    text-decoration: none;
    letter-spacing: 8px;
}

#blogTitle h1::after{
    background-color: white;
    content: "";
    height: 2px;
    display: block;
    width: 45%;
    margin: 10px auto;
}

#navigator {
    background-color: white;
    position: fixed;
    top: 0;
    width: 100%;
}

.blogStats {
    color: transparent;
}

#navList{
    font-size: 0.8em;
    float: right;
}

#navList a {
    transition-duration: 0.4s;
}

// #navList a:active, #navList a:focus, #navList a:hover{
  //  background-color: white;
  //  color: #009688;
  //  text-shadow: none;
//}

#navList a:active {
//    border-top: 4px solid #009688;
//    background: white;
}

.dayTitle {
    display: none;
    font-size: 18px;
    top: 3.5em;
    position: relative;
    border-bottom: none;
}

.dayTitle a {
    font-size: 0.8em;
    color: black;
    font-family: 'Lato', sans-serif;
    font-style: normal;
    font-weight: bold;
    letter-spacing: 2px;
}

.dayTitle a:hover{
    text-decoration: none;
}

.postTitle {
    border-bottom: 1px solid #ccc;
    font-size: 25px;
    text-align: center;
    letter-spacing: 3px;
}

.day{
    border-radius: 0;  
    box-shadow: none;  
}

.postTitle a:link {
    color: #0d0099;
}

.postTitle a:link, .postTitle a:visited, .postTitle a:active {
    color: #0d0099;
    transition: all 0.4s linear 0s;
}

#sideBar{
    display: none;
}

#mainContent .forFlow {
    margin-left: 2em;
}

/*------------------------------cat-----------------------------------*/
.cat {
    position: absolute;
    height: 150px;
    width: 170px;
    top: 110px;
    right: 150px;
}

.ear {
  position: absolute;
  top: -30%;
  height: 60%;
  width: 25%;
  background: #fff;
}
.ear::before, .ear::after {
  content: "";
  position: absolute;
  bottom: 24%;
  height: 10%;
  width: 5%;
  border-radius: 50%;
  background: #161616;
}
.ear::after {
  -webkit-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
}

.ear--left {
  left: -7%;
  border-radius: 70% 30% 0% 0% / 100% 100% 0% 0%;
  -webkit-transform: rotate(-15deg);
          transform: rotate(-15deg);
}
.ear--left::before, .ear--left::after {
  right: 10%;
}
.ear--left::after {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.ear--right {
  right: -7%;
  border-radius: 30% 70% 0% 0% / 100% 100% 0% 0%;
  -webkit-transform: rotate(15deg);
          transform: rotate(15deg);
}
.ear--right::before, .ear--right::after {
  left: 10%;
}
.ear--right::after {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

.face {
  position: absolute;
  height: 100%;
  width: 100%;
  background: #161616;
  border-radius: 50%;
}

.eye {
  position: absolute;
  top: 35%;
  height: 30%;
  width: 31%;
  background: #fff;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
.eye::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 0;
  width: 100%;
  border-radius: 0 0 50% 50% / 0 0 40% 40%;
  background: #161616;
  -webkit-animation: blink 4s infinite ease-in;
          animation: blink 4s infinite ease-in;
}
@-webkit-keyframes blink {
  0% {
    height: 0;
  }
  90% {
    height: 0;
  }
  92.5% {
    height: 100%;
  }
  95% {
    height: 0;
  }
  97.5% {
    height: 100%;
  }
  100% {
    height: 0;
  }
}
@keyframes blink {
  0% {
    height: 0;
  }
  90% {
    height: 0;
  }
  92.5% {
    height: 100%;
  }
  95% {
    height: 0;
  }
  97.5% {
    height: 100%;
  }
  100% {
    height: 0;
  }
}
.eye::before {
  content: "";
  position: absolute;
  top: 60%;
  height: 10%;
  width: 15%;
  background: #fff;
  border-radius: 50%;
}

.eye--left {
  left: 0;
}
.eye--left::before {
  right: -5%;
}

.eye--right {
  right: 0;
}
.eye--right::before {
  left: -5%;
}

.eye-pupil {
  position: absolute;
  top: 25%;
  height: 50%;
  width: 20%;
  background: #161616;
  border-radius: 50%;
  -webkit-animation: look-around 4s infinite;
          animation: look-around 4s infinite;
}
@-webkit-keyframes look-around {
  0% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
  5% {
    -webkit-transform: translate(50%, -25%);
            transform: translate(50%, -25%);
  }
  10% {
    -webkit-transform: translate(50%, -25%);
            transform: translate(50%, -25%);
  }
  15% {
    -webkit-transform: translate(-100%, -25%);
            transform: translate(-100%, -25%);
  }
  20% {
    -webkit-transform: translate(-100%, -25%);
            transform: translate(-100%, -25%);
  }
  25% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}
@keyframes look-around {
  0% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
  5% {
    -webkit-transform: translate(50%, -25%);
            transform: translate(50%, -25%);
  }
  10% {
    -webkit-transform: translate(50%, -25%);
            transform: translate(50%, -25%);
  }
  15% {
    -webkit-transform: translate(-100%, -25%);
            transform: translate(-100%, -25%);
  }
  20% {
    -webkit-transform: translate(-100%, -25%);
            transform: translate(-100%, -25%);
  }
  25% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}
.eye--left .eye-pupil {
  right: 30%;
}
.eye--right .eye-pupil {
  left: 30%;
}
.eye-pupil::after {
  content: "";
  position: absolute;
  top: 30%;
  right: -5%;
  height: 20%;
  width: 35%;
  border-radius: 50%;
  background: #fff;
}

.muzzle {
  position: absolute;
  top: 60%;
  left: 50%;
  height: 6%;
  width: 10%;
  background: #fff;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  border-radius: 50% 50% 50% 50% / 30% 30% 70% 70%;
}

/*--------------------------------------------hide original header----------------------------------*/
#header{display:none;}
页面定制css代码
<div id="new_header">
    <div id="blogTitle">
    <a id="lnkBlogLogo" href="https://www.cnblogs.com/mozi-song/"><img id="blogLogo" src="/Skins/custom/images/logo.gif" alt="返回主页" /></a>            
        
    <!--done-->
    <h1><a id="Header1_HeaderTitle" class="headermaintitle" href="https://www.cnblogs.com/mozi-song/">mskitten</a></h1>
    <h2>又惘又怠</h2>        
    
    <div class="cat">
        <div class="ear ear--left"></div>
        <div class="ear ear--right"></div>
        <div class="face">
            <div class="eye eye--left">
                <div class="eye-pupil"></div>
            </div>
            <div class="eye eye--right">
                <div class="eye-pupil"></div>
            </div>
            <div class="muzzle"></div>
        </div>
    </div>
    </div>
    
    <div id="navigator">
        <ul id="navList">
            <li><a id="blog_nav_admin" class="menu" rel="nofollow" href="https://i.cnblogs.com/" style="color:transparent">管理</a></li>
            <li><a id="blog_nav_sitehome" class="menu" href="https://www.cnblogs.com/">博客园</a></li>
            <li><a id="blog_nav_myhome" class="menu" href="https://www.cnblogs.com/mozi-song/">首页</a></li>
            <li></li>
            <li><a id="blog_nav_contact" class="menu" rel="nofollow" href="https://www.cnblogs.com/mozi-song/category/1207554.html">胡言乱语</a></li>
            <li><a id="blog_nav_contact" class="menu" rel="nofollow" href="https://www.cnblogs.com/mozi-song/category/1178719.html">正儿八经</a></li>
                <li><a id="blog_nav_contact" class="menu" rel="nofollow" href="https://msg.cnblogs.com/send/mozi_song">站内信</a></li>
            <li><a id="blog_nav_contact" class="menu" rel="nofollow" href="https://www.cnblogs.com/mozi-song/p/9560345.html">关于</a></li>
            <li></li>
        </ul>                    
        </div><!--end: blogStats -->
    </div><!--end: navigator 博客导航栏 -->
    
</div><!--end: blogTitle 博客的标题和副标题 -->
页首Html代码

搞定辣！

注意两点：

  1. 我把“管理”这个导航选项藏了起来不被普通用户看到，不过鼠标移过来就可以点击，在导航栏的最左边（“博客园”左边）。
  2. 博客的大小标题和导航栏都是静态配置的，要改变它们的显示内容和链接，可以在页首html代码中搜寻对应的关键字，比如搜"mskitten"并把它换成你的博客名就可以啦。

THE LONG STORY

鄙人是最近才得知自己的博客样式可以定制，简直打开了新世界的大门。

什么后端赛高，后端处于鄙视链的尖端，我只有两个字：naive。css实在太好玩了，指哪改哪，还可以集成各种小动画，简直玩不够……（拼命控制情绪）

原理

基本上，原理是这样的：博客首页的html页面是由后台生成的，不过博客园在“后台管理”这里开了几个后门，让你可以在特定的地方加入html和js代码，也可以用css定制整个页面的风格。

darkgreentrip这个风格只是一个起点，它会将博客页面上各种大的模块（比如导航栏、标题栏、侧边栏等）的基本位置摆好。你也可以选择其他的风格作为起点，然后用浏览器慢慢手动修改调试。

 

css入门

在开始修改之前，必须懂一些基本的css，否则事倍功半。MDN有一个很好的教程，讲得简洁易懂，而且有各种好玩的小例子给你练习，大概花个两三天，学成半吊子就已经足够你修改你的博客页面了（来自半吊子的不负责任的建议）。

如果已经会得差不多了，可以跳到下一节。

如果你实在时（没）间（耐）有（心）限（学），至少也要知道这些：

1.css语句的基本语法：　一个rule = 选择器　{  定义们 }

 

 选择器会选择这一条定义对应哪些元素。比如，我希望把div的所有子孙p元素的背景颜色设为红色，那“div的所有子孙p元素”就可以用选择器div p来进行筛选。

2.选择器的基本语法：

选择元素：  p {}

选择类： .someClass{}

选择ID：  #someID

选择属性：　知道最简单的[attr=val]就够了。　如　li[lang="en-GB"]

选择pseudo-class： 表示选择某元素的某种状态。如 a:hover 选中鼠标悬停在anchor上的状态。

选择pseudo-elements： 表示某种特殊选择。如 ::after 会在制定的元素之后创建一个新元素，通常作装饰用。

复合选择器：（A, B均为以上讲到的选择器）

  1. A, B     同时选中A和B
  2. A B      选中是A的子孙的B元素
  3. A > B   选中是A的直接儿子的B
  4. A + B   选中是A的下一个兄弟的B
  5. A ~ B   选中是A之后的兄弟的B

3.优先级

如果有多个选择器同时对某一个元素进行样式定义，最后哪一个选择器会胜出呢？css有一套规则进行定义，也就是所谓的cascading。cascading按重要度从高到低有三个规则：

  1. Importance：带有!important的property永远胜出。
  2. 特别性：css有一套特别的打分机制，分高者则特别性高，此处只要大致记住，内联的style最特别，可以加1000分；其次是ID选择器，加100分；然后是类、属性、pseudo-class选择器，加10分；最后是pseudo-element选择器，加1分。
  3. 定义顺序： 在以上两条都相同的情况下，定义在后面的胜出。

 注意，胜出的是一个property而不是整个rule。

以上只是总结了css的几个最重要的基本点，对于没有系统学习过html和css的人来说，很容易觉得难以理解。如果你觉得这些知识并不够你进行下一节，还是乖乖地去MDN看教程吧，教程不长，字里行间蕴含了很多css的基本思想，比如property的继承等，对实践还是非常重要的。

在调试过程中可以使用CSS reference查询各种property，写得非常清楚且有实时运行的例子，所以对property不需要强记。但是以上提到的选择器和优先级如果不太熟的话就会比较影响调试的速度。

用浏览器调试

到了最好玩的部分啦。

在这里，如果你对你的博客应该长什么样子没有概念，可以先找一个自己喜欢的网页做参考。我找的是陈皓大大的主页。

定制css

打开你现在的博客主页，在浏览器上点ctrl+shift+c，就可以查看html元素和对应的css规则。

鼠标移到html的某个元素定义上时，页面上对应的元素会变成浅蓝色提示。上图中我选中了header这个div，选中的是最上面的标题和导航栏。

看哪个元素不顺眼，可以用浏览器的调试工具找到这个元素，然后在显示出的css规则中直接修改，查看效果。比如我觉得这个侧边栏实在不好看，找了一下，是一个id为sideBar的div元素。先粗暴地在浏览器中编辑display: none，使它不再显示

然后在你“页面定制css代码”中将这一条对应的规则加上，直接用ID选择器就可以。

注意博客园的后台设置有时会有点问题，所以最好将你写好的css代码在本地备份，以防丢失。

再比如我想把导航栏放到最上面，并让它变成sticky的（即鼠标向下滚动时，导航栏始终处于页面的上方）。先找到导航栏，发现它是一个叫做navigator的div，它跟标题栏都是一个叫做header的元素的子元素。

这里你就得知道一个叫position的property了，这个property很重要，经常会用到。可以在CSS reference中查看。

在这里我们将导航栏的position设置为fixed，并将top设为0，width设为100%，就可以获得以上效果。

一个猫脸

我想要一个简约可爱的黑白猫脸动画，于是我在网上找到了这个页面。

先把这里的html和css代码复制下来，在本地试一下是否可以正常显示。

注意：这里的css默认为scss，是css的一个超集。由于博客园后台只支持css，你需要在这里选择compiled css。

html部分只有div，把它包进body元素即可。

<html>
    <head>
        <link type="text/css" rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="cat">
            <div class="ear ear--left"></div>
            <div class="ear ear--right"></div>
            <div class="face">
                <div class="eye eye--left">
                    <div class="eye-pupil"></div>
                </div>
                <div class="eye eye--right">
                    <div class="eye-pupil"></div>
                </div>
                <div class="muzzle"></div>
            </div>
        </div>
    </body>
</html>

用浏览器打开html文件，猫脸成功显示在页面中央

集成猫脸

我的标题栏是纯黑背景的，我觉得跟黑色的猫脸很搭，所以我想把猫脸隐在标题栏中。

因为标题栏的html元素是固定的，于是这里简单粗暴，干脆先将标题栏和导航栏一起去掉。（去掉导航栏是因为我也想自己定制导航栏的元素）

然后写一个自己的header元素，加入猫脸。最简单的方法是从原页面的html代码中复制header元素，并重命名为new_header，然后将猫脸的div元素加入。注意这里也加入了导航栏元素的定制。

<!--页首html代码-->

<div id="new_header">
    <div id="blogTitle">
        <a id="lnkBlogLogo" href="https://www.cnblogs.com/mozi-song/"><img id="blogLogo" src="/Skins/custom/images/logo.gif" alt="返回主页" /></a>            
        
        <h1><a id="Header1_HeaderTitle" class="headermaintitle" href="https://www.cnblogs.com/mozi-song/">mskitten</a></h1>
        <h2>又惘又怠</h2>        
        <!-- 猫脸元素 -->
        <div class="cat">
            <div class="ear ear--left"></div>
            <div class="ear ear--right"></div>
            <div class="face">
                <div class="eye eye--left">
                    <div class="eye-pupil"></div>
                </div>
                <div class="eye eye--right">
                    <div class="eye-pupil"></div>
                </div>
                <div class="muzzle"></div>
            </div>
        </div>
    </div>
    <!-- 定制导航栏元素 -->
    <div id="navigator">
        <ul id="navList">
            <li><a id="blog_nav_admin" class="menu" rel="nofollow" href="https://i.cnblogs.com/" style="color:transparent">管理</a></li>
            <li><a id="blog_nav_sitehome" class="menu" href="https://www.cnblogs.com/">博客园</a></li>
            <li><a id="blog_nav_myhome" class="menu" href="https://www.cnblogs.com/mozi-song/">首页</a></li>
            <li><a id="blog_nav_contact" class="menu" rel="nofollow" href="https://www.cnblogs.com/mozi-song/category/1207554.html">胡言乱语</a></li>
            <li><a id="blog_nav_contact" class="menu" rel="nofollow" href="https://www.cnblogs.com/mozi-song/category/1178719.html">正儿八经</a></li>
            <li><a id="blog_nav_contact" class="menu" rel="nofollow" href="https://msg.cnblogs.com/send/mozi_song">站内信</a></li>
            <li><a id="blog_nav_contact" class="menu" rel="nofollow" href="https://www.cnblogs.com/mozi-song/p/9560345.html">关于</a></li>
        </ul>                    
    </div><!--end: navigator -->
</div><!--end: new_header -->
    
</div><!--end: blogTitle 博客的标题和副标题 -->

大功告成啦！

 

posted @ 2018-08-31 09:56  mskitten  阅读(3939)  评论(19)  编辑  收藏  举报