「染上鮮血的教學」CSSx把部落格標題用圖片取代文字 @ 。異想空間，異於常人的幻想空間。

自製/小颯的害羞表情令我著迷了 <3

-----------------------------------------------------

第一次發CSS的教學呢!

因為這個是我學的CSS裡面第一個自己研究出來的結果

我一開始根本找不到不過後來竟然在那個知名的部落格達人"Dribs & Drabs 點點滴滴"發現的，因為他把她寫在Q&A裡面所以我才沒看到

不過他的語法跟我不一樣就是了

總之希望大家都能學會跟了解原理喔!

在介紹此語法之前要先讓大家知道這個語法的結構

不懂沒關係，至少要知道一下

這個語法主要由部落格標題、目錄連結(相簿名片的那個)、繼續閱讀圖片模式這三種語法所組成的

為何????

其實一開始在研究時我就會找相似或類似的語法來研究所以把既可以連結又能夠用圖片方式呈現的語法拿出來研究一番

既然要讓你的文字部落格標題變成圖片模式那麼部落格標題的語法就一定會有的啦!

再來能夠連結的不就是那些目錄嗎?(相簿、部落格、留言、名片)

能夠變成圖片的有目錄以及繼續閱讀吧!

不過繼續閱讀有一個很關鍵的語法是目錄沒有的，我不知道原因就是了

總之就是這些東西

先來看這三大語法吧!

部落格標題

#banner h1 {
position:absolute;
top:10px;left:570px;
width:300px;
font-size:14px;
font-weight:normal;
margin-left:2px;
padding:0px;
color:#000000}

#navigation a {
display:block;
width:150px;
height:80px;
text-align:left;
color:#007b43;
background:none;
font-size:0px;
padding:0;

繼續閱讀圖片模式(教學來自這)

.more{float: right:50px; margin: 20px 10px 50px 20px; }
.more{float: left; margin:0px 0px 0px 0px; }
.more a{display: block; text-indent:10px; font:0px "Arial"; background:url(http://i.imgur.com/mE5EUCk.png) no-repeat; width: 100px; height: 55px; }
}

接著來看語法解說囉!

註:有變色+粗體的地方是原始語裡面額外增加的地方

這是部落格標題的原始語法

#banner h1 {
position:absolute;
top:10px;left:570px;
width:300px;
font-size:14px;
font-weight:normal;
margin-left:2px;
padding:0px;
color:#000000}

既然要變成圖片那一定少不少圖片背景的語法吧，所以就給他增加

#banner h1 {
position:absolute;
top:10px;left:570px;
width:300px;
font-size:14px;
font-weight:normal;
margin-left:2px;
padding:0px;
background:url(圖片網址) no-repeat;
color:#000000}

可是增加了之後你會發現圖片無法完全顯示

為何????

那是因為你沒給他固定寬高，所以就給他增加

#banner h1 {
position:absolute;
height:500px;
width:1000px;
position:absolute;
top:10px;left:570px;
width:300px;
font-size:14px;
font-weight:normal;
margin-left:2px;
padding:0px;
background:url(圖片網址) no-repeat;
color:#000000}

然而語法本身就有位置的語法了因此直接修改就好了

好了之後你會發現文字還在且圖片沒連結

為何????

因為你還沒把連結從文字轉移動圖片上

這時候就要結合後兩種語法了

首先先移除文字

我在研究繼續閱讀的時候在想，為何能讓字不見

於是我發現了關鍵的語法

font: 0px "Arial";

我測試時發現這個就是能讓文字不見的方法，既然不需要文字那麼文字顏色的語法就可以刪除囉!

所以就給他增加，因為我當時算是誤打誤撞成功的所以擺放的位置我並沒有特別研究放哪

因此建議照我的位置放吧!

#banner h1 {
position:absolute;
height:500px;
width:1000px;
position:absolute;
top:95px;left:150px;font: 0px "Arial";
width:300px;
font-size:14px;
font-weight:normal;
margin-left:2px;
padding:0px;
background:url(圖片網址) no-repeat;
}

這樣就完成95%囉!

最後只要結合目錄的語法便能讓圖片連結囉!

在那之前，先把語法內部需要的刪除:例如字的大小等...

#banner h1 {
position:absolute;
height:500px;
width:1000px;
position:absolute;
top:95px;left:150px;font: 0px "Arial";
padding:0px;
background:url(圖片網址) no-repeat;
}

然後開始下一步

這是目錄的原始語法(粗體是我們所需的部分

#navigation a {
display:block;
width:150px;
height:80px;
text-align:left;
color:#007b43;
background:none;
font-size:0px;
padding:0;

把粗體的地方增加上去

#banner h1 {
display:block;
position:absolute;
height:500px;
width:1000px;
text-align:left;
position:absolute;
top:95px;left:150px;font: 0px "Arial";
padding:0px;
background:url(圖片網址) no-repeat;
}

這樣就好了喔，以上是詳細解說

其實還有更快速的套用方法

把目錄語法的標籤

#navigation a { 改成部落格標題的標籤#banner h1 {

在做內部的微調，因為目錄的語法本身包含所需的成分較多因此用它來修改最快速

來做分解

原始的目錄語法

#navigation a {
display:block;
width:150px;
height:80px;
text-align:left;
color:#007b43;
background:none;
font-size:0px;
padding:0;}

修改之後(粗體+變色是微調的部分刪除線是要刪除的地方沒改的地方就是目錄本身的語法

最後一行就是繼續閱讀的關鍵語法(其實top跟left也是直接從繼續閱讀複製來的因為剛好跟關鍵語法放一起

#banner h1 {
display:block;
position:absolute;
width:150px;
height:80px;
text-align:left;
color:#007b43;
background:url(http://i.imgur.com/XjuKaRD.png) no-repeat;
font-size:0px;
padding:0;
top:95px;left:150px; font: 0px "Arial"; }

這樣就OK囉!

看懂了詳解再看偷吃步是不是覺得很簡單呢?

這麼一來你的滑鼠不管點到圖片哪個地方都能夠連結了喔!

其實當我發現關聯後我就用偷吃步的方法去修改了XD，不過為了詳細解說才逐一分解

不然大家會懷疑怎麼蹦出來的，哈哈

最後的完整語法

#banner h1 {
display:block;
position:absolute;
width:圖片寬px;
height:圖片高px;
text-align:left;
background:url(圖片網址) no-repeat;
padding:0;
top:圖片上下位置px;left:圖片左右位置px; font: 0px "Arial"; }