背景語法

要更改時 強烈建議你 先將語法-全選-複製 起來 用word先備份 以防萬一 請從-管理部落格進入-選面板設定-選自訂樣式 會出現css語法 最佳奇摩背景圖尺寸1003X640像素 最佳標題橫框圖尺寸750X103像素-這尺寸可在CSS語法變更 我要留言尺寸-520X52像素-沒時間測試 還不知道最佳尺寸 ↑這尺寸也可在CSS語法變更 背景 橫框圖片必須是放置在網路空間的圖片 不行用自己電腦內的圖片 不行用各部落格相簿內的圖片(放在奇魔部落格內的照片可以使用,但會有圖檔太小的困擾) 需上傳圖片請參考 免費上傳圖片網教學 http://tw.myblog.yahoo.com/monkey_014148/article?mid=669 如果你沒有用進階樣式 -自訂 背景圖- 就請在第一排語法中 改背景圖 /*Background*/ body{background:#FFFFFF url(http://tw.yimg.com/i/tw/blog/skin3/bg2.jpg) repeat-x;} 如果你跟我一樣 有用進階樣式 -自訂 背景圖] 請在這更改背景圖 /*Background image for whole page*/ body {background-image: url(http://freebsd.chjhs.tpc.edu.tw/~94214/yo1.gif?TT062zEBw2Fyl15D); background-repeat: repeat} 標題背景圖設定-要先設定這裡 才會有標題語法出現 管理部落格進入-選面板設定-進階樣式-選標題底圖 先隨便先選一張圖 標題的橫框圖 請在這更換 /*Background image for blog title*/ #yblogtitle .mbd {background-image: url(http://freebsd.chjhs.tpc.edu.tw/~94214/yo3.gif?TT062zEBTY6JKjzB); background-repeat: no-repeat} 我要留言 的說話橫框圖 請在最後一排語法 內更換 /*Opacity for blast*/ #yblast .bg {zoom:1; filter:alpha(opacity:100); background: url(http://freebsd.chjhs.tpc.edu.tw/~94214/yo2.gif) no-repeat} 我也測試過 奇摩這不支援swf 動畫檔 轉圖檔教學 http://freebsd.chjhs.tpc.edu.tw/~94214/8-9.htm 可用來做奇摩部落格橫扁背景圖素材 http://tw.myblog.yahoo.com/monkey_014148/article?mid=388 亮麗唯美閃圖動畫背景圖 http://tw.myblog.yahoo.com/monkey_014148/article?mid=156 GIF動畫調整影像尺寸- 開啟Ulead GIF Animator -按編輯-選改變影像大小 JPG調整影像尺寸- 開啟PhotoImpact -按調整-選調整大小 ---------------------------- 測試心得： 自由欄位-可以接受GIF、 連結語法 -不接受MP3 、SWF動畫檔、影片檔 文章影音部份-一篇文章只接受一則影音 目前測試到可接受這3種網頁影音 MP3部分還沒測試完成 目前我測試的方法都失敗 奇摩-影音蒐集網 http://video.yahoo.com/ YouTube-MV蒐集網-目前維修當機狀態 http://www.youtube.com/results?search=%E4%BC%8D%E4%BD%B0&search_type=search_videos google-影音蒐集網 http://video.google.com/ 基本語法解釋： background-repeat:no-repeat /*背景不重覆*/ background-repeat:repeat-x /*背景在X軸方向重覆*/ background-repeat:repeat-y /*背景在Y軸方向重覆*/ background-position : right /*背景位置靠右*/ background-position : left /*背景圖靠左*/ background-position : center /*背景圖置中*/ 背景本身要夠大張(請用繪圖軟體自行設計)，才可使背景完整填滿整個頁面，不然就要用repeat語法去填充整個頁面。 利用繪圖軟體設計背景時建議圖片大小為1024X600(畫素)，相簿框的大小為120X120(畫素)。(螢幕解析度為1024X768時適用) body{ background :色碼; # /*背景底色*/ background-image : url('背景圖片網址'); /*背景圖片網址*/ background-repeat : repeat; 　 /*背景圖片重複排列*/ background-attachment: fixed; /*背景圖片固定*/ } 800*600的解析度螢幕，自製背景大小為780*440即可 在ＣＳＳ內容，找到下面這兩個項目語法，改一下網址跟固定值即可固定背景。/*Background*/　（基本設定的背景圖改成自製的背景圖） body{background:#000000 url(http://home.pchome.com.tw/good/zz14723/cloud/12-1.jpg ) no-repeat;} /*Background image for whole page*/　（自選背景圖片） body {background-image: url(http://home.pchome.com.tw/good/zz14723/cloud/12-1.jpg); background-repeat:repeat;background-attachment: fixed;}　（背景固定值為fixed CSS樣式表 語法一：使用 標籤 語法二：直接寫在標籤內 語法三：外掛方式 樣式種類 說明 background-color 背景顏色 background-image 背景圖片 border-top 設定上邊框線 border-bottom 設定下邊框線 border-left 設定左邊框線 border-right 設定右邊框線 border-color 設定邊框顏色 color 設定文字顏色 height 設定高度 width 設定寬度 text-align 對齊方式 text-decoration 文字修飾方式 font-size 字型大小 font-weight 字型粗細 background-attachment 背景是否固定 background-position 背景圖片的位置 background-repeat 重複貼圖方式 border-top-width 設定上邊框線厚度 border-bottom-width 設定下邊框線厚度 border-left-width 設定左邊框線厚度 border-right-width 設定右邊框線厚度 border-width 設定邊框厚度 border-style 設定邊框樣式 border-collapse 邊框線重疊 float 設定文繞圖 text-indent 縮排 text-transform 大小寫轉換 font-family 字型名稱 font-style 字型樣式 font-variant 大小寫變換 letter-spacing 文字間距 line-height 設定行高 list-style-type 項目符號樣式 margin 設定邊界 margin-top 設定上邊界 margin-bottom 設定下邊界 margin-left 設定左邊界 margin-right 設定右邊界 padding 設定邊距 table-layout 表格配置方式 CSS串聯樣式表教學『基礎篇』 CSS是「Cascading Style Sheets」縮寫，一般稱為【串聯樣式表】 CSS有甚麼好處呢？為甚麼要學呢？以下說明幾點你就會發現使用CSS的好處： ■它能更精確的控制網頁版面的文字、背景、字型等... ■它能讓我們只修正一個CSS文件，便可同時更新眾多的網頁版面外觀及格式。 ■它可以使用html的文件內碼更精簡，縮小檔案下載的速度。 ■適用於各種作業平台。 CSS串聯樣式表教學『文字屬性一覽』 color : #525050 /*文字色彩*/ font-family : 新細明體 /*文字字型*/ font-size : 9pt /*文字大小*/ font-style:itelic /*文字斜體*/ font-variant:small-caps/*小字體*/ letter-spacing : 1pt/*字間距離*/ line-height : 200% /*設定行高*/ font-weight:bold /*文字粗體*/ vertical-align:sub /*下標字*/ vertical-align:super/*上標字*/ text-decoration:line-through/*加刪除線*/ text-decoration:overline /*加頂線*/ text-decoration:underline /*加底線*/ text-decoration:none /*刪除連結底線*/ text-transform : capitalize /*首字大寫*/ text-transform : uppercase /*英文大寫*/ text-transform : lowercase /*英文小寫*/ text-align:right /*文字靠右對齊*/ text-align:left /*文字靠左對齊*/ text-align:center /*文字置中對齊*/ 連結屬性：『屬性分類』 A /*所有超連結*/ A:link /*超連結文字格式*/ (是代表普通狀態的連結) A:visited /*瀏覽過的連結文字格式*/ (是代表造訪過的連結) A:active /*按下連結的格式*/ (是代表按下去連結) A:hover /*滑鼠移至連結*/ (是代表滑鼠移到連結) color 是代表連結顏色 font-size 是代表連結文字大小，適用 point(pt) 或是 pixels(px) text-decoration 是代表文字樣式，none 代表沒有底線 網友分享部落格背景語法，想要換換部落格背景口味的有救了囉! 把下列背景語法貼到部落格或是播客的進階編輯CCS中即可 1.固定背景語法(適用小背景) BODY {background: white url(圖片網址);background-attachment: fixed} 2.移動背景語法(適用小背景) body{background:#4e87ff url(圖片網址) repeat;} 3.固定背景語法(適用大背景) body {background-image: url(圖片網址); background-repeat:no-repeat ; background-position : 50% 10%; background-attachment: fixed;} 4.雙重背景語法(適用大背景) /*大標題圖+純色重覆底背景*/ body {background-color:#色碼;background-image: url(圖片網址): top center; } #yblogtitle .mbd,#yblogtitle .mft{background: url(空的或圖片網址) no-repeat;} #yblogtitle .tft {margin:數字px 0px 0px 0px;} /*數字決定標題圖顯示的高度*/ 背景圖+人物+swf製作動畫語法設計: 1.先找到一張風景圖或花圖..等皆可,尺寸適中 2.人物圖...等圖(想做合併的圖)尺寸不拘 因可用語法height=圖高 width=圖寬做尺寸的縮放 style="FILTER: alpha(style=3)" 人物圖做漸層霧化處理,這樣才可以和風景圖有融合的感覺 記得在img語法中在加上定位align=right定位語法 因這樣才可以在加上flash透明動畫時,不會佔位置 若設在align=left是會佔位置的,畫面會變大很多 3.找喜歡的flash動畫,豐富語法畫面 http://blog.xuite.net/notebooklover/money/37405896