新版CSS---文章標題列放兩張圖片的方法!:伽瑪星雲第58號行星:Xuite日誌
  • 安哥爾.摩亞
  • 關於我的一切,沒什麼好說的…



  • ❤❤❤手作訂購❤❤❤
  • 想要訂購手作的人
    請點圖片連結進文章

     

     

  • ☜新版CSS教學+網誌工具目錄☞
  • 最新回應
  • Re:最近在玩的手作--あみねこ,by(香草)於2008-10-11
    Re:版面分享-3,by(米_♥)於2008-10-10
    Re:新版CSS---隱藏『加入最愛』按鈕!,by(安哥爾.摩亞)於2008-10-04
    Re:新版CSS---隱藏『加入最愛』按鈕!,by(超帥氣艦長V)於2008-10-03
    Re:2008 IN 京阪。前言,by(安哥爾.摩亞)於2008-10-01
    Re:2008 IN 京阪。前言,by(安哥爾.摩亞)於2008-10-01
    Re:2008 IN 京阪。前言,by(欣)於2008-10-01
    Re:2008 IN 京阪。前言,by(Greta)於2008-10-01
    Re:私の熊,by(安哥爾.摩亞)於2008-09-26
    Re:私の熊,by(欣)於2008-09-26
  • 最新文章
  • 文章分類
  • 搜尋文章
  • 關鍵字
  • ♤最愛連結♤
  • 就是一些東西…
  • 現在線上人數:website counter
    快速連結→
    數位造林用網路多棵樹
    全球暖化很嚴重,請多多點按上面的連結,讓我們為地球盡一份心力!
  • 部落客廣告
  • 日誌使用資源






  • 如何使用RSS
    Powered by Xuite
  • 參觀人氣統計
  • 日誌評價
  • 平均分數:0 顆星
    投票人數:0
    我要評分:
  • 我的發燒文
  • 累積 | 今日
    loading......
  • 我的親友團
  • 誰拜訪過我
  • 2006-01-17 11:40 新版CSS---文章標題列放兩張圖片的方法!
  • ?
  • 新版CSS教學
  • 好文轉寄
  • 平均分數:0 顆星    投票人數:0
    我要評分:
    標籤 : 


    有人問說為什麼我的文章標題列可以放兩張圖片,其實很簡單,只是圖片放的位置不一樣而已…

    1.有兩個位置可以放圖片,第一個是/*文章標題列*/ .title{ },第二個是/*文章標題名稱*/  span.titlename{ },通常我在文章標題列放的是底圖,而文章標題名稱放的是標題前的小圖。

    2.放好圖片後可以調整圖片的位置,小圖和底圖可以重疊也可以不要,如果不要重疊的話,加個padding-left 這是設定底圖開始的位置。我放上我的語法來作說明。

    /*文章標題列*/
    .title{
     width:100%;
     height:45px;       ←標題列的高度,設成和圖片一樣,這樣圖片才不會被截掉!
        background-image:url(http://e.blog.xuite.net/e6/e2/12304732/blog_22501/txt/4713116/27.jpg);
    background-repeat:no-repeat;     ←因為我的底圖已經很寬了,所以我設成不重複,如果你的底圖是單一圖片的話也可以設成重複repeat。
     padding-top:5px; 
    background-position:35px 5px;    ←這裡是設定圖片的起始位置,35px是和左邊的距離,設成和小圖的寬度一樣就可以從小圖結束後再出現底圖,5px是和上邊的距離,可以依照你的需要而設定,如果不要就打0px。
    }
    /*文章標題名稱*/
    span.titlename{
     font-size:16px;
     color:#894040;
    background-image:url(http://e.blog.xuite.net/e6/e2/12304732/blog_22501/txt/4713116/13.jpg);
    background-repeat:no-repeat;    ←小圖不重複
    background-position:left;   ←這是圖片放置的位置,我設在左邊
    font-weight:bold;   ←文章標題字的粗細
    height:35px;
    padding-top:10px;   ←標題名稱與上邊的距離
    padding-left:35px;   ←標題名稱與左邊的距離,與圖片寬度相同
    }



    安哥爾.摩亞 / Xuite日誌 / 回應(12) / 引用(0) / 好文轉寄
  • 回應