十分鍾用HTML&CSS讓博客園變得高大上

一直很喜歡博客園的主題：coffee，但是看久了，總感覺還是太多不必要的東西，所以就自己整理了下，記錄如下：

打開管理，可以看出博客園可以非常方便自由定制html和css滴，真是貼心！

使用工具： Firefox+firebug

 

1.加一個子標題【對於我這種特別喜歡寫注釋真是太好啦】：

 

2.coffee的主題全部統一為一種黃色，看多了就覺得太單調：通過頁面定制CSS代碼換換換!

因為我只是在coffee上小改，所以

這個還是必須不勾選了。

 

打開firebug找到標題的背景圖地址，然后把它換成你喜歡的，我就換成了百度首頁的星空主題,【圖片地址是百度的，絕對不會掛哈哈，機智的我】

同時把body的背景色也用純黃色加深下。

 

body {
    color: #000;
    background: url('http://7.su.bdimg.com/skin/85.jpg?2') left top; /*背景純黃色加深*/
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-size: 9pt;
    min-height: 80%;
    line-height: 1.5;
}

#header {
    background: url('http://4.su.bdimg.com/skin/12.jpg?2') right top no-repeat;/*百度首頁星空*/
    height: 178px;
}
#blogTitle {
    height: 178px;
    clear: both;
    background: url('http://4.su.bdimg.com/skin/12.jpg?2')  no-repeat;
} 

3.右邊常用鏈接里面有個更多鏈接是沒有用的，去掉;

   同樣搜索里面的google在國內也是沒用的，去掉;

[PS:這些都是用firebug打到找到對應標簽后再操作滴，所以你只要用firebug，就快速找到你要的標簽，DIY它]

 

#itemListLink{display:none !important;}
#widget_my_google{display:none !important;}

 

4.右邊的側邊欄如果加太多的文字，就會顯得雜，如果去掉，又會顯得那一片的純黃很刺眼，試了下換個背景，發現上面的字就很難看，

還是純黃好，所以就想加點圖像上去，最好是動態的，

一個站不要加載太多的資源，所以決定不再用動態圖片，於是就看到了下面這個神器！

這個可以做點圖像出來，

其實他叫側邊欄公告，但只要你在里面寫的HTML定義到絕對位置，就可以在頁面內任何地方放東西，

所以 有了HTML和CSS就可以做很多事啦【sign,JS還要申請權限...】

那就用CSS做個酷酷的的動態圖像來做 鎮站之寶吧,哈哈！

 

<svg viewBox="0 0 160 160" width="160" height="160">
  <circle  cx="80" cy="80" r="50" />
  <g transform=" matrix(0.866, -0.5, 0.25, 0.433, 80, 80)">
    <path d="M 0,70 A 65,70 0 0,0 65,0 5,5 0 0,1 75,0 75,70 0 0,1 0,70Z" fill=green>
      <animateTransform attributeName="transform" type="rotate" from="360 0 0" to="0 0 0" dur="1s" repeatCount="indefinite" />
    </path>
  </g>
  <path d="M 50,0 A 50,50 0 0,0 -50,0Z" transform="matrix(0.866, -0.5, 0.5, 0.866, 80, 80)" />
</svg>

 

都可以任意寫HTML,那么在標題后添加個以前寫CSS的練習的小球，把玩下下，一閃一閃顯得好神秘，有木有【但是只有FireFox才能顯示出來......】

 

在HTML里面加入：

<div class="three_ball"></div>

在CSS里面加入：

.three_ball{
  width:15px;
  height:15px;
  background:rgba(0,0,0,0);
  border-radius:50%;
  margin:100px auto;
  position:absolute;
  left:25px;
  top:25px;
  animation:three_ball 3s ease-in-out infinite;
}
@keyframes three_ball {
  0% {box-shadow:15px 15px 0 0 #fff, -15px 15px 0 0 #fff, -15px -15px 0 0 #ff0;}
  8% {box-shadow:15px -15px 0 0 #fff, -15px 15px 0 0 #fff, -15px -15px 0 0 #f0f;}
  17% {box-shadow:15px -15px 0 0 #fff, 15px 15px 0 0 #fff, -15px -15px 0 0 #0ff;}
  25% {box-shadow:15px -15px 0 0 #fff, 15px 15px 0 0 #fff, -15px 15px 0 0 #f00;}
  33% {box-shadow:-15px -15px 0 0 #fff, 15px 15px 0 0 #fff, -15px 15px 0 0 #fff;}
  42% {box-shadow:-15px -15px 0 0 #fff, 15px -15px 0 0 #fff, -15px 15px 0 0 #ff0;}
  50% {box-shadow:-15px -15px 0 0 #fff, 15px -15px 0 0 #fff, 15px 15px 0 0 #fff;}
  58% {box-shadow:-15px 15px 0 0 #fff, 15px -15px 0 0 #fff, 15px 15px 0 0 #f00;}
  67% {box-shadow:-15px 15px 0 0 #fff, -15px -15px 0 0 #fff, 15px 15px 0 0 #00f;}
  75% {box-shadow:-15px 15px 0 0 #fff, -15px -15px 0 0 #fff, 15px -15px 0 0 #f0f;}
  83% {box-shadow:15px 15px 0 0 #fff, -15px -15px #fff 0 0, 15px -15px 0 0 #ff0;}
  92% {box-shadow:15px 15px 0 0 #fff, -15px 15px 0 0 #fff, 15px -15px 0 0 #0ff;}
  100% {box-shadow:15px 15px 0 0 #fff, -15px 15px 0 0 #fff, -15px -15px 0 0 #f00;}
}

 

5.不要忘記在頁首和頁尾點綴下下：

<p align="center">It's not who you are underneath, it's what you do that defines you</p>
<p align="center">Brick walls are there for a reason :they let us prove how badly we want things</p>

最后：

　　小技巧：學習時一直把css里面的id和class用什么標記記錯，其實你用時只要想 id是#都有一個豎筆划，這樣每次一用就能絕對記得！

 

---

 

當剛學CSS時，就和這小家伙一樣趕覺自己會飛起來啦…………