要如何在文章標題前面加個圖呢?
方法其實很簡單......



之前一直設法要在文章標題的前面加個圖
試了好多方法就是不行,後來在ArtSkill
看到他的文章標題正是我想要的,趕緊請教他
方法其實還滿簡單的,只要將一些語法放在CSS裡就行了

範例:

.title { font-family: verdana, arial, helvetica, sans-serif;/*字型*/
font-weight: bold; /*字為粗體*/
font-size: 15px;/*字體大小*/
color: #333333; /*字體顏色*/
margin: 10px 0px; /*整個標題區塊與上下區塊間的距離*/
background-image:url(http://p5.p.pixnet.net/albums/userpics/5/9/468159/1210519944.gif);/*背景圖示*/
background-repeat: no-repeat;/*背景圖示不重覆*/
padding:5px 0px 10px 35px;/*利用內距的屬性,讓文字排列在圖示之後出現*/
}

先將你要放在標題前的圖示存到網路空間
我是直接存在新浪的圖片管理裡就可以了!

 在CSS裡找到  .title
然後將...
background-image:url(圖示網址);
background-repeat: no-repeat;
padding:5px 0px 10px 35px;

這三句貼進去,其中padding的屬性為5px 0px 10px 35px;
依序代表上、右、下、左,我讓左邊與文字間的設定拉大,
如此文字就會在圖示之後,至於距離可自行調整

若是有使用文章邊框,圖示覺得會與邊框太貼近
可以將圖示在往右移一點,這樣就不會貼著邊框了
請在將MARGIN-LEFT:10px; 加進去就可以了!
若覺得不需要,這句就可省略掉!

有看到我文章標題前,那隻搖著尾巴的嗎?
   就是這樣來的!

無名的使用方法也一樣唷!


cm788847 發表在 痞客邦 PIXNET 留言(20) 人氣()


留言列表 (20)

發表留言
  • Dreamorange
  • 恩有比較好了<br />
    <br />
    不過圖還是有點上面<br />
    <br />
    老師有辦法幫忙微調到下面點嗎?<br />
    <br />
    如果沒法的話就不麻煩嚕...<br />
    <br />
    這樣我就很滿足了 ~ 3Q<br />
    <br />
  • To : Dreamorange
  • 請詳述問題就好,不必把 CSS 貼上來,我們看得到的...^^<br />
    把 padding 的第一個值,從 5px 改成 0px 看看...^^
  • Dreamorange
  • 情意老師<br />
    <br />
    我很喜歡呢<br />
    <br />
    可是一直找不到素材的網址<br />
    <br />
    找到了又圖片太大= =<br />
    <br />
    老師能推薦幾個網站給我嗎?<br />
    <br />
    3Q ~~
  • 熊寶寶
  • 謝謝妳!!<br />
    這個語法我找的好久唷,謝謝你的教學!<br />
  • killy52785
  • 還是弄不出來有比較簡單的說明嗎??
  • killy52785
  • 不好意思問一下之前有套用黑色的部落格,<br />
    可是要怎在那邊前面加點小動畫圖片呢?<br />
    可以教我一下嗎先謝謝哩!~
  • yi
  • 不好意思再請教一下<br />
    為什麼修改後<br />
    原本文章與文章間的分隔線<br />
    變不見了<br />
    <br />
    要怎麼叫出來?
  • yi
  • 我看了<br />
    謝謝<br />
  • yi
  • 請問要如何讓圖示的白色底變透明?
  • yi
  • <p>請問我貼上後<br />
    圖片會什麼不會動<br />
    我的圖示本來會點頭的<br />
    還有原本文章的分隔線怎麼不見了??<br />
    </p>
  • 北鼻
  • <p>呵呵!!!<br />
    <br />
    好多寶藏唷!!!!</p>
  • 〝Yu。蘭~*
  • 媽咪....<br />
    那個是他原本就有的= =+...<br />
    最後還是放棄在無名放<br />
    <br />
    來放新浪網的@@<br />
    ㄎㄎ!<br />
    有好多個〝;〞<br />
    不知道要在哪個後面放>""<<br />
    就PO上來摟~~<br />
    <br />
    .title {<br />
    &nbsp;FONT-WEIGHT: bold; FONT-SIZE: 13px; MARGIN: 10px 0px 5px; COLOR: #cccccc; LINE-HEIGHT: 120%; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif<br />
    }<br />
    <br />
    感謝爹地媽咪的幫忙唷^Q^<br />
    圖片不要太貼標題^^"<br />
    <br />
    這是我的圖片網址<br />
    &rarr;<a href="http://hopeariesv.googlepages.com/jinghua.gif">http://hopeariesv.googlepages.com/jinghua.gif</a><br />
  • {LoVe}琬渟,,
  • 為什麼我的用完以後<br />
    <br />
    在文章前面都沒有圖片ㄚ<br />
    <br />
    我試過很多的圖片<br />
    <br />
    為什麼都沒有ㄚ<br />
    <br />
    可以幫我看看嗎??<br />
    <br />
    .title {<br />
    <br />
    &nbsp;PADDING-RIGHT: 0px; PADDING-LEFT: 35px; FONT-WEIGHT: bold; FONT-SIZE: 13px; PADDING-BOTTOM: 10px; MARGIN: 10px 0px 5px; COLOR: #6633ff; LINE-HEIGHT: 120%; PADDING-TOP: 5px; BACKGROUND-REPEAT: no-repeat; FONT-STYLE: normal; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif <br />
    <br />
    &nbsp;background-image:url(http://home.kimo.com.tw/66rich/B214.gif)<br />
    <br />
    }<br />
    <br />
  • ~Yu‧蘭~*
  • 放進去了....<br />
    網誌沒反應@@??<br />
    <br />
    <p>.title {<br />
    &nbsp;FONT-WEIGHT: bold; FONT-SIZE: x-small; COLOR: #666633<br />
         background-image:url(<a href="http://hk.geocities.com/hope_aries_v/49.gif">http://hk.geocities.com/hope_aries_v/49.gif</a>); <br />
         background-repeat: no-repeat;<br />
         padding:5px 0px 10px 35px;</p><p>}<br />
    <br />
    在問個小問題唷...<br />
    可以一次放很多個圖片嗎??<br />
    讓他隨機出現不一樣的小圖示呢??</p>
  • ~Yu‧蘭~*
  • <p>有情~~</p><br />
    <p>不太懂捏</p><br />
    <p>是要把你說的那三行貼進去.title的哪邊呢??</p><br />
    <p>左邊右邊上面下面??</p><br />
    <p>還是有括號?有要刪掉裡面的東西嗎??(假如裡面以東西的話)</p><br />
    <p>敎敎Yu吧>""<</p>
  • 小瑋
  • <p>哇....</p><br />
    <p>我是好久都不會用說...</p><br />
    <p>CSS裡面有好多TITLE...</p><br />
    <p>是隨便找個地方貼上就可以,還是要貼在特定的位置?</p><br />
    <p>每一篇都可以換不一樣的圖案嗎?</p><br />
    <p>嗚嗚&nbsp; 拜託泥交我了&nbsp; 我用到快花轟了說...</p><br />
    <p>(真是拍謝,因為新浪系統很怪,我連打好幾封都沒有字出去,請見諒捏!)</p>
  • 小瑋
  • piggybuttock
  • 情意:<br />
    請問這篇文章開頭的圖片<br />
    是你的作品嗎?<br />
    還是去哪裡找到的<br />
    我很喜歡這一系列的圖片^^