睡蓮‧池水間

Guest
2012-May-23  
有 0 位會員和 13 位訪客在線上

文章 :: 語言集

文章列表　 全部　 按標題逆序　

類型: 普通 精華 焦點 全部
排序: 預設 時間 標題 評分 閱讀 評論 引用 | 逆序 順序

文章

更多...
  • 難以發現的 CSS 問題
    睡蓮　 09/4/6 14:44　 閱讀: 479
    話說昨天在Opera瀏覽器下為池水間進行網站優化和代碼改良時，間隔了一段長時間才去打開firefox檢視一下網站，這下不看猶自可，一看嚇了一跳，在firefox下的池水間變得面目全非，馬上打開其他瀏覽器查看，結果safari也是和firefox一樣有問題，只有opera和IE都正常，這是怎麼回事了？從firefox和safari出現的徵狀來看，似乎是瀏覽器在解析CSS語法上出問題，打開CSS查看了語法，來回檢查了好幾遍，偏偏就沒有找到錯漏之處，連CSS檔的編碼也是正確的utf8。正當百思不得其解之際，我的視線不經意地落在頁腳左邊W3C的CSS驗證連結上，頓時靈光一閃，利用這驗證工具查看，在W3C驗證結果頁面下的CSS立時現形。...
  • 詳解CSS3中的屬性選擇符
    睡蓮　 08/7/6 18:10　 閱讀: 369
    詳解CSS3中的屬性選擇符 1
    詳解CSS3中的屬性選擇符 2
    詳解CSS3中的屬性選擇符 3
    詳解CSS3中的屬性選擇符 4
  • 註釋在IE中造成文字溢出的研究
    懌飛　 09/3/21 21:41　 閱讀: 338
    在藍色論壇看到這樣一篇帖子 《IE中發現新BUG “重影”》，覺得很有意思。於是在想到底是什麼原因造成的呢？便做了以下測試：實驗代碼如下:( 按此打開實驗板 ) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml ... nal.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>多了一隻豬</title> </head> <body> <div style="width:400px"> <div style="float:left"></div> <!-- --> <div style="float:right;width:400px">↓這就是多出來的那...
  • 解決IE 7、8下的 object 框線問題
    睡蓮　 09/6/1 15:42　 閱讀: 932
    iframe 是最常見的網頁嵌入標籤，但到了XHTML 1.0 Stict 之下，這種標籤便不允許使用了。需要嵌入網頁，可以用object標籤取替之。 object標籤用途廣，除了可嵌入網頁、媒體外，還可取代 img標籤之用等。但IE對object的支援尚不完全，即使是開始支援網頁標準的最新版IE 8，仍有不完美的地方。 例如在取代 iframe 作為網頁嵌入上，標準瀏覽器下可以給object設定為border:none以去除框線，但在IE下是無效。IE的各個版本中，IE 6甚或較低版本的IE5.5可以改為通過在嵌入的網頁裡頭設定html與body為border:none，較高的兩個版本還不行，依然顯示礙眼的框線。 標準瀏覽器IE 6 / IE5.5IE 7IE 8 object { border:none }YNNN h...
  • 用 CSS 3 將你的設計帶入下個高度
    睡蓮　 09/6/27 16:11　 閱讀: 1164
    用 CSS 3 將你的設計帶入下個高度 - 1
    用 CSS 3 將你的設計帶入下個高度 - 2
    用 CSS 3 將你的設計帶入下個高度 - 3
  • 煞風景的Safari
    睡蓮　 08/7/23 1:50　 閱讀: 129
    　　Safari 瀏覽器有一特色就是在輸入帳號密碼或發文時，輸入框周邊會出現藍色的邊邊，這早在過去自架的另一個網站就有發現了，當時的網站佈景主題是以藍色為主調，所以無甚影響。但這次為池水間所做的佈景主題顏色，與Safari的藍色邊框顯得很不協調，越看越覺討厭，立時動手去之為快。　　過去我在緣聚時曾經做過瀏覽器測試的短片，內容就有針對Safari的藍邊框做處理，主要是測試瀏覽器對CSS 的Pseudo-Classes和Pseudo-Elements的支援度，對Safari所做的Hack並不適合走網頁標準路線的池水間，可以不Hack的就儘量不Hack，否則便不能通過W3C標準驗證。其實要去掉藍邊框是不需要什麼Hack的，只要加入如...
  • 於文章中嵌入自訂的FLV/MP4播放器
    睡蓮　 09/11/11 0:40　 閱讀: 971
    　　在網上隨處閒逛，不難見到大多網站尤其是網誌都有在文章內容上插入 YouTube 影片，有些還看到影片原作者利用 YouTube 空間，將自製而成的影片上傳到 YouTube，然後複製代碼，嵌回到自己的網站去。　　 YouTube 的存在，帶擎了 FLV 格式的盛行，而緊隨其後的會是 YouTube 的高畫質 ─── MP 4 格式。 　　現在，要將自製的 FLV 或 MP4 格式影片直接上傳到自己的網站空間上播放，不需要 YouTube，只要有播放器就能輕易實現，還可按個人喜好設定，在不同的文章內容上使用不同的播放器外觀。　　網上提供不少的免費播放器中，被我看上並做了實際測試的有兩個，一是 Vcastr 的， 另一是 MC Altair，最終應...
  • 提升網站效能的 CSS Sprites
    睡蓮　 09/4/5 0:20　 閱讀: 810
    近來在為池水間進行網站優化，將XHTML和CSS代碼改良，其中CSS就首次使用了CSS Sprites技術，以提升網站效能。什麼是CSS Sprites？就是將多個圖片匯集到一個大圖片上，然後在CSS裡將每個使用不同背景圖路徑全部劃一改為集成圖片路徑，並給每個背景圖定位。例如下面的無序列表，每一個 li 標籤分別用五個不同背景圖： <ul> <li class="image1"> image1 背景 </li> <li class="image2"> image2 背景 </li> <li class="image3"> image3 背景 </li> <li class="image4"> image4 背景 </li> <li class="image5"> image5 背景 </li> </ul> 在CSS裡給每個 li 設定不同背...
  • 我的 CSS 3 測試手記
    睡蓮　 09/1/11 17:10　 閱讀: 374
    先看看以下的測試成品，可按圖放大觀看：中間白色部份是一個沒有設定寬度的區塊，可以在不同瀏覽器解析度下有不同的寬度。透明的白背景，一般最先想到的是用 opacity 和 IE 的 filter 屬性，帶雙白邊的圓角或許會想到用背景圖片，但在支援 CSS 3 的瀏覽器下，不需使用前述也能有相同的效果，而 XHTML 下的結構性代碼也因 CSS 3 的支援而簡化了不少。此次測試中，至目前為止暫時只有 firefox 3.0.5、safari 3.1.2和 Chrome 1.0.154.36 支援，其中圓角效果是通過私有屬性來達成；opera 9.63在圓角和透明背景上尚未能支援，但在 Opera 10 中除了 border-radius 外將會支援這種透明背景；IE 能支援 CSS 3 的就更少了。現在...
  • 嵌入式內聯圖片
    睡蓮　 12/5/19 15:51　 閱讀: 12
    　　嵌入式內聯圖片是將編碼後的資料類型小圖片用 Data URL 寫入檔案中，例如在 css、html、js...等，相對於以往慣用透過連結方式引入圖片，其好處是減少 HTTP 請求，提升網站速度。但編碼後的圖片會使檔案變得肥大，要啟用 GZIP 壓縮( GZIP Components)，伺服器端在收到 HTTP 請求(HTTP Requests)後(例如含 base64 的 CSS 檔案)，會先行壓縮檔案內容，然後才傳送到客戶端。　　IE 9 版本支援 Data URL；IE 8 雖支援但有大小限制，編碼後的內容不能大於32KB；IE 7 支援與否視乎核心版本，不支援 Data URL 的可以用 MHTML 方案來解決。　　以下是各 IE 核心下的支援測試結果：IE 9 核心IE 9IE 8 模式IE 7 模式相容性檢視Data URLyesye...
  • 完美的頁腳固定法
    睡蓮　 09/2/12 21:37　 閱讀: 483
    頁面由上至下包含header、main和footer這樣佈局的網站隨處可見，但當main內容不足導致頁面高度少於瀏覽器的時候，頁面底部便會留下空白位。遇到此問題時可以參看這個值得推荐的範例網站 -- CSS Sticky Footer，該站所提供的完美解決方案，幾乎所有瀏覽器都支援，無論main內容再怎麼少、螢幕解析度再怎麼大，footer都會固定在最底部。範例演示站：http://www.cssstickyfooter.com/觀看CSS代碼：http://www.cssstickyfooter.com/style.css觀看HTML代碼：http://www.cssstickyfooter.com/html-code.html用法：http://www.cssstickyfooter.com/using-sticky-footer-code.html
  • 如何在 IE 中使用 HTML 5 元素
    懌飛　 09/6/20 23:27　 閱讀: 382
    Sjoerd Visscher 發現了一個簡潔的方法樣式在 IE 中作用到未知的元素上 —— 僅需 JS 創建此未知元素即可： document.createElement(elementName) 同理（對於 IE 來說 HTML5 元素即是未知元素），該方法也可順延到 HTML5 的元素上（詳細見：John Resig 寫的 《HTML5 Shiv》 一文）： <html> <head> <style>section { color: red; }</style> <script>document.createElement("section")</script> </head> <body> <section>Hello World!</section> </body> </html> 在 IE 中，為了更方便使用 HTML5 元素，我們可以引入這樣的腳本： (function(){ // from: http://dean.edwards.name/weblog/2007/03/sniff/ if(!/*@cc_on!@*/0) return; ...
  • 優先等級的行內CSS能駕御嗎？
    睡蓮　 09/1/21 12:55　 閱讀: 231
    下面代碼中，包含了引入CSS檔樣式表(藍字)、在<head></head>裡的嵌入式 CSS(綠字)、和行內CSS(橘字)： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http:⁄⁄www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http:⁄⁄www.w3.org/1999/xhtml" xml:lang="zh-tw" lang="zh-tw"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <title>各式CSS</title> <link rel="stylesheet" type="text/css" media="all" href="external-style.css" /> <style type="text/css"> /*<...
  • 使用 CSS3 創建動畫效果
    wlsy　 10/2/1 14:36　 閱讀: 699
    概述在 CSS3 中新增了幾個很好玩的東東：CSS Animation，CSS Transition 和 CSS Transform，顧名思義就是通過 CSS 來實現動畫，過渡和變形。它們與 HTML5 中的 canvas 能繪製動畫圖形不同，這些只能應用在已存在的元素上，但這足以讓我很興奮了，我不必要在去寫那些複雜的 JS 代碼，運用它們我能更簡單的創建自己的想要的動畫。應用前景伴隨著 CSS3 的普及，這些特性被各大瀏覽器支持也只是時間上的問題。有消息稱在 Internet Explorer 9 中將更好的支持 HTML5 和 CSS3。所以各位圍觀群眾不必擔心這只是曇花一現。以下是我就目前的瀏覽器支持狀態統計的一個表格：　　　IE8 -　　　chrome & safairfirefox 3.5.5 *(3)opera 10...
  • 你需要知道的CSS3動畫技術
    Tim Wright　 10/5/30 1:00　 閱讀: 1671
    譯序：本文譯自Smashingmagazine，但是原文講述的內容有些淺，也不是很完整，前端觀察在翻譯的前提下，增加了更多的更系統的內容。如有不足之處，歡迎指正補充。

    譯文出處：前端觀察 - http://www.qianduan.net/what-you-need ... about-behavioral-css.html
  • 中文標籤的XML
    睡蓮　 08/7/25 0:50　 閱讀: 254
    　　日前讀了勞虎的「無廢話XML」電子書，知道 XML 是可以使用中文標籤時，一直躍躍欲試，到試了後方知若已能寫XHTML Strict + CSS的話，XML其實不是如我想像般這麼難學的。　　中文標籤就是這麼樣子，是我試玩的第一個XML之作，W3C標準驗證也通過：<?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet href="xmlStyle.css" type="text/css"?> <!DOCTYPE 名片 [ <!ELEMENT 名片 (站名, 姓名, 年齡, 性別, 居住地, 興趣, 自我簡介, 網址)> <!ELEMENT 站名 (#PCDATA)> <!ELEMENT 姓名 (#PCDATA)> <!ELEMENT 年齡 (#PCDATA)> <!ELEMENT 性別 (#PCDATA)> <!ELEMENT 居住地 (#PCDATA)> <!ELEMENT ...
  • smarty實例教程 - 模板設計部份
    大師兄( teacherli )　 08/6/29 23:21　 閱讀: 684
    smarty實例教程 - 模板設計部份 - 1
    smarty實例教程 - 模板設計部份 - 2
    smarty實例教程 - 程序設計部份
    smarty實例教程 - 實例篇(一、使用PHP內置MYSQL函數)
    Smarty實例教程 - 實例篇（二、使用phplib的DB類）
  • Smarty 入門
    jaceju　 08/10/15 2:10　 閱讀: 1043
    Smarty 入門 - 1
    Smarty 入門 - 2
    Smarty 入門 - 3
    Smarty 入門 - 4
    Smarty 入門 - 5
  • PHP 沈思錄之三：Smarty
    睡蓮　 12/5/10 14:40　 閱讀: 24
    這是收藏已久的好文章，不過因為是簡中用語，我儘量將它轉成繁中用語，讓更多人了解 Smarty。若有用語不正確的地方歡迎指正。分隔線作者：左輕侯 | 原文出處：http://www.bloggern.com/2414.htm　　在任何Web應用中，如何將程式碼和界面設計，或者說，將邏輯層和表現層分離開來，都會是一個問題。對於 PHP 這種類型的嵌入網頁的程式語言，這一問題尤其突出。在新手編寫的代碼中，把連接資料庫的代碼和操縱 HTML 元素的代碼寫在同一個頁面裏，是很常見的情況。為了避免這一問題，開發者傾向於將涉及業務邏輯(business logic)的代碼封裝在某些單獨的函式庫檔案中，再在負責顯示界面的檔案中將它們 incl...
  • Opera下的text-shadow
    睡蓮　 08/10/17 20:20　 閱讀: 139
    text-shadow是從CSS 2版本開始便已有的屬性，能為字體添加模糊及陰影的效果。到目前為止只有Opera支援得最好，IE和Firefox還不支援，Safari與Konqueror則只能支援一組屬性值。 以下是一組屬性值的取值方式 屬性屬性值 水平延展　　　垂直延展　　　opacity　　　顏色 示例text-shadow:　　2px　　　　 　2px　　　　　　5px　 　　　#ff0000 多組則用逗號隔開 屬性屬性值 　　　　第一組　　　　　第二組　　　　　第三組 示例text-shadow:-1px 1px 5px #ff0000, 2px -2px 10px #336699, -3px 3px 15px #999999 在多組屬性值下的Safari和Konqueror，只對第一組有效，後面幾組無效。 以下是多組屬性值的代碼示...

1 2 »

最 新 發 表 及 資 訊 區

最新公告

此為池水間 banner ，需要安裝 Adobe Flash Player 才能觀看內容。

文章分類

最新浮生錄文章

最新留言

最新留言：2012-Jan-6　11:13am
留言編號：76
留言者： wuji888
網主回覆： 有
總留言數： 71

前往萍踪留影

造訪統計

今天：48
昨天：362
本週：1882
本月：11898
總計：433135
平均：311

連結

Powered By XOOPS
Valid XHTML 1.1
Valid CSS 3
除另有註明外，本站內容均採用 Creative Commons 姓名標示-非商業性-相同方式分享 3.0 授權條款授權
登 入