題:
[CSS]天空部落樣式設定問題
?
2011-09-02 14:20:03 UTC
大大好ˇ~ 我想請問
圖片參考:http://imgcld.yimg.com/8/n/AC02157169/o/151109020333713872152820.jpg

之前大大說這個圖的大小是寬960PX的圖檔,那請問旁邊頻道的部分是多大呢??該如何知道??(因為要製圖卻不知道那個區域的那小)
另外還有
圖片參考:http://imgcld.yimg.com/8/n/AC02157169/o/151109020333713872152831.jpg

就是這個地方的分格線,製作的大小和要放在CSS的什麼地方呢??
麻煩大大囉~~如果不懂我說什麼意思的再麻煩告知一聲~~感恩:)))
三 答案:
?
2011-09-07 20:46:44 UTC
Dear 亞 ~



上次有說這個 banner 是兩張圖片接起來的效果唷!也就是說,倘若要更換右邊的「超連結」區塊背景圖,您必須製作兩張圖檔。「超連結」區塊尺寸標註如下:





圖片參考:http://a.imageshack.us/img192/2715/topbartc.png





上面 960 x 31 + 下面 960 x 449





圖片參考:http://a.imageshack.us/img820/3664/bannerwa.png





原始圖檔並沒有如上範例圖的紅色框線,為避免與知識問答版面的白色背景混淆,所以我加上紅色框線是為了讓您看清楚原始圖檔其實有白色邊線。



請進入〔樣板設定〕→〔編輯CSS檔〕→ 按鍵盤上的〔F3〕尋找 #topbar(樣式表中符合 #topbar 字元會亮度標示)→ 找到以下語法:



#topbar{

height:31px;

background: url(http://pics.yamedia.tw/themes/dream_new/images/topbar.jpg) top left no-repeat;

padding: 5;

width: 100%;

}



接著再尋找 #banner → 找到以下語法:



#banner {

width: 100%;

height: 449px;

background: #FFFFFF url(http://pics.yamedia.tw/themes/dream_new/images/banner.jpg) no-repeat;

color: #FFFFFF;

}



複製以上語法中標示紅字的圖片網址貼在瀏覽器上方網址欄中 → 按下〔Enter〕→ 待圖片出現後,滑鼠對著圖片按右鍵〔圖片另存新檔〕→ 把圖片儲存至您的電腦資料夾中





圖片參考:http://a.imageshack.us/img43/6376/62805451.png





如果不知道如何測量網頁中的元素尺寸,

圖片參考:http://tw.img.webmaster.yahoo.com/247611/ystats.gif

把圖片下載至電腦後使用修圖軟體進行『剪裁』就能得知您要的某一塊圖像的尺寸是多少囉!或者是直接用原圖修改也是方法之一。



圖片修改完成後上傳至您的 yam 天空相簿,再把圖片網址取代上面語法中的圖片網址即可!圖片外連網址取得方法請參閱

圖片參考:http://i661.photobucket.com/albums/uu331/lv_photo/i1.gif

官方公告



另外,您所謂的「分格線」問題,您看到的那一條線並不是圖片喔,它是語法產生的效果!請找到以下CSS:



.post_info {

padding: 10px;

text-align: right;

clear: both;

border-bottom:1px solid #000;

}



語法中的 1px solid #000; 是設定這一條線的寬度、框線樣式、框線顏色!請複製 background:url(http://i.imm.io/8VvZ.gif) repeat-x 0 100%; 取代 .post_info 原來的 border-bottom:1px solid #000; 看結果:





圖片參考:http://a.imageshack.us/img847/9260/77036231.png





下框線的寬度是 685px,不過不需要製作 685px 的分隔線,用語法來控制分隔線的水平方向重複排列即可。同樣是上傳您自製的分隔線圖片後,把圖片網址取代上面標示紅字的範例圖片網址 http://i.imm.io/8VvZ.gif 就大功告成囉!



試試看吧!希望不會感到太複雜~ ^_^
?
2012-06-15 15:57:07 UTC
第壹零壹個問答評價 感謝知識長的回答



按圖文索驥 就沒有完成不了的事
問題管理員
2011-09-12 14:23:04 UTC
無最佳解答


此內容最初發佈在 Y! Answers 上,這是一個於 2021 年關閉的問答網站
Loading...