PIXNET Logo登入

Avril Note

跳到主文

電腦類筆記

部落格全站分類:不設分類

  • 相簿
  • 部落格
  • 留言
  • 名片
  • 3月 08 週一 201016:24
  • css基本設定

以下列出常用的樣式設定方式 (以 /* ... */ 標註者為說明文字):
1. 設定部落格背景 (圖片與顏色)
透過 body 內的 background 屬性設定,例如:
body { background:#000000; } /* 將背景設成黑色 */
body { background:url(圖片網址); } /* 將圖片網址設成背景 */
(繼續閱讀...)
文章標籤

avrilnote 發表在 痞客邦 留言(0) 人氣(1,120)

  • 個人分類:CSS
▲top
  • 1月 05 週二 201023:14
  • 在網頁中嵌入任意字體的解決方案-css

在網頁中嵌入任意字體的解決方案
2009-12-11 10:49:11 來源:css9.net 【大 中 小】 評論:0 條 我要投稿 我要收藏
(繼續閱讀...)
文章標籤

avrilnote 發表在 痞客邦 留言(0) 人氣(1,320)

  • 個人分類:CSS
▲top
  • 11月 17 週二 200911:44
  • 將文字替換成圖片-CSS

【語法】修改部落格標題 - 將文字替換成圖片
分類:CSS素材
2007/01/10 12:07
(繼續閱讀...)
文章標籤

avrilnote 發表在 痞客邦 留言(2) 人氣(2,397)

  • 個人分類:CSS
▲top
  • 10月 22 週四 200911:58
  • CSS-DIV圖層 被 Flash 覆蓋解決方式

DIV圖層 被 Flash 覆蓋解決方式  
ok,這篇單純是因為google下的關鍵字第一篇找不到能夠直接用的,就找自己已經完成可用的方式做個紀錄。
前面幾篇過於冗長,不必要的資料太多了..
基於有點批評,就不說我下了什麼關鍵字了。 (或許是關鍵字下的太精簡?)
照例一行關鍵字:DIV、CSS、z-index、flash、swf、圖層、覆蓋、被蓋住、遮住、absolute
相信網頁設計者會碰到使用flash時,將原本在其上的圖層蓋住,而這篇文章就是講解如何將其恢復到正常的圖層位置。
通常在越上方的圖層會將下方的圖層蓋住。
例如:
<div>我是上方圖層</div>
<div>我是banner圖層</div>
正常情況下top圖層若使用 position:absolute; ,則在相同位置時,top的資料會蓋住下方的banner圖層。
但flash通常都會浮在最上方,跳脫了原本的層次,所以下面將講解如何處理。
處理方式為將置入的object(物件)標籤 embed加入個參數 wmode="transparent" 即可。
保險的話在加入 <param value="transparent"> ,並在css上方div圖層加入z-index:10,而下方div則加入z-index:1。
看不懂對不對? 沒錯,google第一頁的就是這樣,不清不楚的。
下面例子:(使用meebo的meebo me做示範)
環境解釋:top圖層放圖片、banner圖層放flash檔。
原始:
<div><img src="logo.png" alt="logo"  href="#"  /></div>
<div>
  <object width="190" height="275" >
    <param value="http://widget.meebo.com/mm.swf?"/>
    <embed src="http://widget.meebo.com/mm.swf?" width="190" height="275"></embed>
  </object>
</div>
增加部份:(使用粗體橘字)
<div><img src="logo.png" alt="logo"  href="#"  /></div>
<div>
  <object width="190" height="275" >
    <param value="http://widget.meebo.com/mm.swf?"/>
    <param value="transparent">
    <embed  wmode="transparent"  src="http://widget.meebo.com/mm.swf?"
type="application/x-shockwave-flash" width="190"
height="275"></embed>
  </object>
</div>
------------手工分隔線-------------
簡單來說只需要在 object 標籤內加入 <param value="transparent">
並在embed標籤內,認src參數,在其加入 wmode="transparent" 即可。
而加入後也會有flash背景透明的效果。
css部份的話,可以用此方式:(也是用上方的top跟banner例子來舉例。)
連結/匯入方式
#top {
position:absolute;
z-index:10;
}
#banner{
position:absolute;
z-index:1;
}
z-index上只要數字越大,圖層將會在越上面。下方的圖層則會被上方的遮住(若為同一位置的話)。
HTML內方式
<div style="position:absolute; z-index:10;" ><img src="logo.png" alt="logo"  href="#"  /></div>
<div style="position:absolute; z-index:1;" > .... 後面省略
------------------------------------
後記:
因為meebo me widget的標題不能使用中文,本來打算使用gif檔用圖層方式覆蓋,但若使用了 wmode="transparent" ,則無法輸入中文,所以只能作罷。
(繼續閱讀...)
文章標籤

