HTML & CSS 網誌庫存

0

[CDNJS] 使用JS的CDN為網站分擔流量並加速

開發網頁或設計網頁的時候經常會使用一些公開的免費JS或CSS檔

比如 jQuery 等等

大家一般都可以在官方或者Google API(Google Code)找到外連檔鏈結入

其實除了Google以外還有其他選擇,今天就推薦其中一個給各位。

英文官方:http://cdnjs.com/

中文官方:http://zh-tw.cdnjs.com/

除了常見的jquery 和 jquery UI 等等,甚至連ckeditor的相關文件都可以引入

注:雖然名字叫做CDNJS,但是其實有很多CSS都可以經由這個網站引入,各類型的bootstrap都有

CDNJS簡介:

CDNJS是使用cloudflare這個雲服務的,也是較為知名的,速度在香港,台灣等等連線都有不錯,不過在中國連線很不太穩定,中國用戶多的話不建議使用,較早前甚至不能連線。
為什麼我推薦要使用多個CDN分流?

其實或許說我迷信吧,又或者說我是極端分子,當我開發的網站是預計很多用戶的話,那怕是0.001秒的載入我都會很在意。

我個人做法是,網站上自己寫的js及css當然只能放在自己網站上引入,但只要是常用的JS或CSS,我都會考慮使用這一類CDN引入

個人迷信 :

比如一個頁面有6個JS, 4個CSS,一個用戶連線時如果全部都放在我自己的主機上,用戶除了要在同一個連線讀取這10個文件,同當還要讀取當前頁面的HTML代碼,如果是PHP的話還需要運算,再如果背後還有MYSQL等數據庫的話....即代表用戶連線你的網站時,同時載入10個JS,CSS文件還需要運算PHP(或其他程式語言)、基本的HTML,等待SQL數據庫的返回,等等....

但如果,10JS CSS個文件中,有6個是jquery ,jquery UI, bootstrap, ckeditor等等...

如果分流在google code 及 CDNJS等等的...那麼用戶將會同時連接我的網站讀取基本HTML及自己的CSS還有PHP等等,然後其他的JS CSS都使用各種CDN分流,這樣一來用戶連線的速度就更快。

以上的理論是自己幻想的,其實情況其實還要看用戶本身連線如何,不過...難度用戶連接你的主機會比GOOGLE更快嗎?

實際情況,我在較大型及複雜的網站中,使用CDN及沒有使用CDN的分別,即使沒有人流還在測試段階的時候,的確已經有「肉眼看得出」的分別。

使用與否,自己嘗試一下實際的結果吧。

標籤: ,
0

CSS 圓角生成器及基礎代碼

自CSS3開始,做圓角不必要再使用圖片。

只需要打幾行CSS就可以

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

但有如果是左上角右上角圓角,左下角右下角是正角的話,代碼就開始變得繁複一些。

所以可以使用CSS的圓角生成器節省時間

http://border-radius.com/

輸入完你要的圓角數值就會自動生成,你再加在你想變成完成的CSS中就可以
標籤:
0

[推介] Table CSS快速生成器

Table在網頁處理大量資料時還是經常用到的,在此推薦一個網站給各位

http://www.csstablegenerator.com/

個人覺得這個生成器預設的一個設定「Box Shadow 」,實在不美觀,Box Shadow即整張TABLE的陰影。

只需要在左上的方框「Table Setting」中把最底的「Box Shadow 」取消就可以了。

 進入後有多個設定可以給你調整,調至你認為無問題的時候就直接copy左下方的:CSS Code

至於html code是沒有必要的,你只需要在你已完成的Table中加入「class="CSSTableGenerator"」也就一樣可以了。

這樣的話你不用重新再做一次你的html table,這個推薦給大家很大的原因,也就是因為無修改動太多,可以將現有的TABLE美化一下。

有關TABLE與DIV....

不知什麼時候,大家開始很推崇DIV+CSS,認為這樣是最好的HTML風格。

的確DIV比TABLE排版來得好太多,以前想要做個複雜些的排版,如果沒有DIV,只用TABLE的確太煩,要在TABLE中再加入N個TABLE才能做到...

但近年來看到越來越多新學HTML的朋友越來越誇張,網站排版用DIV來完成這個是正確也是理應的,但我見過有些大型的資料表格竟然用了DIV->UL -> LI 去完成...

在排版HTML代碼時是多麻煩的一件事,在此建議一下各位朋友,某一段時間大家都拋棄TABLE,是因為出現了一個更好排版模式,可以用DIV去做,但處理資料來說,TABLE本人覺得仍然是最合理及最方便的。

如果你喜歡直接在代碼模式中輸入TABLE資料,那麼你一定明白我為什麼認為TABLE是比較輕鬆。

另外table 有些很好的網頁插件(或者說網頁特效)可以使用,也就是大家所說的JQuery , JS等等。

推薦一個,很多國外的admin template都在用:https://datatables.net

詳細如何使用,日後會再整理一篇詳細文章分別

標籤: ,
0

如何在頁面上引入其他編碼的js?

在時候會在網頁引入其他編碼的JS,直接引入包括文字顯示的JS可能發生亂碼

比如你的網站是BIG5,但引入的JS是UTF-8的話,就會亂碼,所以可以嘗試用下面的方法解決。

在代碼中加入charser="編碼" 即可

//url修改為你自己的JS檔案連結

同理,UTF-8的網頁引入BIG5的JS時就需要改用 charset="big5"

或者你說直接把某個JS轉存會自己想要的編碼即可,但如果你手上有2,3個網站,或者你引入的是別人的JS你就無法修改了。

這只是一個很普通的小知識,純粹分享及記錄一下朋友的疑問。

標籤: ,