碼上快樂

相關內容    簡體    繁體

寫給前端白痴的博客園樣式定制指南

本文轉載自   查看原文   2018-08-31 09:56   3195    學習筆記

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 博客的標題和副標題 -->

大功告成啦！

 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 關於博客園樣式 博客園css定制 博客園定制化 博客園樣式美化 美化博客園樣式 博客園樣式美化 博客園樣式美化 博客園美化樣式 博客園教程-定制皮膚 定制和我一樣的博客園主題
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM