睡蓮‧池水間

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

文章 :: 語言集

文章列表　 全部　

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

文章

更多...
  • 嵌入式內聯圖片
    睡蓮　 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...
  • PHP 沈思錄之三：Smarty
    睡蓮　 12/5/10 14:40　 閱讀: 24
    這是收藏已久的好文章，不過因為是簡中用語，我儘量將它轉成繁中用語，讓更多人了解 Smarty。若有用語不正確的地方歡迎指正。分隔線作者：左輕侯 | 原文出處：http://www.bloggern.com/2414.htm　　在任何Web應用中，如何將程式碼和界面設計，或者說，將邏輯層和表現層分離開來，都會是一個問題。對於 PHP 這種類型的嵌入網頁的程式語言，這一問題尤其突出。在新手編寫的代碼中，把連接資料庫的代碼和操縱 HTML 元素的代碼寫在同一個頁面裏，是很常見的情況。為了避免這一問題，開發者傾向於將涉及業務邏輯(business logic)的代碼封裝在某些單獨的函式庫檔案中，再在負責顯示界面的檔案中將它們 incl...
  • Chrome 的 CSS bug
    睡蓮　 11/7/14 1:10　 閱讀: 236
    　　最近為 XOOPS 正體中文站討論區加裝票選模組並在測試站下用不同瀏覽器進行檢視，以測試嵌入於帖子中的票選內容是否正常，郤發現帖子上的標題不見了，由此便得知 Chrome 一直存在的 CSS bug。　　Chrome 的問題很怪異，即使跟 Chrome 同一核心引擎的 Safari ，也不會出現如 Chrome 的 CSS bug，加上只在特定的文字如「關」字並配合 CSS 中的 text-shadow，便會發揮作用，把標題文字「關」起來不讓看得見，只在骨子底下的原始碼裡顯露出來。　　如果閣下有裝 Chrome 瀏覽器的話可以點這裡開啟小視窗(Chrome下請自行用滑鼠將小視窗拉高)，將下面代碼全複製進去測試看看，然後換別的瀏覽器再試。<!DOCTYPE ht...
  • CSS3 Media Queries 詳解
    iifksp　 10/8/29 20:25　 閱讀: 761
    CSS3 Media Queries 詳解 - 上
    CSS3 Media Queries 詳解 - 下
  • 你需要知道的CSS3動畫技術
    Tim Wright　 10/5/30 1:00　 閱讀: 1671
    譯序：本文譯自Smashingmagazine，但是原文講述的內容有些淺，也不是很完整，前端觀察在翻譯的前提下，增加了更多的更系統的內容。如有不足之處，歡迎指正補充。

    譯文出處：前端觀察 - http://www.qianduan.net/what-you-need ... about-behavioral-css.html
  • IE 7 下慎用 :first-letter 偽元素
    睡蓮　 10/5/30 1:37　 閱讀: 188
    　　不久前在正體中文站替一位網友解決 IE 8下佈景問題時，發現用 IE 7 及 6 版本進入網站，CPU 會飈高，持續載入中的空白畫面久久沒有回應，被逼要中止程式，而 IE 8 及其他瀏覽器就無此問題。( 補註：更正為只有 IE 7版本，IE 6 的於後來經再測試後確定無問題。) 　　是什麼原因導致 CPU 飈高？這是繼上次替網友測試某專業佈景網站所提供的佈景而發現<title>排序問題後的另一個挑戰自己的難題 ... 　　在我的認知裡，會因佈景問題造成 CPU 飈高的，大多是出在 javascript 上，但在網友提供某免費佈景網站的佈景裡，除了引用一條 js 檔不存在的死連結外，根本就沒有用到任何 javascript。眼看 theme.h...
  • HTML 5 新功能演示
    Marcin Wichary　 10/4/29 14:29　 閱讀: 684
    譯者：Direct Guo這是一個 HTML 5 的新功能的演示文檔，幾乎包括 HTML 5 的所有激動人心的新功能的簡介和演示。IE 瀏覽器系列瀏覽器無法瀏覽，firefox、opera 等瀏覽器只能使用部分功能，如果想100％演示成功，請使用最新版的“谷歌瀏覽器（Google Chrome）”，建議使用最新版。英文原版： http://apirocks.com/html5/html5.html中文版演示文檔請看此處： http://directguo.com/html5/
  • CSS 3 變換入門
    Jason Cranford Teague　 10/2/2 1:32　 閱讀: 512
    本文譯者：神飛　　譯文出處：前端觀察 - http://www.qianduan.net/css-transitions-101.html　　儘管人們期望在屏幕上有些改變，但是 CSS 和 HTML 對頁面中的交互能做的實在太少了，而那些還需要用代碼來實現。 　　比如一個鏈接要麼是這個顏色，要麼是那個顏色；一個文本區域要麼這麼大，要麼那麼大；一張圖片要麼是透明的要麼是不透明的；它們是從一個狀態直接變到另一個狀態——中間並沒有過渡。 　　這導致大部分網頁有些生硬，因為元素只會很死板的切換或改變。 　　是的，你可以使用 DHTML、jQuery 或者自己編寫 JS 來實現過度，但是這需要更多的代碼來實現本應該非...
  • 使用 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...
  • 於文章中嵌入自訂的FLV/MP4播放器
    睡蓮　 09/11/11 0:40　 閱讀: 971
    　　在網上隨處閒逛，不難見到大多網站尤其是網誌都有在文章內容上插入 YouTube 影片，有些還看到影片原作者利用 YouTube 空間，將自製而成的影片上傳到 YouTube，然後複製代碼，嵌回到自己的網站去。　　 YouTube 的存在，帶擎了 FLV 格式的盛行，而緊隨其後的會是 YouTube 的高畫質 ─── MP 4 格式。 　　現在，要將自製的 FLV 或 MP4 格式影片直接上傳到自己的網站空間上播放，不需要 YouTube，只要有播放器就能輕易實現，還可按個人喜好設定，在不同的文章內容上使用不同的播放器外觀。　　網上提供不少的免費播放器中，被我看上並做了實際測試的有兩個，一是 Vcastr 的， 另一是 MC Altair，最終應...
  • 用 CSS 3 將你的設計帶入下個高度
    睡蓮　 09/6/27 16:11　 閱讀: 1164
    用 CSS 3 將你的設計帶入下個高度 - 1
    用 CSS 3 將你的設計帶入下個高度 - 2
    用 CSS 3 將你的設計帶入下個高度 - 3
  • 如何在 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; ...
  • 解決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...
  • Firefox和IE之間7個JavaScript的差異
    Impressive Webs　 09/5/26 23:52　 閱讀: 2621
    譯者：糖伴西紅柿 譯文出處：www.qianduan.net/between-firefox-and-ie-differences-7-javascript.html 盡管 JavaScript 歷史上使用冗長而令人生厭的代碼塊來標的特定瀏覽器的時期已經結束了，但是偶爾使用一些簡單的代碼塊和對象檢測來確保一些代碼在用戶機器上正常工作依然是必要的。 這篇文章中，我會略述一下 Internet Explorer 和 Firefox 在 JavaScript 語法上不同的 7 個方面。 1. CSS “float” 屬性 獲取給定對象的特定 CSS 屬性的基本語法是 object.style 屬性，而且有連字符的屬性要用駱駝命名法來代替。例如，獲取一個 ID 為 “header” 的 div 的 background-color 屬性，我們要用如下語法：document.getElementById("he...
  • 難以發現的 CSS 問題
    睡蓮　 09/4/6 14:44　 閱讀: 479
    話說昨天在Opera瀏覽器下為池水間進行網站優化和代碼改良時，間隔了一段長時間才去打開firefox檢視一下網站，這下不看猶自可，一看嚇了一跳，在firefox下的池水間變得面目全非，馬上打開其他瀏覽器查看，結果safari也是和firefox一樣有問題，只有opera和IE都正常，這是怎麼回事了？從firefox和safari出現的徵狀來看，似乎是瀏覽器在解析CSS語法上出問題，打開CSS查看了語法，來回檢查了好幾遍，偏偏就沒有找到錯漏之處，連CSS檔的編碼也是正確的utf8。正當百思不得其解之際，我的視線不經意地落在頁腳左邊W3C的CSS驗證連結上，頓時靈光一閃，利用這驗證工具查看，在W3C驗證結果頁面下的CSS立時現形。...
  • 提升網站效能的 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 設定不同背...
  • 註釋在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">↓這就是多出來的那...
  • HTML 5 的結構和語義
    睡蓮　 09/3/9 20:39　 閱讀: 656
    前言（一）
    結構（二）
    語義性的塊級元素（三）
    語義性的內聯元素（四）
    內嵌媒體（五）
    交互（六）
  • 完美的頁腳固定法
    睡蓮　 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
  • 優先等級的行內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"> /*<...

1 2 »

最 新 發 表 及 資 訊 區

最新公告

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

文章分類

最新浮生錄文章

最新留言

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

前往萍踪留影

造訪統計

今天：44
昨天：362
本週：1878
本月：11894
總計：433131
平均：311

連結

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