菲彩国际

Posts Tagged ‘css-xhtml’

用CSS3創造的10個精彩案例

第四期的 ,將會留出一些時間探討《CSS3應用的時機》。我們的官方網站也用到了一些例如“標題描邊”、“按鈕圓角”的小東西。
今天看到 Joshua Johnson 的一篇
很是精彩,大概翻譯如下:

CSS3帶來了很多令人印象深刻的新功能,最有意思的或許是很多基于javascript來實現的功能,現在可以用來制作。以下是我找到的用CSS3創建的精彩案例:

注意:以下演示代碼在IE6等低端瀏覽器下無效,請下載并安裝

閱讀全文 »

通配樣式的時候不要隨意添加屬性

例如我想美化輸入框的效果:
<input type="text" name="textfield" />

避免給這樣的通配屬性:
input{background:#222; border:1px solid #4a4a49; color:#ccc; padding:1px 3px; }

否則所有的輸入框、按鈕、單選框、復選框都會跟著變化。

給通配屬性容易,再刪通配屬性,恢復input的默認值就麻煩了。
菲彩国际 如果你不幸,也犯了這種錯誤,考慮一下批量替換的方法來解決:

首先將
input{background:#222; border:1px solid #4a4a49; color:#ccc; padding:1px 3px; }
變更為
.input-beauty{background:#222; border:1px solid #4a4a49; color:#ccc; padding:1px 3px; }

然后批量替換
type="text" 變更為 type="text" class="input-beauty"type="password" 變更為 type="password" class="input-beauty"菲彩国际這樣哪個輸入框需要美化,就調用樣式,不需要就不調用。

由此,更加渴望CSS3的早日普及,將來直接用input[type=”text”]這種玩意來實現。

大流量網站,CSS為什么直接寫在頁面里?

本期 前端交流會 ,雖然討論的主題是《》。
但獲益最深的是 給延伸解釋了style放在頁面內的原因。

我對這方面一直有疑惑,為此專門請教了一下,如果僅僅是“減少并發連接數”,有必要這樣做嗎?
果然,這樣做的優點不單單如此。

沒有做筆記,大概印象如下:

這是應付超大流量的一種優化方案。
為提高速度,他們的外部連接文件一般都存儲在單獨的服務器上,例如img.****.com,如果這個服務器掛掉,整個首頁就掛掉了。放在頁面內,比較安全。用戶訪問頁面時,不會因為CSS加載不上,而造成裸頁面。

那這樣做是不是增加了維護的成本?如果寫在頁面上,不便于修改和管理。

他有可能是單獨的css文件。在頭部用include包含一個php文件,而這個php文件負責生成css文件。
實際上還是在維護一個單獨的樣式表。只是放上去的時候合并到一起。不會增加維護成本。

用PHP把CSS調用到頁面中,服務器也否也有開銷?

緩掉,首頁緩存成靜態頁。

IE7下position:relative的問題

老家的電腦是IE7瀏覽器,回來一瞅自己的博客,頂部,圖形導航鏈接全部失效。

菲彩国际回想在網上看過的一篇,大意就是,如果在IE7中使用position:relative屬性,需要在該元素的容器上,同時給予position:relative屬性。

我給了。大按鈕上的鏈接都恢復了。但是”css””js””seo”3個小按鈕上沒有鏈接。很詭異……
菲彩国际 又給了z-index屬性,這下firefox徹底復原,但是IE7依舊。

刪了z-index,將3個瀏覽器的毛病都統一,然后,在群里喊了一嗓子。
“愛得”建議將容器的定位屬性更改為position:absolute。
菲彩国际 更換后重算了top的數值,IE6/7、FF測試成功。

Page 1 of 612345...Last ?
崔凱博客
Powered by | Theme by ck web design | TOP 頂部
Copyright ? 崔凱 All rights reserved. 蜀ICP備12025891號.
菲彩国际_菲彩国际官网_Welcome 紫金阁棋牌-紫金阁棋牌官网 紫金阁棋牌-紫金阁棋牌官网 紫金阁棋牌-紫金阁棋牌官网 紫金阁棋牌-紫金阁棋牌官网