睡蓮‧池水間
精華
更多...
你需要知道的CSS3動畫技術 10/5/30 1:00
譯序：本文譯自Smashingmagazine，但是原文講述的內容有些淺，也不是很完整，前端觀察在翻譯的前提下，增加了更多的更系統的內容。如有不足之處，歡迎指正補充。
譯文出處：前端觀察 - http://www.qianduan.net/what-you-need ... about-behavioral-css.html
譯文出處：前端觀察 - http://www.qianduan.net/what-you-need ... about-behavioral-css.html
文章
更多...-
- CSS3 Media Queries 詳解
- CSS3 Media Queries 詳解 - 上
CSS3 Media Queries 詳解 - 下
-
- IE 7 下慎用 :first-letter 偽元素
- 不久前在正體中文站替一位網友解決 IE 8下佈景問題時，發現用 IE 7 及 6 版本進入網站，CPU 會飈高，持續載入中的空白畫面久久沒有回應，被逼要中止程式，而 IE 8 及其他瀏覽器就無此問題。( 補註：更正為只有 IE 7版本，IE 6 的於後來經再測試後確定無問題。) 是什麼原因導致 CPU 飈高？這是繼上次替網友測試某專業佈景網站所提供的佈景而發現<title>排序問題後的另一個挑戰自己的難題 ... 在我的認知裡，會因佈景問題造成 CPU 飈高的，大多是出在 javascript 上，...
-
- HTML 5 新功能演示
- 譯者：Direct Guo這是一個 HTML 5 的新功能的演示文檔，幾乎包括 HTML 5 的所有激動人心的新功能的簡介和演示。IE 瀏覽器系列瀏覽器無法瀏覽，firefox、opera 等瀏覽器只能使用部分功能，如果想100％演示成功，請使用最新版的“谷歌瀏覽器（Google Chrome）”，建議使用最新版。英文原版： http://apirocks.com/html5/html5.html中文版演示文檔請看此處： http://directguo.com/html5/
-
- CSS 3 變換入門
- 本文譯者：神飛 譯文出處：前端觀察 - http://www.qianduan.net/css-transitions-101.html 儘管人們期望在屏幕上有些改變，但是 CSS 和 HTML 對頁面中的交互能做的實在太少了，而那些還需要用代碼來實現。 比如一個鏈接要麼是這個顏色，要麼是那個顏色；一個文本區域要麼這麼大，要麼那麼大；一張圖片要麼是透明的要麼是不透明的；它們是從一個狀態直接變到另一個狀態——中間並沒有過渡。 這導致大部分網頁有些生硬，因為元素只會很死...
-
- 使用 CSS3 創建動畫效果
- 概述在 CSS3 中新增了幾個很好玩的東東：CSS Animation，CSS Transition 和 CSS Transform，顧名思義就是通過 CSS 來實現動畫，過渡和變形。它們與 HTML5 中的 canvas 能繪製動畫圖形不同，這些只能應用在已存在的元素上，但這足以讓我很興奮了，我不必要在去寫那些複雜的 JS 代碼，運用它們我能更簡單的創建自己的想要的動畫。應用前景伴隨著 CSS3 的普及，這些特性被各大瀏覽器支持也只是時間上的問題。有消息稱在 Internet Explorer 9 中將更好的支持 HTML5 和 CSS3。所以各位圍觀群眾不必擔心...
-
- 於文章中嵌入自訂的FLV/MP4播放器
- 在網上隨處閒逛，不難見到大多網站尤其是網誌都有在文章內容上插入 YouTube 影片，有些還看到影片原作者利用 YouTube 空間，將自製而成的影片上傳到 YouTube，然後複製代碼，嵌回到自己的網站去。 YouTube 的存在，帶擎了 FLV 格式的盛行，而緊隨其後的會是 YouTube 的高畫質 ─── MP 4 格式。 現在，要將自製的 FLV 或 MP4 格式影片直接上傳到自己的網站空間上播放，不需要 YouTube，只要有播放器就能輕易實現，還可按個人喜好設定，在不同的文章內容上使用不同的播放...
-
- 用 CSS 3 將你的設計帶入下個高度
- 用 CSS 3 將你的設計帶入下個高度 - 1
用 CSS 3 將你的設計帶入下個高度 - 2
用 CSS 3 將你的設計帶入下個高度 - 3
-
- 如何在 IE 中使用 HTML 5 元素
- 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 中，為了更方便使用...
-
- 解決IE 7、8下的 object 框線問題
- iframe 是最常見的網頁嵌入標籤，但到了XHTML 1.0 Stict 之下，這種標籤便不允許使用了。需要嵌入網頁，可以用object標籤取替之。 object標籤用途廣，除了可嵌入網頁、媒體外，還可取代 img標籤之用等。但IE對object的支援尚不完全，即使是開始支援網頁標準的最新版IE 8，仍有不完美的地方。 例如在取代 iframe 作為網頁嵌入上，標準瀏覽器下可以給object設定為border:none以去除框線，但在IE下是無效。IE的各個版本中，IE 6甚或較低版本的IE5.5可以改為通過在嵌入的網頁裡頭設定html與bo...
-
- Firefox和IE之間7個JavaScript的差異
- 譯者：糖伴西紅柿 譯文出處：www.qianduan.net/between-firefox-and-ie-differences-7-javascript.html 盡管 JavaScript 歷史上使用冗長而令人生厭的代碼塊來標的特定瀏覽器的時期已經結束了，但是偶爾使用一些簡單的代碼塊和對象檢測來確保一些代碼在用戶機器上正常工作依然是必要的。 這篇文章中，我會略述一下 Internet Explorer 和 Firefox 在 JavaScript 語法上不同的 7 個方面。 1. CSS “float” 屬性 獲取給定對象的特定 CSS 屬性的基本語法是 object.style 屬性，而且有連字符的屬性要用駱駝...
-
- 提升網站效能的 CSS Sprites
- 近來在為池水間進行網站優化，將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=&qu...
-
- 註釋在IE中造成文字溢出的研究
- 在藍色論壇看到這樣一篇帖子 《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&q...
-
- HTML 5 的結構和語義
- 前言（一）
結構（二）
語義性的塊級元素（三）
語義性的內聯元素（四）
內嵌媒體（五）
交互（六）
-
- 完美的頁腳固定法
- 頁面由上至下包含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.cssstick...
-
- 優先等級的行內CSS能駕御嗎？
- 下面代碼中，包含了連結CSS(藍字)、嵌入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="...
-
- 我的 CSS 3 測試手記
- 先看看以下的測試成品，可按圖放大觀看：中間白色部份是一個沒有設定寬度的區塊，可以在不同瀏覽器解析度下有不同的寬度。透明的白背景，一般最先想到的是用 opacity 和 IE 的 filter 屬性，帶雙白邊的圓角或許會想到用背景圖片，但在支援 CSS 3 的瀏覽器下，不需使用前述也能有相同的效果，而 XHTML 下的結構性代碼也因 CSS 3 的支援而簡化了不少。此次測試中，至目前為止暫時只有 firefox 3.0.5、safari 3.1.2和 Chrome 1.0.154.36 支援，其中圓角效果是通過私有屬性來達成；opera 9.63在圓...
-
- IE 下 href 的 BUG
- 在瀏覽器 IE6 、IE7、Firefox2+、Firefpx3+、Opera9.6+、Safari3.1+中測試以下代碼（Demo）：<div id="test"> <a href="#"> test </a> </div> <div id="result"></div> <script type="text/javascript"> (function(){ var test = document.getElementById('test'); alert(test.innerHTML); var result = document.getElementById('result'); result.innerHTML = test.innerHTML; alert(result.innerHTML) })(); </script> 結果會發現，在 IE6、IE7 瀏覽器中第二次彈出的 result.innerH...
-
- HostGator 的 inodes
- 建立查看inodes工具
新CPanel界面下的Indoes統計表
-
- Opera下的text-shadow
- 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, -...
最 新 發 表 及 資 訊 區
軒榭亭臺最新連結
會在模組開放後放出
會在模組開放後放出
前往軒榭亭臺
- 回覆：求助：XOOPS 2.4.2 模組更新沒反應與自訂區塊修改及刪除無作用 howardz09月03日 下午 10:04 + 11小時
- 回覆：安裝過程出現錯誤訊息 pp10609月01日 下午 10:18 + 11小時
- 回覆：neoyijing佈景正式版釋出! yunfun09月01日 上午 09:33 + 11小時
- 請問如何消除圖片跑馬燈檔名 shyping08月31日 下午 09:41 + 11小時
- 拜託幫忙推薦Xoops 2.3.3b能用的Blog模組？ foxhook08月31日 下午 02:00 + 11小時
造訪統計
- 今天：137
- 昨天：298
- 本週：1888
- 本月：1030
- 總計：196711
- 平均：257
連結
本站連結logo
需要本站連結logo圖者可點按這裡前往下載。