avrilnote 發表在 痞客邦 留言(0) 人氣(1,326)

  • 個人分類:CSS
▲top
  • 10月 22 週四 200911:43
  • css-面對非標準的 IE 瀏覽器,圖片撐破表單的解決方法

G4[CSS] 面對非標準的 IE 瀏覽器,圖片撐破表單的解決方法
其實以上都是閒聊...(汗)今天碰到的問題是在 Firefox 上看版面沒有問題,但是 IE 上卻發生表格被圖片撐開的情況。在全是表格的網頁上,被撐開的圖片斷層殘破不堪,實在非常有礙觀瞻;雖然大家都知道 IE 對網頁標準支援非常的不完全(wiki 寫的很含蓄:「只是有一些排版錯誤」),不過對於大部分的人來說,IE 幾乎就是瀏覽器的代名詞,所以既然有問題就還是得解決...
因為小弟經驗不足,找了半天還是找不出解決方法~後來經由 Abu 的幫忙,總算是用 CSS 解決問題囉!會發生圖片斷層的原因主要是因為圖片大小超過表單的大小,雖然我明明就把表格的高度與圖片的高度設定的一模一樣,但是好樣的 IE 就是會判斷錯誤,造成圖片斷層的問題。這個時候只要在 <img> 中加入 CSS:
<img style="float: left;" src="/sample.jpg" alt="測試圖片"/>
原本歪七扭八,七零八落的圖片就能完全契合於表格中囉!
(繼續閱讀...)
文章標籤

avrilnote 發表在 痞客邦 留言(0) 人氣(335)

  • 個人分類:CSS
▲top
  • 10月 22 週四 200910:27
  • CSS-FONT設定

Css-Font 中文排版
1、如何設定文字字體、顏色、大小 —— 使用font
font-style設定斜體,比如font-style: italic;
font-weight設定文字粗細,比如font-weight: bold;
(繼續閱讀...)
文章標籤

avrilnote 發表在 痞客邦 留言(0) 人氣(342)

  • 個人分類:CSS
▲top
1

個人資訊

avrilnote
暱稱:
avrilnote
分類:
不設分類
好友:
累積中
地區:

熱門文章

  • (29,706)細說HTML元素的ID和Name屬性的區別
  • (5,769)PHP中SESSION不能跨頁傳遞問題的解決辦法
  • (7,635)編碼問題----UTF-8轉BIG5
  • (3,689)抓取或備份整個網站-HTTrack
  • (439)smarty應用
  • (144)系統分析與設計說明文字
  • (11,142)mysql中文亂碼的原因
  • (5,204)利用PHPExcel匯出xlsx及xls檔設定說明

文章分類

  • javascript (1)
  • php-session (1)
  • php-上傳檔案 (1)
  • JQuery (0)
  • html編輯器 (1)
  • test (0)
  • php正規式 (0)
  • 圖型驗證碼 (0)
  • php函式-路徑類 (1)
  • 系統分析與設計 (1)
  • PHP-縮圖 (1)
  • 列印 (3)
  • 軟體介紹 (1)
  • PHP安全性 (1)
  • SMARTY (3)
  • PHP-亂碼問題 (1)
  • php函式 (11)
  • CSS (6)
  • MYSQL (5)
  • PHP設定 (2)
  • PHP (5)
  • JS (3)
  • W3C (1)
  • HTML (3)
  • AJAX (1)
  • 未分類文章 (1)

最新文章

  • 一系列server路徑
  • javacipt-另開視窗語法
  • php檔案上傳
  • 利用PHPExcel匯出xlsx及xls檔設定說明
  • phpexcel-將excel新增入mysql
  • css基本設定
  • 使用Javascript控制IE列印格式
  • 全選核取方塊-js
  • InnoDB 轉換步驟
  • mysql中文亂碼的原因

文章精選

文章搜尋

誰來我家

參觀人氣

  • 本日人氣:
  • 累積人氣: