Page not found

尾行禁止

Fri, 30 Oct 2009 15:35:42 +0000

不玩SEO，不明白"nofollow"的重要性，但我不想随便一个人只因留个言就得到我的"follow"，尤其是对spammer而言。以下修改仅对访客资料中的网站信息有效，添加"nofollow"属性。
ps：标题党是一种习惯，此乃是一篇严肃的装13文，认为我要写I社游戏的同学请面壁。
再ps：图片来自网络，我很纯洁的假装不知道那是啥。

===修改教程开始===
1.猛力撕开blog根目录下的inc/boblog_class_run.php文件，定位至308行，于

target=\"_blank\"

后面插入

rel=\"nofollow\"

2.目光向下游走，于410行

target=\"_blank\"

后面再次强行插入

rel=\"nofollow\"

3.保存&上传文件，左手圣经右手观世音，F5刷新blog打开源代码查看效果。

随机推荐：

dynamicBlogDescription v0.13

© Page not found | 15条评论 | feed.404cn.net | Twitter: @404cn

dynamicBlogDescription v0.13 | rssExtraInfo v0.20

Tags - 尾行 , nofollow , boblog , 修改 , diy , modify , seo

use jQuery lightBox plugin in bo-blog

Sat, 13 Jun 2009 05:48:55 +0000

前阵子做了个网站，本着“客户都喜欢花花绿绿、华而不实的东西”之原则装了jQuery lightBox plugin，用了下发现效果不错就顺手搬到bo-blog。现本着“有Blog的同学大都喜欢发骚”及“夏季是发骚的季节”之原则推出应景教程：

1. 猛击官网下载jQuery lightBox plugin压缩包，目前最新版本为0.5。
2. 解包，将css, images, js这三个文件夹上传至blog根目录（js文件夹内只用到jquery.js和jquery.lightbox-0.5.pack.js，其他两个js文件可以不传。有归类洁癖的同学可将文件夹内的文件分别上传至blog相应目录，后面添加代码时路径应作相应更改）。
3. 如下代码二选一，ctrl+c、ctrl+v于后台- 常规管理- 参数设置- 区域额外代码内：
代码一（推荐）：支持度最广，但由于对所有图片都启用了lightBox，会使“链接到网页的图片”的链接失效。

代码二：对于“链接到网页的图片”这一类型不启用lightBox，但可能存在其他兼容性问题。

4. 上传XE图片查看效果，庆祝SY(使用)成功。

备注：
1. 本方法不改动过去、现在及将来文章内容，不添加格外div，将来是否继续使用jQuery lightBox plugin对blog内容显示无任何影响。
2. js文件夹中jquery.lightbox-0.5.js，jquery.lightbox-0.5.min.js，jquery.lightbox-0.5.pack.js三个文件的区别尚不清楚，望思想进步的同志告知。（从小体积考量本站现在使用的是jquery.lightbox-0.5.pack.js）

ps:我不喜欢有人拿我的代码去做插件，然后还在插件路径上偷偷骂我。

09.07.12 Update:
修改了图片的选择器，增加了对链接到网页的图片支持

随机推荐：

© Page not found | 15条评论 | feed.404cn.net | Twitter: @404cn

dynamicBlogDescription v0.13 | rssExtraInfo v0.20

Tags - jquery , lightbox , plugin , blog-diy

Google Analytics统计数据详解

Sun, 20 Apr 2008 13:11:10 +0000

本文转自電腦玩物（墙），平民化的语言很受用，比Google Analytics自带的帮助强多了。
===================
Google Analytics 各種流量統計數據對部落格有什麼意義？

有不少訪客問過我關於Google Analytics或一些網站流量統計的問題，尤其是對於一些流量統計數據到底代表什麼意思有著不少疑惑。當然，每一個專用的數據名詞背後都有一套運算規則和它的定義，但是如果要把這些數據關連到與「個人」部落格間的關係時，那麼我會說，這些數據就是拿來「自滿」用的。請注意我說的是「一個人」自己寫好玩、寫爽的部落格，再請注意我這邊的「自滿」一詞沒有任何的貶意（可參照本季最新日劇「未來老師」中對此詞的定義），因為部落格本來就是拿來自滿用的，所以再多個可以拿來自滿的東西，那確實還真的可以增加不少樂趣啊！

滿足站長個人成就感可是一件非常非常重要的事。當你開始決定要發表「網誌」時，就代表你願意用一種特別的方式來公開個人日記、獨門消息、或專業、業餘知識，這一條分享的道路需要耐心、毅力、興趣與成就感的支持才能夠走的久遠。對於這群刻苦耕耘的站長們來說，最強大的動力補給品就是部落格的讀者，而流量統計正是為默默經營的站長，提供讀者瀏覽足跡最好的工具。

至於一個優秀流量統計服務所能展示的數字紀錄，絕對不只是瀏覽量的累積那麼簡單；一個有企圖心的站長，確實還是可以透過判讀這些數據來追蹤部落格成長因素、訪客行為變化，並規劃出某些未來發展的方向。所以下面我就以之前蒐集的資料、理解，配合Google Analytics本身的說明文件加上自己的經驗，以Google Analytics為主，來聊聊各種流量統計數據所代表的意義，說明時我會盡量避開專業的用語，而用比較形象化的方式來說明。

訪客 Vistors

流量統計最大的功能就是了解部落格讀者的習性。在訪客分析中我們可以了解訪客的真實地理位置、使用語言、電腦系統，這些資訊可以作為部落格版面設計的參考，因為友善的考慮到對讀者電腦系統的支援，才能夠留住更多訪客。

在訪客的訪問趨勢中，我們可以從訪問次數、新舊訪客比率、停留時間、退回率等資訊，來檢驗部落格的經營方針是否有達到預期的效果，這也是觀察部落格成長最有效的指標。

引用

PageView
Google Analytics用語：網頁檢視
其它可能用語：PV、瀏覽量、網頁瀏覽量、網頁展示次數、網頁點閱量

我們在講網站流量時，~~為了看起來數字比較大所以~~通常是在講PageView，又可簡稱為「PV」。PV代表站內網頁被檢索查看的總次數。這是什麼意思呢？就是說當一個讀者來到你的部落格後，看了首頁與兩篇文章，總共檢視了三個網頁，那麼你的部落格PV便會加上3。

假設部落格是一本書，那麼PV愈高，表示這本書被翻閱的頁數量愈大。而現在有許多流量分析服務會去針對部落格每個單篇文章（亦即單個網頁）來進行被瀏覽次數統計，例如我部落格右方的Spotplex，如此一來你和訪客就可以看到最常被瀏覽的熱門文章。

引用

Visit
Google Analytics用語：造訪次數
其它可能用語：到訪數、造訪數、Unique Visitor特定訪客（如Statcounter，可調整時限）、有時候可能也會被直接叫做Vistor訪客

除了PV基本上沒有爭議外，其它一些數據名詞在不同的流量統計可能有不同的算法、用法，而且同樣的用語可能在不同服務間有很大的歧異，所以必須看清楚你所使用統計服務的說明。我們這邊則以Google Analytics為主來做說明。

「造訪次數」一般被認為是查看網站行銷效果與熱門度的基本指標，對於其他統合參數來說，「Visit」也常是必要的參考值，這是因為這項數據更具體的代表了「每一次實質的到訪行為」。例如有一個體來到你的部落格看了兩三個網頁，然後離開網站，或者在短時間內（Google Analytics預設為30分鐘）重複進出你的網站，那麼這整個瀏覽過程中這位個體只會被計算為一次的Visit。但是只要超過時限，「造訪次數」就不會管個體之間是否為同一個人，都會被計算為新的一次實質造訪行為。

所以Visit可以更準確的告訴你部落格「被看到」的次數。還是假設部落格是一本書，那麼「造訪次數」愈高，表示這本書的借閱率愈高，也就是越熱門。因為在PageView中可能會有特定的讀者一次就大量的翻閱你的文章內容，這時你看到的只是所有網頁被瀏覽數的總合，而如果是「Vist造訪次數」則可以更準確的告訴你，網站每天被點進來看的實質熱門程度。

引用

Absolute Unique Visitor
Google Analytics用語：絕對特定訪客

這是Google Analytics比較特殊的一項設計，Absolute Unique Visitor（絕對特定訪客）是比Visit更嚴格的計算法。它的計算方式是：在一段特定時間內（這段時間依據你在Google Analytics上方圖表拉出的時間長度而定），不管到訪網站幾次，只要是同一個體，都只會被計算為一位絕對特定訪客，也就是不重複的讀者數量。

例如說你在Google Analytics拉出30天的檢視時間，你看到「絕對特定訪客」是10000人，「Visit造訪次數」有105000次；但是如果你把時間拉成只有一天，你卻可能看到單日的「絕對特定訪客」有3000人，而「Visit造訪次數」則有3500次。這是什麼道理呢？你把單月內每天的造訪次數加起來，會剛好等於一個月的造訪次數，但是「絕對特定訪客」卻不是這樣。這是因為「絕對特定訪客」會依據你拉出的「檢視時間」來調整，它指得是在「這段時間」裡面拜訪你部落格的「不重複訪客」數目，在某個意義上這亦代表著你「這段時間」真正的讀者數目。

以前面舉的數據為例，絕對特定訪客的意思就是說，在一個月內，你總共有10000個讀者來看過你的部落格，這些讀者有的可能只來一次，有的可能來四、五次，有的可能每天都來，但是這個月內你部落格所吸引的不重複讀者就是只有這10000個，而它們加起來的造訪次數則有十倍多的105000次。在另外一個例子中，則是說你部落格一天之內有3000個不重複的讀者。

如果繼續以部落格是一本書來舉例的話，「絕對特定訪客」就是指某段時間裡這本書被「多少個不同的人」借出去過。

引用

Vistor
Google Analytics用語：訪客
其它可能用語：無，因為這個用語在Google Analytics中是一個特殊用法，和其他統計服務的用法不盡相同。

當我們在Google Analytics中使用圖表上方的下拉選單，想要改變圖表的數據項目時，你會看到一個「Vistors 訪客」的項目，這個項目顯示的數值會比「Visit造訪次數」稍低，為什麼呢？因為這裡的「Vistors訪客」指得就是「每天的絕對特定訪客」，亦即「每日不重複訪客」數目。一般來說，Google Analytics預設會在它的圖表中優先顯示這個項目的數據。

引用

New Visitor
Google Analytics用語：New Visitor
其它可能用語：新訪客

新訪客與舊訪客，在這裡的意思更正確的說是：新訪客的訪問次數、舊訪客的訪問次數，兩者相加後就是你部落格的總訪問次數。

當然，對一個部落格來說，能夠吸引新訪客來閱讀，是持續成長不可或缺的重要因素。

P.S.以上是Google和一般網站對這個數據的解說，但是我自己的使用經驗，覺得這裡的數據比較像是「在某段時間內只造訪你部落格一次」的訪客數量，這和「第一次來你部落格」的意義其實有微妙的不同。當然這有可能是統計上某些不可跨越的侷限所致，歡迎知道更詳細資料的朋友提供意見。

引用

Returning Visitor
Google Analytics用語：Returning Visitor
其它可能用語：舊訪客、回流訪客

如果到訪的讀者之前曾經來過你的部落格，那麼統計服務就會將其計算為「Returning Vistors」。

「回流訪客」其實就是你的老讀者，喜歡重複看你部落格的讀者同樣的很重要，因為他們可能是你推廣散布部落格中不可或缺的原動力。通常統計服務會把NewVistor和Returning Vistor配在一起看兩者的比例。

用借書來說的話，新舊訪客的意思就是，有多少人只借了一次書，又有多少人重複的在借閱同一本書。

引用

Average Pageview
Google Analytics用語：平均網頁檢視
其它可能用語：平均訪問深度、Visit Depth

平均網頁檢視就是前面提到的「網頁檢視數」除以「造訪次數」，就可以得到在每次部落格上的實質訪問行為裡，平均會被瀏覽多少個網頁。

雖然這個數據拿書來比喻有點怪怪的，不過就是說，讀者借了書以後，平均翻了幾頁才還。

引用

Time on Site
Google Analytics用語：網站停留時間
其它可能用語：Duration、Visit Length、平均訪問長度、平均造訪時間

網站停留時間就是字面上的意思：每一位訪客平均停留在你網站的時間。統計服務會記錄每一次「Visit造訪」的時間長度，，然後除以「總造訪次數」，就可以得到這個平均值。

不管是平均網頁檢視，或者是網站停留時間，愈長就表示讀者愈容易「留在你的網站中」，不過以部落格的日誌型態來說，這兩個數據通常不會很高，因為讀者很有可能看完你新的日誌就離開了。

以書為喻的話，就是讀者通常都借了這本書多久的時間才會還。

引用

Bounce Rate
Google Analytics用語：退回率

讀者只造訪一個網頁就離開網站的比率。基本的算法是「只看一個網頁的造訪次數」除以「總造訪次數」。對於部落格的日誌型態來說，讀者通常看完一篇文章後，不太會繼續看其他的文章，所以在部落格裡這個比率會比正常的入口網站要高。

如果你打算作入口網站的話，這個比率就非常重要，因為退回率太高，表示訪客看到第一頁後，對你的其他資料完全沒興趣，或者是找不到繼續轉換瀏覽的地方，這時候你就要從內容或網站介面上進行改進。

用書來比喻的話，就是說讀者只看了一頁，就想要還書了的比率。

喘口氣：
上面講的大部分是總數或平均值，而下面四個數據，則是用數據分佈的方式，告訴你在各種區段裡的流量變化情形。

引用

Visitor Loyalty
Google Analytics用語：忠誠度

在訪客忠誠度裡，會依據不同的重複造訪次數，來顯示每個區段在總體造訪次數中所佔的比例，也就是說你可以看到有多少訪問是忠誠的不斷到訪，又有多少訪問是隨機的臨時拜訪。例如你部落格可能有50%只造訪一次的Visit，而可能有5%是重複造訪50次以上的忠誠讀者。

引用

Visitor Recency
Google Analytics用語：新近度

訪客新近度意即：訪客上一次來看你的部落格是多久以前？（也可以說是訪客們都隔多久來看一次你的部落格）你可以看到從0天、1天到365天等不同時間點所擁有的訪客比率。有些訪客可能已經一年都沒有再回到你的部落格，這其實也表示他們可能對你部落格不感興趣。另外因為「0天前」這個項目也包含了新訪客的數目在裡面，所以判讀上需要考慮這個額外因素。

引用

Length of Visit
Google Analytics用語：造訪時間長度

在造訪時間長度中顯示：總造訪次數在不同的「停留時間區段」裡的分佈情形。例如有5000次造訪停留了600～1800秒，而有10000次造訪停留了10秒以內。

引用

Depth of Visit
Google Analytics用語：造訪閱讀量

在造訪閱讀量中顯示：總造訪次數在不同的「閱讀頁數區段」裡的分佈情形。例如有1000次造訪閱讀了5頁，而有5000次造訪只閱讀了1頁。

流量來源 Traffic Sources

看完計算比較複雜的訪客類數據後，接下來就是比較好懂，在應用上其實也更直接的一些統計數據。

你知道讀者都是如何發現你的部落格嗎？這是很重要的資訊，這其中搜索引擎的來源應該要能夠佔據越高的比率越好，因為這表示你的部落格在搜索引擎的結果列表中容易被注意到，也表示你能夠吸引更多新的讀者。

而「關鍵字」則告訴你讀者大多是搜索哪些字詞來找到你的部落格，可以看出熱門的搜索趨勢。你可以透過撰寫類似主題的文章來吸引更多同類讀者，或是在文章中善用關鍵字來讓讀者更容易透過搜索引擎找到你的部落格。不過對於寫來自滿的部落格，其實我們也可以看看就好，完全不需要這麼辛苦的做SEO。

引用

Direct Traffic
Google Analytics用語：直接流量

有些讀者並非透過任何網站轉到你的部落格，他們可能是透過已經存在瀏覽器中的書籤、或直接在網址列輸入網址而來，這些都被稱為Direct Traffic。擁有直接流量對於一個部落格來說，是很值得慶賀的事，因為這表示已經有讀者把你的部落格視為「他們想看的目標」，所以他們才會儲存你的網址，才會想到要看時，直接連進你的部落格。

引用

Referring Site
Google Analytics用語：推薦連結網站

這項服務告訴你，部落格的讀者都是透過哪些網站的推介而來到這裡（實際的計算情形是：你的網址連結出現在別的網站，其他人透過點擊這些連結而進入你的部落格的數目）。這是一個很重要的數據，因為個人部落格基本上是處在一個孤獨的狀態，除了讓別的網站來推薦你，並因此曝光而吸引新讀者外，否則要「招攬客源」還真的不是一件簡單的事。

而現在台灣網路界的兩大社交書籤、推文網站：「funP」和「黑米」，就是對台灣部落格來說最大的兩股流量來源，尤其我相信許多人的統計數據中，「funP」目前應該都是名列第一、第二的「推薦連結網站」。對於喜愛交流或想多增加流量的部落格來說，真的都應該好好感謝一下有「funP」和「黑米」這樣的交流平台。

另外，如果你寫出夠好的文章，並且能夠吸引到其他部落格引用，或是讓一些論壇，甚至是像Yahoo知識+拿去引用的話，它們也都會是很好的推薦連結網站來源。

引用

Search Engines
Google Analytics用語：搜索引擎

顧名思義，這個數據就是告訴你，訪客都是透過哪些搜索引擎來找到你的部落格。以我自己來說，Google和Yahoo是兩個最大的流量來源。

在Google Analytics的統整分析中，有一個「流量來源總覽」的圓餅圖，它會告訴你上述三個數據在你流量來於中所佔的比率。如果說「搜索引擎」比率高，表示陌生人在搜索引擎檢索時，可能你的部落格都排名比較前面，所以他們容易找到你的部落格。如果「推薦連結網站」比率高，表示很多人欣賞你的網站，尤其是很多重量級的網站願意推薦你，所以幫你吸引了大量的流量。如果「直接流量」比率高，就表示你的老讀者朋友還不少，這些人會願意常常主動的來看你的部落格。

三個數據怎麼分配比較好其實沒有定論，但若是想要讓部落格流量持續成長，那麼在「搜索引擎」這一塊占據高一點的比率是必要的，因為這表示你真的可以吸引到完全陌生的訪客進入你的部落格（就算是推薦連結網站也有群體範圍的限制）。

引用

Keyword
Google Analytics用語：關鍵字

也可以說是「搜索引擎關鍵字」。這項數據的意義是說，你的讀者們都是透過在搜索引擎搜索哪些關鍵字而來到你的網站。例如有的人在搜索引擎查找了「comodo」而進入電腦玩物，那麼在我的關鍵字統計數據上就會給「comodo」記上一筆。

「關鍵字」是透過外部搜索而找到你，這個數據告訴你，原來你網站在目前有哪些可以吸引到新訪客進入的主題，如果你真的很想提高流量，仔細的在部落格中研究如何利用主題文章和關鍵字，也會是一種很重要的SEO方法。

內容 Content

每個部落格都是由一篇篇的文章構成的，其中有些文章可能切中了最多讀者感興趣的話題，所以獲得最多的瀏覽量。透過「內容」的分析，我們可以看到讀者大多是從哪幾篇文章進入部落格中，如果想要留住這些讀者，適度的強化該文章網頁的內容，或是繼續研究該文章的主題，或許可以吸引讀者繼續瀏覽其他篇文章，也可以使讀者下一次願意回來造訪，這都對部落格的成長有很大的幫助。

引用

Top Content
Google Analytics用語：主要內容
其他可能用語：popular page、熱門網頁

這個項目會列出你的部落格中最常被瀏覽的網頁網址，點擊特定網址後可以看到該網頁的獨立統計數據，例如專屬這個網頁的停留時間、退回率，和長時間的流量變化。

其實對於日誌型的部落格來說，寫的高興就好，不過如果你願意的話，特地去優化高流量的獨立網頁，或許可以展現出一些吸引讀者回流或轉換瀏覽的效果。

引用

Content by Title
Google Analytics用語：標題內容

標題內容其實有點像文字化的主要內容，「主要內容」列表顯示的是每個獨立的網址的瀏覽量，而「標題內容」裡面顯示的是以文章標題為主的瀏覽量。有時候（不過機率不大），讀者可能用不同的網址在瀏覽你同一個標題下的文章，它們其實是同一個網頁，會這樣的原因之一，是有些人可能是透過網頁代理來瀏覽你的部落格，因此統計時看到的是不同的網址，這時候透過「同一個標題」，就可以把這些相關網址都集合在一起統計。

引用

Content Drilldown
Google Analytics用語：內容深入

這個項目是把你部落格裡的網址分層檢索，然後讓你層層深入的去查看每一層級網址的流量。具體來說，以Blogger的部落格為例，我們可能先看到「/2007/」、「/2008/」兩個最初的網址階層，點進「/2007/」後，可以看到1～12月的網址流量，點進「/2007/08/」後，則可以看到2007年8月份文章網址的流量與統計數據。

依據每個部落格系統的不同，這個網址內容深入的探索結構也會不同。

引用

Top Landing Pages
Google Analytics用語：主要到達網頁
其他可能用語：Entry Page、進入網頁

這個資料可以告訴你訪客通常都從部落格中的哪幾篇文章（哪幾個網頁）進入你的網站。以部落格來說，這些網頁就是讀者們的「入口」。

「到達網頁」指得是你的訪客進入你部落格的入口網頁，而「主要內容」則是代表單個網頁被瀏覽的次數（但是它們可能是第2、第3次的轉換後才被瀏覽到），兩者有些不同。

引用

Top Exits
Google Analytics用語：主要離開網頁
其他可能用語：Exit Page、離開網頁

這個資料可以告訴你訪客通常都從部落格中的哪幾篇文章（哪幾個網頁）離開你的網站。

結語：

還有一些像訪客地圖分佈等等的指標，應該會比較好懂，所以我也不多作解釋了。我還是想再強調一次，對於個人部落格來說，要透過這些統計數據來玩SEO，所花費的財力和精力可能是個人無法負擔的，而且既然是個人部落格，當然自己玩得開心最重要。

那我為什麼還要花時間來研究這些呢？因為他們確實好玩，也可以達成最前面我提到的「自滿」的感動，而部落格就像自己的孩子，了解自己孩子的成長動向，在某些時刻給予一些不打破部落格原味，而你自己又可以負擔的修正，其實也是很合理的。

另外這些統計數據都有其不準確性，以Google Analytics為例，它是利用cookie的方式來追蹤訪客動向，可是有的訪客可能會定期清理電腦並把cookie刪除，有的訪客更可能一開始就不允許cookie進入，總總複雜的原因都可能讓數據並非「真實」。也因此Google Analytics也建議使用者應該要看「趨勢變化」，而不是去追究單個數據的量。

那麼，以上是我的個人整理與體會，如果對其中的解釋有任何更好的說明與指教，都歡迎在留言裡回饋。
===================
终于搬运完了，累死俺鸟>_<

随机推荐：

© Page not found | 8条评论 | feed.404cn.net | Twitter: @404cn

dynamicBlogDescription v0.13 | rssExtraInfo v0.20

Tags - google-analytics , google

避免网站设计像一个业余的个人站点

Thu, 28 Feb 2008 11:06:47 +0000

总结得不错，转帖出来。本文收集于网络，如果你知道出处请留言告诉我，谢谢。
Update：这是前几天整理收藏夹时找到的文章……好吧，我承认里面的内容确实有些老了，但部分也还是适用的。

对于个人做网站，很容易存在的一个问题就是把网站做得象业余（个人）网站，这样很容易使别人产生不信任感而影响业务发展。在此我们总结了一些业余网站的常见特征，请大家尽量避免：

1、杂乱的网页背景

　　这是新手最容易犯的毛病之一，他们喜欢用鲜艳的色彩或亮丽的图片，作为网页背景，其实，这往往弊大于利。

　　那么，网页背景设定为何种颜色最好呢？使用下面这个语句：
　　

（鬼火：建议使用css定义，今天还用这种代码确实有点……）

　　没错！这只是个普通的白色背景，但它适合于很多场合，能够与页面上其他各种元素和谐搭配。想想 Yahoo 等名站，你就会明白。如果你真想有一个“特酷”的效果，那么，可以用黑色代替白色。当然，你也许能够举出使用其他颜色的成功网站。但它们很大程度上遵守了这样一个规则：选择的色彩符合网站主题。如明亮的色彩用于儿童网站、柔和的颜色用于商务网站等。

　　另外，不要使用图片背景。回想一下，在你浏览过的知名网站中，有多少使用图片背景的？几乎没有吧？其实，道理很简单，人们来到你的网站（尤其是商务网站），你希望他们读你的内容，还是欣赏漂亮的图片？况且这种背景还有一个缺点——减慢了网页装入速度。另外，不使用图片背景，也等于在向来访者表明：“我们以高质量的内容（产品或服务）取胜，而不是花哨的装饰”。你有这个自信吗？
（鬼火：现在不是56K时代，一定的图片背景还是可取的）

　　如果坚持要使用图片背景，那么一定要使它很亮，以免它影响前面文字的阅读。为此，应该对每个网页进行测试。图片背景，可以由一张小图片重复拼合而成（也就是“平铺”），也可以是一张完整的大图片。但后者容易出现问题，尤其是使用框架的时候。如果访问者设定的显示分辨率，与你设计背景时使用的不同，网页显示就不正确。通常，使用更高分辨率的访客，会看到一张以上的背景图片，它们自动进行平铺，但拼图一般不完整。此外，这种图片在框架中，滚动屏幕时会出现滞留现象。

　　 2、平庸纷乱的图形

　　刚接触网页设计，总喜欢在其中塞满漂亮的图片，这似乎是“人之常情”，然而，这正是专业网站的又一忌讳。

　　记住，只有在语言难于表达的地方，才使用图片，而且图片应该简洁，文件尺寸要尽量小。不要轻易用图片代替文本，如标题、导航栏等。的确， HTML 中的文本不是在各种浏览器中都能正确显示，但是如果使用层叠样式表（ CSS ），情况就要好得多。文本具有装载速度快的优势，不会出现象图片有时无法打开的问题，而且修改起来也更加方便。

　　 3、别扭的框架

　　为便于浏览，有不少站点使用了框架。通常，在屏幕一侧或顶部建立导航区，浏览区滚动的时候，这里可以保持不动，这样，也许真给浏览带来了一些方便，但如不小心使用，它也可能给访客带来麻烦，使屏幕变得更加杂乱。同样，我们反观许多专业网站，使用框架的寥寥无几。

　　 4、单调的直线型网页

　　在互联网出现初期，网页内容按直线布置。图片、文本、标题，都按垂直方向，依次向下放，这种长长的网页看起来就象议事日程。为了查看网页内容，你必须不时滚动屏幕，既单调又不方便。并不是那个时候的设计人员缺乏想象力——他们别无选择，因为早期的 HTML 不支持象报刊杂志一样的分栏。

　　从 HTML 2.0 开始，才引入了 TABLE 这个重要标记，设计人员终于可以对网页进行分栏布置，这样，既便于阅读，又能显示更多信息，还使页面效果更加美观，所以，现在大多数网站都使用了它。也许 TABLE 不是十分完美，但它可能是目前每个专业网页设计人员仍乐于使用的方法，花点时间认真学好它。
（鬼火：TABLE的初衷是用来规范数据，尽量不要用来布局）

　　5、先声夺人的计数器

　　可能很多人都有过这种感觉，突然进入一个网页，最先吸引注意力的是一个醒目的计数器。显然，这未免有些喧宾夺主。

　　监视和分析网站流量的确很重要。一些大型网站根据他们的服务器记录，分析、收集访客的各种信息。其实，有的软件也具有此功能，如 HitBOX Tracker Viewer 等，没有必要放这种既“抢镜头”又破坏视觉效果的玩意儿，何况有的“计数器”统计并不准确、科学。而且放入计数器会给你感觉是个个人网站，你见过大型的企业网站在首页上放计数器的吗？

　　 6、“正在建设之中……”

　　不知你是否遇到过这种情况？点击某网站上一个链接，进入一个网页，里面除了显示“正在建设之中……”或“请稍后再来”，其它什么也没有。这种说法也许不够准确，因为也有的人还写上了更详细说明，甚至放上一张可爱的修路动画，但是，所有这些似乎只能说明一点“这是一个业余网站！”。

　　你见到过一本杂志或某部电视，中间出现一段“请等待，正在制作中”吗？网上冲浪者的注意力是很短暂的，很少有人对“请稍后再来”这样的事情感兴趣。遇到这种情况，真正以后再去那一页人少之又少。其实，明智的做法应该是，在主页中，说明网站将要添加的功能、内容、服务或产品等，而不是放一个毫无用处的链接。

　　另外，请注意，某些搜索引擎拒绝注册包含“正在建设”这类链接的网站。

　　 7、多余的建议

　　进入有的网站，你往往可以看到这样两行小字：“强烈建议使用某某浏览器、某种分辨率浏览”。通常，你会按照它的意思，重新设定显示分辨率，并打开另一种浏览器吗？我想，你多半不会，是的，我也不会。那么，我们自己设计网页时，干嘛还要放这些无用而有碍观瞻的东西呢？

　　 8、免费广告和其它垃圾

　　新手的站点总有不少破坏页面效果的垃圾——图档啦、按钮啦、图标啦、广告啦，让人眼花缭乱。你可知道，你放在网页上的每样东西，都会延长访客装载网页的时间？在目前我们“龟速”的信息高速公路上，你这样等于是在考验来者的耐性，很多人只好马上一走了之。我们认为，简洁就是一种很好的风格。

　　当然，你放的这些东西当中，某些可能会给你赚点钱，而有的对增大访问量有好处（如交换链接）。但是 Netscape 和 IE 图标有什么用呢？那些搜索引擎有什么用呢？如果一个链接，尤其是图片，不能真正为你赚钱或增加访问量，将它拿下！

9、画蛇添足的背景音乐
很多个人的网站和论坛喜欢把一些优美的音乐放到首页上，其实这是一个极其不明智的做法，你不能保证浏览者的机器能播放这些音乐。而且还有可能把你的网站传输速度变成忍无可忍，因为一个完整的音乐文件至少要500k以上的字节，而且还要保证不影响音质的情况下。一个专业的网站不可能在首页面放入背景音乐，除非它一个追求个性和极度完美的个人网站。

总体来说，专业网站的制作要点其实很简单，传达出你要表达的意思即可，界面美观，文字脉络清晰。多余的花哨技术尽可能少用。不是每个浏览器都能像你的机器显示的那样完美，在美观的同时注意大部分的机器性能与浏览器的版本。做一个有度的平衡即可。

© Page not found | 3条评论 | feed.404cn.net | Twitter: @404cn

dynamicBlogDescription v0.13 | rssExtraInfo v0.20

Tags - 商业网站 , 网站设计

Making CSS visible for Opera 7 only

Tue, 02 Oct 2007 15:27:54 +0000

今天做风格，遇到了一个很郁闷的问题：opera下正常，firefox和ie6下有不同的错位。这种情况下普通的hack是行不通的，遂google爬网找到了下面这篇文章，比较可惜的是这种方法hack后CSS文件无法通过验证：（

There is lots and lots of CSS hackery out there to hide CSS from certain browsers. But what about the times when you want to show CSS only to certain browsers.
CSS3 Media Queries

This trick, using CSS3 Media Queries makes styles invisible to any browser, but Opera 7. The explanation is simple: A browser should, when it encounters an @media rule it doesn’t recognize, ignore the entire rule. In CSS2, you can specify that a portion of a stylesheet should only be available for a certain media type, for instance @media print { } that will make the rules contained within only valid for printout.

In CSS3, this feature will be greatly expanded, so that you can query not only which media a style should be available to, but also which capabilities should be supported. An example:

body { background: green; }

@media screen and (min-width: 550px){
body { background: red; }
}

The example above will make the body background red for normal screen media when the width of the canvas is 550 pixels or wider, and green when is is narrower. As I have demonstrated earlier, Opera 7, as the only known browser, has experimental support for these queries, and we will use this feature to create stylesheets only Opera can see.
Opera 7-compatible example

The following rule enables the style rules to Opera:

@media all and (min-width: 0px){
[ Normal CSS rules here ]
}

What happens here, is that a browser with media-query capabilities will match the rules inside @media for all media, as long as the viewable area of this media is wider than zero pixels, which it usually is.

The stylesheet on this site contains the following rule:

@media all and (min-width: 0px){
  div.pagefooter:hover:after {
     position: absolute;
     right: 30%;
     width: 265px;
     height: 131px;
     bottom: 3.5em;
     z-index: 0;
     content: url(/images/ghostgirl.png);
  }
}

If you are using Opera 7, and you hover the page footer on this site, you will see an image appear. If this rule was visible to other browsers, like Mozilla, it would choke, since it uses the CSS 2.1 feature absolute positioning of generated content, using the pseudo element :after. However, since Mozilla behaves as it should when encountering a CSS rule it doesn’t understand, all of the content is ignored, and Mozillians, Safari users and users of other browsers, can see the page without breakage, and without the visual bonus Opera users get.

Use the technique as you wish, but keep in mind that neither CSS 2.1 or CSS 3 are final recommendations yet, so the syntax of the rules and techniques within here may change.
Update

Before you use this method, you should read this message from Jonny Axelsson of Opera Software.

随机推荐：

© Page not found | 0条评论 | feed.404cn.net | Twitter: @404cn

dynamicBlogDescription v0.13 | rssExtraInfo v0.20

Tags - csshack , css

一些DIV+CSS 命名规范

Thu, 14 Jun 2007 16:04:19 +0000

自oyll
外　套：　　wrap
主导航：　　mainnav
子导航：　　subnav
页　脚：　　footet
整个页面：　content
页　眉：　　header
页　脚：　　footer
商　标：　　label
标　题：　　title
主导航：　　mainbav（globalnav）
顶导航：　　topnav
边导航：　　sidebar
左导航：　　leftsidebar
右导航：　　rightsidebar
旗　志：　　logo
标　语：　　banner
菜单内容1： menu1 content
菜单容量：　menu container
子菜单：　　submenu
边导航图标：sidebarIcon
注释：　　　note
面包屑：　　breadcrumb(即页面所处位置导航提示）
容器：　　　container
内容：　　　content
搜索：　　　search
登陆：　　　Login
功能区：　　shop(如购物车，收银台)
当前的　　　current

2.另外在编辑样式表时可用的注释可这样写：
<– Footer –>
内容区
<– End Footer –>

3.样式文件命名
主要的 master.css
布局，版面 layout.css
专栏 columns.css
文字 font.css
打印样式 print.css
主题 themes.css

随机推荐：

© Page not found | 0条评论 | feed.404cn.net | Twitter: @404cn

dynamicBlogDescription v0.13 | rssExtraInfo v0.20

Tags - css

43个你应当避免的Web设计错误

Fri, 11 May 2007 07:33:24 +0000

版权声明：可以任意转载，但转载时必须标明原作者charlee、原始链接http://tech.inspiremedia.org/archives/367.html以及本声明。原文链接。

这是一篇关于网站易用性的文章，作者以亲身体会讲述了43条网站设计中常犯的错误，而无疑这些错误会大大影响网站的可用性。如今网站易用性已成为一种趋势，但纵观国内的各大网站，似乎易用性并未成为设计者们广泛理解的概念，因此希望这篇文章对大家能有作用。
1. 用户必须在几秒钟知道网站是做什么的。注意力是因特网上最有价值的货币。如果访问者无法在几秒钟之内得知你的网站的方向，他很有可能转而访问其他网站。你必须迅速地告诉访问者为什么要在你的网站上花费时间。
2. 让网站易于速读。因特网不是书，因此没必要使用大段的文字。也许我访问你的网站时我正在忙于其他工作，我不得不迅速读完所有内容。项目符号、标题、副标题、列表，这些都能帮助读者迅速找到他想要的内容。
3. 不要使用难于阅读的花哨字体。当然，某些字体可以让网站精彩纷呈。不过它们容易阅读吗？如果你的主要目的是传递信息并让读者阅读，你应该让阅读过程舒服些。
4. 不要用小字体。如上一条所述，你得让读者阅读时感到舒服。虽然我的Firefox有放大功能，但如果必须放大才能看清一个网站的话，我就再也不会去访问它了。
5. 不要打开新浏览器窗口。我的第一个网站曾经经常这么做。原因很简单，在新窗口中打开外部链接，用户就不必离开我的网站。错！让用户决定如何打开链接，否则浏览器上大大的后退按钮就没必要存在了。不用担心用户离开你的网站，在必要的时候他们会回来的。
6. 不要改变用户的浏览器窗口大小。用户有权控制自己的浏览器。如果你改变窗口大小，你会在他们面前失去信用。
7. 不必要时不要让用户注册。直白地讲，我上网是为了获取信息，不是为了别的。不要强迫我注册并留下我的电子邮件以及其他信息，除非特别必要（比如你能提供的消息非常有价值）。
8. 不要在未经访问者同意的情况下为他们订阅电子杂志。 不要在访问者注册时自动给他们订阅电子杂志。不请自来的邮件可不是个交朋友的好办法。
9. 不要过多使用Flash。Flash不仅会增加网站的读取时间，过度使用甚至会让访问者感到不快。只有当静态页面无法表达你的意图时才使用Flash。
10. 不要播放音乐。早些年Web开发者都喜欢在网站中集成音乐，结果他们失败了。记住，永远不要使用音乐。
11. 当你必须使用声音时，让用户启动它。有时你必须使用声音文件，比如你要给用户发送一份演讲，或者你的教程包含声音。这没问题，但要让用户来控制，让用户点击“播放”按钮，别在打开网页的瞬间播放声音。
12. 不要让标志弄乱你的网站。社交网络和社区的标志会让你的网站看起来十分不专业。就算是奖章和荣誉等标志也应当放到“关于我们”页面上。
13. 不要使用“点击进入”页面。用户访问到内容的步骤越少越好。
14. 注意要留下联系方式。最差的莫过于网站没有留下联系方式的了。不仅对访问者不友好，而且对你也没好处，你会错过珍贵的反馈信息。
15. 不要影响“后退”按钮的动作。这是网站可用性的最基本的理念。在任何情况下都不能影响“后退”按钮的动作。比如，打开新窗口会破坏它，某些Javascript链接也会破坏它。
16. 不要用闪烁的文字。除非你的访问者来自1996年，否则别用闪烁文字。
17. 避免复杂的URL结构。一个简单的基于关键字的URL结构不仅能提高你的搜索引擎排名，还能让访问者在访问之前了解网页内容。
18. 用CSS布局，不要使用表格。HTML表格曾经被用于页面布局，但没有必要拘泥于此，尤其是在CSS诞生之后。CSS更快、更稳定，并能提供更多的特性。
19. 保证用户可以搜索整个网站。搜索引擎带来因特网革命的原因，就是它使得信息查找变得十分容易。别在你的网站上唱反调。
20. 避免使用下拉菜单。用户应当直观地看到所有导航选项。下拉菜单会造成混乱，并且会隐藏访问者真正要找的信息。
21. 使用文字做导航栏。文字导航不仅速度快，而且更稳定。例如，有些用户上网时会关闭图片。
22. 如果需要链接到PDF文档，一定要注明。你一定有过点击链接之后，浏览器就像死掉一样等待Acrobat Reader启动，只为了打开一个（你不想看的）PDF？这是个不小的麻烦，因此一定要在指向PDF的链接旁特别说明，使用户可以采取相应措施。
23. 不要用多种版本让访问者迷惑。你想用哪种带宽？56Kbps？128Kbps？Flash版还是HTML版？嗨，我只想快点看到内容！
24. 不要在内容中混合广告。在内容中混合广告（如Adsense）也许会增加短期内的广告点击率，但从长远角度来看，这会减少网站的人气。愤怒的用户会离开的。
25. 使用简单的导航结构。过犹不及。这个规则通常适用于人和选择上。确保你的网站的导航结构单纯简洁。你不想让用户在查找信息时遇到麻烦吧？
26. 避免内容介绍。别强迫用户在访问到真正内容之前看某些东西。这很令人愤怒，除非你提供的信息是用户必须的，否则他不会等下去。
27. 不要使用FrontPage。这一点也适用于其他廉价的HTML编辑器。它们让页面设计变得更方便，但其输出结果将会非常低级，不兼容不同的浏览器，并且会包含错误。
28. 保证你的网站兼容大部分浏览器。浏览器并不完全相同，在解释CSS和其他语言的方法也相差甚远。不管你是否愿意，你应当让网站兼容市面上的常用浏览器，否则你会永远地失去部分读者。
29. 保证在链接上添加有意义的文字。以前我经常犯这个错误。告诉人们“点击这里”很容易，但这没有效果。要保证链接文字有意义。它使得访问者知道点击链接之后将出现什么，也能为链接指向的外部站点带来SEO效果。
30. 不要在状态栏中隐藏链接。用户还必须能在状态栏中看到链接指向哪里。如果你隐藏了链接（即使是由于其他原因），那么你也会丧失信誉。
31. 使链接可见。访问者应能轻易识别出哪些能点击，哪些不能。确保链接的颜色有强烈的对比（标准的蓝色通常是最好的）。可能的话，最好加上下划线。
32. 不要在普通文本上添加下划线或者颜色。除非特别需要，否则不要为普通文字添加下划线。就像用户需要识别哪些能点击一样，他们不应当将本不能点击的文字误认为能够点击。
33. 改变访问过的链接的颜色。这一点对于提高网站可用性非常重要。改变访问过的链接颜色有助于用户在网站中定位，确保他们不会不经意地访问同一页面两次。
34. 不要使用动态GIF。除非你有需要动画的广告条，否则避免使用动态GIF。它会使网站看上去很业余，并且会分散访问者的注意力。
35. 给图像添加ALT和TITLE属性。ALT和TITLE不仅会带来SEO效果，而且对盲人有很大帮助。
36. 不要用令人不快的颜色。如果用户连续阅读10分钟后觉得头疼，那么你最好选择别的配色方案。根据你的目的决定设计（例如，创造一种氛围使得用户将注意力放在网站内容上，等等）。
37. 不要弹出窗口。这一点涉及任何种类的弹出窗口。即使用户要求使用，弹出窗口也不宜使用，因为它会被弹出窗口拦截功能阻拦。
38. 不要使用Javascript做链接。远离那些点击之后执行一小段Javascript的链接，它们经常给用户带来麻烦。
39. 在页面底部放置有意义的链接。访问者在找不到所需信息时通常会滚动到页面最底端。作为最后的手段，你应当在页面底部放一个“联系我们”页面的链接。
40. 避免网页过长。如果用户老是需要滚动才能看到内容，他通常会采取的做法是跳过它们。如果你的网站正好如此，那么应当缩短内容并优化导航结构。
41. 禁止使用水平滚动条。虽然垂直滚动条可以接受，但水平滚动条却远非如此。现在的流行分辨率是1024x768，要确保网站能容纳在其中。
42. 禁止出现拼写或语法错误。这不是网站设计的错，但却是影响网站整体质量的重要因素。确保链接和文字中没有拼写或语法错误。
43. 如果你使用图片认证，要保证能看清其字符。有些网站将图片认证作为对抗垃圾评论的方法，或是在注册表单上使用。其中有个问题就是，用户经常需要叫上全家人来讨论图片上到底是什么字母。

一段解决ie6下position bug的js

Mon, 23 Apr 2007 08:22:44 +0000

在这里看到的，测试通过。这下更有用position的理由了^^

// IE 6 hack to allow copy/paste
// thanks to Tom Gilder
http://blog.tom.me.uk/2003/07/23/boie6selecta.php
if (window.createPopup && document.compatMode && document.compatMode=="CSS1Compat"){
document.onreadystatechange = onresize = function fixIE6AbsPos(){
if (!document.body) return;
if (document.body.style.margin != "0px") document.body.style.margin = 0;
onresize = null;
document.body.style.height = 0;
setTimeout(function(){ document.body.style.height = document.documentElement.scrollHeight+"px"; }, 1);
setTimeout(function(){ onresize = fixIE6AbsPos; }, 100);
}
}

Update：来自yeyo的方法，还没测试

.test {position: absolute;}
* html .test {z-index: -1}

设计人员必读：影响SEO的页面制作细节

Fri, 16 Feb 2007 13:26:15 +0000

自迷路的blog

1、将css与javascript全部用下边的方法分离到外部文件中去。
让html代码最大可能的只是用来显示实际内容。

2、采用xhtml代码编写页面，抛弃传统Table布局模式，去掉页面中的例如font/bgcolor等格式化控制标签。用符合web标准的代码来制作页面。这样能够让xhtml代码结构化、语义化。提高页面代码的可读性。

3、采用了上边的方法你会发现你的html代码会变得非常小，当然如果可以的话。让它变得更小。太大的页面会影响搜索引擎的处理速度。一般通过xhtml+css设计的网页，html代码应该可以控制在50K以内。大家可以去看一下用web标准重构得比较好的网站。

4、用好图片的alt标签，合理的使用页面关键字去描述图片，这样能增加页面的关键字密度。

5、尽可能少地使用javascript来做与内容相关的事情，例如用document.write去显示正文。这样会影响搜索引擎对页面内容的搜索。

6、千万不要用javascript来实现你网站的导航。那样会让搜索引擎迷失方向。

7、每个页面的关键字尽可能出现在页面的标题，也就是头部的Title标签中。当然，要合理应用，不要太长，更别用大量与页面内容无关的网络热门关键字。因为那就不是优化而是在作弊。

8、尽量在每个页面代码中合理使用h1，h2等标签并让你的关键字出现在h1标签中，让页面的文档结构更清晰。

我是做网页制作的，所以SEO的诸多专业技术及算法我都不是非常了解。如果您想了解更多关于这方法的知识，建议您访问一些国内知名的SEO优化类的网站，比如点石互动等。在那里你能查阅到很多关于“反向链接”、“页面PR值”等专业知识。这里只是将我在页面制作的过程中涉及到的一些细节问题拿出来和大家探讨一下。由此也可以说明为什么基于web标准设计的网站会更有利于SEO了。

如果您不打算花钱去请专业的SEOer来为您的网站做优化，那么可以让页面制作人员在制作上注意一些细节。相信这样免费的一些细节也能达到一个比较好的效果

css元素定位

Fri, 01 Dec 2006 15:19:07 +0000

每次作风格总能学到点东西

作者：greengnn　来自：蓝色理想

通俗易懂，很不错的文章。

1. position:static|无定位
position:static是所有元素定位的默认值, 一般不用注明，除非有需要取消继承的别的定位

example:
#div-1 {
position:static;
}

2. position:relative|相对定位
使用position:relative，就需要top,bottom,left,right4个属性来配合，确定元素的位置。
如果要让div-1层向下移动20px,左移40px:

example:
#div-1 {
position:relative;
top:20px;
left:40px;
}

如果用到相对定位，紧随他的层divafter是不会出现在div-1的下方，而是和div-1在同一个高度出现。

可见， position:relative;并不是很好用。

3. position:absolute|绝对定位
使用position:absolute;,能够很准确的将元素移动到你想要的位置，让我将 div-1a 移动到页面的右上角:

example:
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}

使用绝对定位的div-1a层前面的或者后面的层会认为这个层并不存在，丝毫不影响到他们。所以position:absolute;用于将一个元素放到固定的位置很好用，但是如果需要div-1a层相对于附近的层来确定位置就不要实现了。
*这里有个Win IE的bug需要提到，就是如果为绝对定位的元素定义一个相对的度，那么在IE下它的宽度取决于父元素的宽度而不是整个页面的宽度。

4. position:relative + position:absolute|相对定位+绝对定位
如果给父元素(div-1)定义为position:relative;子元素(div-1a)定义为position:absolute，那么子元素(div-1a)的位置将相对于父元素(div-1)，而不是整个页面。
让div-1a定位于div-1的右上角：

example:

this is div-1a element.

this is div-1 element.

#div-1 {
position:relative;
}
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}

5. two column layout|两列布局
让我们实践position:relative + position:absolute的理论，实现两列布局。

example:

this is the column-one

this is the column-two

#div-1 {
position:relative;/*父元素相对定位*/
}
#div-1a {
position:absolute;/*子元素绝对定位*/
top:0;
right:0;
width:200px;
}
#div-1b {
position:absolute;/*子元素绝对定位*/
top:0;
left:0;
width:200px;
}

注意，在这个例子中会发现父元素的高度不会随着子元素的告诉变化，所以如果父元素的背景和边框需要定义一个足够高的高度才能显示出来。

6.float|浮动对齐
使用float定位一个元素有float:left;&float:right;两种值。这种定位只能在水平坐标定位，不能在垂直坐标定位。而且让下面的元素浮动环绕在它的左边或者右边。

example:
#div-1a {
float:left;
width:200px;
}

7.make two clumn with float|浮动实现两列布局
如果让一个元素float:left;另一个float:right;控制好他们的宽度，就能实现两列的布局效果。

example:
#div-1a {
float:left;
width:150px;
}
#div-1b {
float:left;
width:150px;
}

8.clear float|清除浮动
如果你不想让使用了float元素的下面的元素浮动环绕在它的周围，那么你就使用clear,clear有三个值，clear:left;(清除左浮动)，clear:right;(清除右浮动)，clear:both;(清除所有浮动)。

example:

this is div-1a

this is div-1b

this is div-1c

#div-1a {
float:left;
width:190px;
}
#div-1b {
float:left;
width:190px;
}
#div-1c {
clear:both;
}

至此，这个css的定位部分就结束了，你可以动手体会体会加深印象。

CSS3新特性预览

Thu, 23 Nov 2006 03:34:05 +0000

样式表现能力足以让人YY

边框：(Borders)

border-color:控制边框颜色，并且有了更大的灵活性，可以产生渐变效果

border-image:控制边框图象

border-corner-image:控制边框边角的图象

border-radius:能产生类似圆角矩形的效果

背景(Backgrounds)

background-origin:决定了背景在盒模型中的初始位置，提供了3个值，border, padding和content

border:控制背景起始于左上角的边框

padding:控制背景起始于左上角的留白

content:控制背景起始于左上角的内容

background-clip:决定边框是否覆盖住背景（默认是不覆盖），提供了两个值，border和padding

border:会覆盖住背景

padding:不会覆盖背景

background-size:可以指定背景大小，以象素或百分比显示。当指定为百分比时，大小会由所在区域的宽度、高度，以及background-origin的位置决定

multiple backgrounds:多重背景图象，可以把不同背景图象只放到一个块元素里。

文字效果：(Text effects)

text-shadow:文字投影，可能是因为MAC OSX的Safari浏览器开始支持投影才特意增加的。

text -overflow:当文字溢出时，用"..."提示。包括ellipsis、clip、ellipsis-word、inherit，前两个CSS2就有了，目前还是部分支持，但有趣的是IE6居然也支持。ellipsis-word可以省略掉最后一个单词，对中文意义不大，inherit可以继承父级元素。

颜色：(Color)

HSL colors:除了支持RGB眼色外，还支持HSL（色相、饱和度、亮度）。以前一般都是作图的时候用HSL色谱，但这样一来会包括更多的颜色。H用度表示，S和L用百分比表示，比如hsl(0,100%, 50%)
HSLA colors:加了个不透明度(Apacity)，用0到1之间的数来表示，比如hsla(0,100%,50%,0.2)
opacity:直接控制不透明度，用0到1之间的数来表示
RGBA colors:和HSLA colors类似，加了个不透明度

用户界面(User-interface)

resize:可以由用户自己调整div的大小，有horizontal（水平）vertical（垂直）或者both（同时），或者同时调整。如果再加上max-width或min-width的话还可以防止破坏布局

选择器：(Selectors)

Attribute selectors:在属性中可以加入通配符，包括^,$,*

[att^=val]:表示开始字符是val的att属性

[att$=val]:表示结束字符是val的att属性

[att*=val]:表示包含至少有一个val的att属性

其它模块：(Other modules)

media queries:感觉叫媒体选择比较合适，可以为网页中不同的对象设置不同的浏览设备。比如可以为某一块分别设置屏幕浏览样式和手机浏览样式，以前则只能设置整个网页。

multi-column layout:多列布局，让文字以多列显示，包括column-width、column-count、column-gap三个值

column-width:指定每列宽度
column-count:指定列数
column-gap:指定每列之间的间距
column-rule-color:控制列间的颜色
column-rule-style:控制列间的样式
column-rule-width:控制列间的宽度
column-space-distribution:平均分配列间距

Reference:http://www.css3.info/preview/

针对firefox ie6 ie7的css样式

Mon, 16 Oct 2006 14:07:59 +0000

引用

现在我大部分都是用!important来hack，对于ie6和firefox测试可以正常显示，但是ie7对!important可以正确解释，会导致页面没按要求显示！搜索了一下，找到一个针对IE7不错的hack方式就是使用“*+html”，现在用IE7浏览一下，应该没有问题了。

现在写一个CSS可以这样：

#example { color: #333; } /* Moz */
* html #example { color: #666; } /* IE6 */
*+html #example { color: #999; } /* IE7 */

那么在firefox下字体颜色显示为#333，IE6下字体颜色显示为#666，IE7下字体颜色显示为#999，他们都互不干扰。

CSS兼容要点

Wed, 04 Oct 2006 02:13:22 +0000

　　FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行

　　FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中

　　FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width

　　FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式

　　div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行

　　cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以

　　FF: 链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格XHTML+CSS兼容性解决方案小集

　　使用XHTML＋CSS构架好处不少，但也确实存在一些问题，不论是因为使用不熟练还是思路不清晰，我就先把一些我遇到的问题写在下面，省的大家四处找^^

　　1.在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法：div{ margin:30px!important;margin:28px; }

　　注意这两个margin的顺序一定不能写反，据阿捷的说法!important这个属性IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成这样：div{ maring:30px;margin:28px }

　　重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important;

　　2.IE5 和IE6的BOX解释不一致IE5下div{ width:300px;margin:0 10px 0 10px; }div的宽度会被解释为300px-10px(右填充)-10px(左填充)最终div的宽度为280px，而在IE6和其他浏览器上宽度则是以300px+10px(右填充)+10px(左填充)=320px来计算的。这时我们可以做如下修改div{ width:300px!important;width /**/:340px;margin:0 10px 0 10px }，关于这个/**/是什么我也不太明白，只知道IE5和firefox都支持但IE6不支持，如果有人理解的话，请告诉我一声，谢了！：）

　　3.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义ul{ margin:0;padding:0; }就能解决大部分问题

　　4.关于脚本，在xhtml1.1中不支持language属性，只需要把代码改为 script type="text/javascript"

离开了杀毒软件, 我们就不能活了吗?

Sun, 09 Jul 2006 02:16:43 +0000

来源: 天极安全

引用

这篇文章真的很牛...为寻找各种"特别"版本而四处奔走的日子难道真的可以这样结束? 不管怎样, 还是看完本文再下定论.
　　时下反病毒软件竞争激烈,勿庸置疑给广大用户提供了好多选择的余地,也带来了很多实惠,那么离开了杀毒软件,我们是不是就不能活了呢? 在杀毒软件之外,我们能不能打造一条自己的反病毒防线呢?就让笔者来带着大家找找答案吧!
防线一:卸载WSH,所有的VBS病毒、基于Script病毒将完全失效,无论是已知还是未知!
　　小知识:
　　WSH是Windows Scripting Host(Windows脚本主机)的缩略形式.WSH这个概念最早出现于Windows 98操作系统,是一个基于32位 Windows 平台、语言无关性 ( language-independent ) 的脚本主机.比如:你自己编写了一个脚本文件,如后缀为 .vbs 或.js 的文件,然后在 Windows 下双击并执行它,这时,系统就会自动调用一个适当的程序来对它进行解释并执行,而这个程序,就是Windows Scripting Host,程序执行文件名为 Wscript.exe (若是在DOS命令提示符下,则为Cscript.exe).
　　为了建筑第一条防线,建议一般用户卸载WSH.对于Windows 98,WSH是作为操作系统的一个组件自动安装的,但用户可以从控制面板→添加/删除程序→Windows安装程序→附件,然后将"Windows Scripting Host"前的对勾去掉,再确定即可.对于Windows 2000/XP和Windows ME,从Windows资源管理器→工具→文件夹选项→文件类型,将滚动条下移找到VBScript脚本文件,将其删除,即可实现"伪卸载"(这种方法未能卸载系统中的WSH,只能保证vbs文件无法运行).
　　小提示:
　　常见的VBS病毒、基于Script病毒有"爱虫"病毒、主页(Homepage)病毒等,卸载了WSH的计算机可以有效的防止这些病毒.
防线二:禁止"JAVA小程序脚本",所有写注册标的恶意代码完全失效,无论已知还是未知!
　　在网页中使用JAVA小程序可以大量丰富内容,实现各种特殊效果.然而,如同双刃剑一样,恶意脚本也随之而来.禁用方法如下:控制面板->Internet选项->安全->自定义级别.在"Java小程序脚本"选项中选择"禁用",在"脚本"选项中的"活动脚本"选项中也选择"禁用",然后确定即可(如图1).

　　禁止JAVA小程序脚本后,网页上将有很多特效看不到.然而,安全与花俏不可兼得,请自行抉择.
　　小提示:
　　禁止JAVA小程序脚本对网上的HTM/JS有效,但对本地文件无效.就是说,将恶意网页下载到本机运行,禁止JAVA小程序脚本是不能阻止恶意代码的.
防线三:打上补丁IE55SP2或安装IE6,所有IFRAME格式的病毒完全失效,无论已知还是未知;
　　有很多大名鼎鼎的病毒都是针对IE的IFRAME漏洞进行攻击的,比如Nimda(尼姆达)病毒、"中国黑客"病毒、"求职信"病毒、HappyTime(欢乐时光)病毒等等.可见此漏洞的严重性.下面列举了补丁的下载地址,强烈建议升级.
　　补丁下载地址:
　　IE55SP2:

点击这里下载

　　IE6.0:

点击这里下载

防线四:禁止宏功能,所有宏病毒完全失效,无论已知还是未知!
　　宏病毒是一些别有用心的人,利用Microsoft Office的开放性,即Word中提供的VBA编程接口,专门制作的一个或多个具有病毒特点的宏的集合.一旦打开这样的文档,其中的宏就会被执行,于是宏病毒就会被激活,转移到计算机上,并驻留在Normal 模板上.从此以后,所有自动保存的文档都会"感染"上这种宏病毒,而且如果其他用户打开了感染病毒的文档,宏病毒又会转移到他的计算机上.
　　WORD本身带有一定的防病毒机制.当我们打开带有宏的DOC文档时,MSWORD将提出警告并可禁用宏.然而,如果禁用宏,打开的文件便不能修改(只读),为我们操作带来麻烦.其实,我们可以进入C:Program FilesMicrosoft OfficeOffice(假设你的Office安装在C盘),将MSWORD9.OLB(Office2000)或MSWORD.OLB(OfficeXP)文件删除或改名.这样,以后打开带有宏病毒的文件,除了警告信息(正好发现病毒而且可以不理)再凶恶的病毒也不会发作,WORD将安全地带毒运行.不过以后WORD将不能使用宏,也不能作为OLE服务器,不过大多数用户不会使用这些功能.如果要用,说明你是宏的高手,当然也不应该害怕宏病毒.

CSS优化

Sun, 30 Apr 2006 12:01:46 +0000

一、使用css缩写使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则请参看《常用css缩写语法总结》，这里就不展开描述。
二.明确定义单位，除非值为0
忘记定义尺寸的单位是CSS新手普遍的错误。在HTML中你可以只写width=100，但是在CSS中，你必须给一个准确的单位，比如：width: 100px width:100em。只有两个例外情况可以不定义单位：行高和0值。除此以外，其他值都必须紧跟单位，注意，不要在数值和单位之间加空格。
三.区分大小写
当在XHTML中使用CSS，CSS里定义的元素名称是区分大小写的。为了避免这种错误，我建议所有的定义名称都采用小写。
class和id的值在HTML和XHTML中也是区分大小写的，如果你一定要大小写混合写，请仔细确认你在CSS的定义和XHTML里的标签是一致的。
四.取消class和id前的元素限定
当你写给一个元素定义class或者id，你可以省略前面的元素限定，因为ID在一个页面里是唯一的，class可以在页面中多次使用。你限定某个元素毫无意义。例如：
div#content { /* declarations */ }
fieldset.details { /* declarations */ }
可以写成
#content { /* declarations */ }
.details { /* declarations */ }
这样可以节省一些字节。
五.默认值
通常padding的默认值为0，background-color的默认值是transparent。但是在不同的浏览器默认值可能不同。如果怕有冲突，可以在样式表一开始就先定义所有元素的margin和padding值都为0，象这样：
* {
margin:0;
padding:0;
}
六.不需要重复定义可继承的值
CSS中，子元素自动继承父元素的属性值，象颜色、字体等，已经在父元素中定义过的，在子元素中可以直接继承，不需要重复定义。但是要注意，浏览器可能用一些默认值覆盖你的定义。
七.最近优先原则
如果对同一个元素的定义有多种，以最接近(最小一级)的定义为最优先，例如有这么一段代码
Update: Lorem ipsum dolor set
在CSS文件中，你已经定义了元素p，又定义了一个classupdate
p {
margin:1em 0;
font-size:1em;
color:#333;
}
.update {
font-weight:bold;
color:#600;
}
这两个定义中，class=update将被使用，因为class比p更近。你可以查阅W3C的《 Calculating a selector’s specificity》了解更多。
八.多重class定义
一个标签可以同时定义多个class。例如：我们先定义两个样式，第一个样式背景为#666；第二个样式有10 px的边框。
.one{width:200px;background:#666;}
.two{border:10px solid #F00;}
在页面代码中，我们可以这样调用
这样最终的显示效果是这个div既有#666的背景，也有10px的边框。是的，这样做是可以的，你可以尝试一下。
九.使用子选择器(descendant selectors)
CSS初学者不知道使用子选择器是影响他们效率的原因之一。子选择器可以帮助你节约大量的class定义。我们来看下面这段代码：

Item 1

Item 1

Item 1

这段代码的CSS定义是：
div#subnav ul { /* Some styling */ }
div#subnav ul li.subnavitem { /* Some styling */ }
div#subnav ul li.subnavitem a.subnavitem { /* Some styling */ }
div#subnav ul li.subnavitemselected { /* Some styling */ }
div#subnav ul li.subnavitemselected a.subnavitemselected { /* Some styling */ }
你可以用下面的方法替代上面的代码

Item 1

Item 1

Item 1

样式定义是：
#subnav { /* Some styling */ }
#subnav li { /* Some styling */ }
#subnav a { /* Some styling */ }
#subnav .sel { /* Some styling */ }
#subnav .sel a { /* Some styling */ }
用子选择器可以使你的代码和CSS更加简洁、更加容易阅读。
十.不需要给背景图片路径加引号
为了节省字节，我建议不要给背景图片路径加引号，因为引号不是必须的。例如：
background:url(images/***.gif) #333;
可以写为
background:url(images/***.gif) #333;
如果你加了引号，反而会引起一些浏览器的错误。
十一.组选择器(Group selectors)
当一些元素类型、class或者id都有共同的一些属性，你就可以使用组选择器来避免多次的重复定义。这可以节省不少字节。
例如：定义所有标题的字体、颜色和margin，你可以这样写：
h1,h2,h3,h4,h5,h6 {
font-family:Lucida Grande,Lucida,Arial,Helvetica,sans-serif;
color:#333;
margin:1em 0;
}
如果在使用时，有个别元素需要定义独立样式，你可以再加上新的定义，可以覆盖老的定义，例如：
h1 { font-size:2em; }
h2 { font-size:1.6em; }
十二.用正确的顺序指定链接的样式
当你用CSS来定义链接的多个状态样式时，要注意它们书写的顺序，正确的顺序是：:link :visited :hover :active。抽取第一个字母是LVHA，你可以记忆成LoVe HAte(喜欢讨厌)。为什么这么定义，可以参考Eric Meyer的《Link Specificity》。
如果你的用户需要用键盘来控制，需要知道当前链接的焦点，你还可以定义:focus属性。:focus属性的效果也取决与你书写的位置，如果你希望聚焦元素显示:hover效果，你就把:focus写在:hover前面；如果你希望聚焦效果替代:hover效果，你就把:focus放在:hover后面。
十三.清除浮动
一个非常常见的CSS问题，定位使用浮动的时候，下面的层被浮动的层所覆盖，或者层里嵌套的子层超出了外层的范围。
通常的解决办法是在浮动层后面添加一个额外元素，例如一个div或者一个br，并且定义它的样式为clear: both。这个办法有一点牵强，幸运的是还有一个好办法可以解决，参看这篇文章《How To Clear Floats Without Structural Markup》(注：本站将尽快翻译此文)。
上面2种方法可以很好解决浮动超出的问题，但是如果当你真的需要对层或者层里的对象进行clear的时候怎么办？一种简单的方法就是用overflow属性，这个方法最初的发表在《Simple Clearing of Floats》，又在《Clearance》和《Super simple clearing floats》中被广泛讨论。
上面那一种clear方法更适合你，要看具体的情况，这里不再展开论述。另外关于float的应用，一些优秀的文章已经说得很清楚，推荐你阅读：《Floatutorial》、《Containing Floats》和《Float Layouts》
十四.横向居中(centering)
这是一个简单的技巧，但是值得再说一遍，因为我看见太多的新手问题都是问这个：CSS如何横向居中？你需要定义元素的宽，并且定义横向的margin，如果你的布局包含在一个层(容器)中，就象这样：
你可以这样定义使它横向居中：
#wrap {
width:760px; /* 修改为你的层的宽度 */
margin:0 auto;
}
但是IE5/Win不能正确显示这个定义，我们采用一个非常有用的技巧来解决：用text-align属性。就象这样：
body {
text-align:center;
}
#wrap {
width:760px; /* 修改为你的层的宽度 */
margin:0 auto;
text-align:left;
}
第一个body的text-align:center; 规则定义IE5/Win中body的所有元素居中(其他浏览器只是将文字居中) ，第二个text-align:left;是将#warp中的文字居左。
十五.导入(Import)和隐藏CSS
因为老版本浏览器不支持CSS，一个通常的做法是使用@import技巧来把CSS隐藏起来。例如：
@import url(main.css);
然而，这个方法对IE4不起作用，这让我很是头疼了一阵子。后来我用这样的写法：
@import main.css;
这样就可以在IE4中也隐藏CSS了，呵呵，还节省了5个字节呢。想了解@import语法的详细说明，可以看这里《centricle’s css filter chart》
十六.针对IE的优化
有些时候，你需要对IE浏览器的bug定义一些特别的规则，这里有太多的CSS技巧(hacks)，我只使用其中的两种方法，不管微软在即将发布的IE7 beta版里是否更好的支持CSS，这两种方法都是最安全的。
1.注释的方法
(a)在IE中隐藏一个CSS定义，你可以使用子选择器(child selector):
html>body p {
/* 定义内容 */
}
(b)下面这个写法只有IE浏览器可以理解(对其他浏览器都隐藏)
* html p {
/* declarations */
}
(c)还有些时候，你希望IE/Win有效而IE/Mac隐藏，你可以使用反斜线技巧：
/* */
* html p {
declarations
}
/* */
2.条件注释(conditional comments)的方法
另外一种方法，我认为比CSS　Hacks更加经得起考验就是采用微软的私有属性条件注释(conditional comments)。用这个方法你可以给IE单独定义一些样式，而不影响主样式表的定义。就象这样：
十七.调试技巧：层有多大？
当调试CSS发生错误，你就要象排版工人，逐行分析CSS代码。我通常在出问题的层上定义一个背景颜色，这样就能很明显看到层占据多大空间。有些人建议用 border，一般情况也是可以的，但问题是，有时候border 会增加元素的尺寸，border-top和boeder-bottom会破坏纵向margin的值，所以使用background更加安全些。
另外一个经常出问题的属性是outline。outline看起来象boeder，但不会影响元素的尺寸或者位置。只有少数浏览器支持outline属性，我所知道的只有Safari、OmniWeb、和Opera。
十八.CSS代码书写样式
在写CSS代码的时候，对于缩进、断行、空格，每个人有每个人的书写习惯。在经过不断实践后，我决定采用下面这样的书写样式：
selector1,
selector2 {
property:value;
}
当使用联合定义时，我通常将每个选择器单独写一行，这样方便在CSS文件中找到它们。在最后一个选择器和大括号{之间加一个空格，每个定义也单独写一行，分号直接在属性值后，不要加空格。
我习惯在每个属性值后面都加分号，虽然规则上允许最后一个属性值后面可以不写分号，但是如果你要加新样式时容易忘记补上分号而产生错误，所以还是都加比较好。
最后，关闭的大括号}单独写一行。
空格和换行有助与阅读。

网页设计应注意的问题

Fri, 17 Mar 2006 16:40:05 +0000

　由于不同的搜索引擎在网页支持方面存在差异，因此在设计网页时不要只注意外观漂亮，许多平常设计网页时常用到的元素到了搜索引擎那里会产生问题。

框架结构（Frame Sets）
　　有些搜索引擎（如FAST）是不支持框架结构的，他们的“蜘蛛”程序无法阅读这样的网页。

图象区块（Image Maps）
　　除AltaVista、Google和Northern Light（现已停止公共搜索服务）明确支持图像区块链接外，其他引擎是不支持它的。当“蜘蛛”程序遇到这种结构时，往往会感到茫然不知所措。因此尽量不要设置Image Map链接。

特效链接
　　我们经常看到有些网站为导航链接加上了特效，如点击某个项目会展开下层链接等。这些效果一般通过Java Script实现，视觉上非常新颖，但在“蜘蛛”程序的眼里则没那么诱人，相反它无法解读这种链接。为了让搜索引擎顺利检索到你的网页，建议还是牺牲掉一些花哨的东西。

FLASH
　　虽然FLASH制作的网页视觉效果较好，但搜索引擎对此却不太感冒，个案表明这一类的网站很难被百度搜索引擎索引。明智的做法是提供FLASH和非FLASH网页两种选择，这样即增加了网页的观赏性，又照顾到了搜索引擎的情绪。

动态网页（Dynamic Pages）
　　任何地址中带“？”号、“&”号（及其他类似符号）的网页都会把“蜘蛛”程序挡在门外。这些网页通常由CGI、PHP、ASP等程序产生，技术上较先进，但不适合搜索引擎的“蜘蛛”程序。虽然目前有的大型搜索引擎（如Google）已具备检索动态网页的能力，但相当一部分数引擎还是不支持它的。而且即使是能够索引动态网页的Google，也在多个场合中明确表示不保证检索全部的动态网页。

　　因此，除非是超大型网站，为方便起见不得不采用动态网页生成技术，否则还是尽量使用静态网页为好。

加密网页
　　除非你不希望搜索引擎检索你的网页，否则不要给你的网页加密。

网页容量
　　包括图像在内的网页字节数最好不要超过50K。体型庞大的网页下载速度慢，不仅会让普通访问者等得心急如焚，有时也会使“蜘蛛”程序感到不耐烦。

div＋css布局入门

Wed, 15 Feb 2006 04:59:36 +0000

你正在学习CSS布局吗？是不是还不能完全掌握纯CSS布局？通常有两种情况阻碍你的学习：
第一种可能是你还没有理解CSS处理页面的原理。在你考虑你的页面整体表现效果前，你应当先考虑内容的语义和结构，然后再针对语义、结构添加CSS。这篇文章将告诉你应该怎样把HTML结构化。
另一种原因是你对那些非常熟悉的表现层属性(例如：cellpadding,、hspace、align="left"等等)束手无策，不知道该转换成对应的什么CSS语句。当你解决了第一种问题，知道了如何结构化你的HTML，我再给出一个列表，详细列出原来的表现属性用什么CSS来代替。
结构化HTML
我们在刚学习网页制作时，总是先考虑怎么设计，考虑那些图片、字体、颜色、以及布局方案。然后我们用Photoshop或者Fireworks画出来、切割成小图。最后再通过编辑HTML将所有设计还原表现在页面上。
如果你希望你的HTML页面用CSS布局(是CSS-friendly的)，你需要回头重来，先不考虑“外观”，要先思考你的页面内容的语义和结构。
外观并不是最重要的。一个结构良好的HTML页面可以以任何外观表现出来，CSS Zen Garden是一个典型的例子。CSS Zen Garden帮助我们最终认识到CSS的强大力量。
HTML不仅仅只在电脑屏幕上阅读。你用photoshop精心设计的画面可能不能显示在PDA、移动电话和屏幕阅读机上。但是一个结构良好的HTML页面可以通过CSS的不同定义，显示在任何地方，任何网络设备上。
开始思考
首先要学习什么是"结构"，一些作家也称之为"语义"。这个术语的意思是你需要分析你的内容块，以及每块内容服务的目的，然后再根据这些内容目的建立起相应的HTML结构。
如果你坐下来仔细分析和规划你的页面结构，你可能得到类似这样的几块：
标志和站点名称
主页面内容
站点导航(主菜单)
子菜单
搜索框
功能区(例如购物车、收银台)
页脚(版权和有关法律声明)
我们通常采用DIV元素来将这些结构定义出来，类似这样：

这不是布局，是结构。这是一个对内容块的语义说明。当你理解了你的结构，就可以加对应的ID在DIV上。DIV容器中可以包含任何内容块，也可以嵌套另一个DIV。内容块可以包含任意的HTML元素---标题、段落、图片、表格、列表等等。
根据上面讲述的，你已经知道如何结构化HTML，现在你可以进行布局和样式定义了。每一个内容块都可以放在页面上任何地方，再指定这个块的颜色、字体、边框、背景以及对齐属性等等。
使用选择器是件美妙的事
id的名称是控制某一内容块的手段,通过给这个内容块套上DIV并加上唯一的id,你就可以用CSS选择器来精确定义每一个页面元素的外观表现,包括标题、列表、图片、链接或者段落等等。例如你为#header写一个CSS规则，就可以完全不同于#content里的图片规则。
另外一个例子是：你可以通过不同规则来定义不同内容块里的链接样式。类似这样：#globalnav a:link或者 #subnav a:link或者#content a:link。你也可以定义不同内容块中相同元素的样式不一样。例如，通过#content p和#footer p分别定义#content和#footer中p的样式。从结构上讲，你的页面是由图片、链接、列表、段落等组成的，这些元素本身并不会对显示在什么网络设备中(PDA还是手机或者网络电视)有影响，它们可以被定义为任何的表现外观。
一个仔细结构化的HTML页面非常简单，每一个元素都被用于结构目的。当你想缩进一个段落，不需要使用blockquote标签，只要使用p标签，并对p加一个CSS的margin规则就可以实现缩进目的。p是结构化标签，margin是表现属性，前者属于HTML，后者属于CSS。(这就是结构于表现的相分离.)
良好结构的HTML页面内几乎没有表现属性的标签。代码非常干净简洁。例如，原先的代码，现在可以只在HTML中写

，所有控制表现的东西都写到CSS中去，在结构化的HTML中，table就是表格，而不是其他什么(比如被用来布局和定位)。
亲自实践一下结构化
上面说的只是最基本的结构，实际应用中，你可以根据需要来调整内容块。常常会出现DIV嵌套的情况，你会看到"container"层中又有其它层，结构类似这样：

a list

another list

嵌套的div元素允许你定义更多的CSS规则来控制表现，例如：你可以给#navcontainer一个规则让列表居右，再给#globalnav一个规则让列表居左，而给#subnav的list另一个完全不同的表现。
用CSS替换传统方法
下面的列表将帮助你用CSS替换传统方法：
HTML属性以及相对应的CSS方法
HTML属性 CSS方法说明
align="left"
align="right" float: left;
float: right; 使用CSS可以浮动任何元素:图片、段落、div、标题、表格、列表等等
当你使用float属性，必须给这个浮动元素定义一个宽度。
marginwidth="0" leftmargin="0" marginheight="0" topmargin="0" margin: 0; 使用CSS, margin可以设置在任何元素上, 不仅仅是body元素.更重要的，你可以分别指定元素的top, right, bottom和left的margin值。
vlink="#333399" alink="#000000" link="#3333FF" a:link #3ff;
a:visited: #339;
a:hover: #999;
a:active: #00f;
在HTML中，链接的颜色作为body的一个属性值定义。整个页面的链接风格都一样。使用CSS的选择器，页面不同部分的链接样式可以不一样。
bgcolor="#FFFFFF" background-color: #fff; 在CSS中，任何元素都可以定义背景颜色，不仅仅局限于body和table元素。
bordercolor="#FFFFFF" border-color: #fff; 任何元素都可以设置边框(boeder)，你可以分别定义top, right, bottom和left
border="3"
cellspacing="3" border-width: 3px; 用CSS，你可以定义table的边框为统一样式，也可以分别定义top, right, bottom and left边框的颜色、尺寸和样式。
你可以使用 table, td or th 这些选择器.
如果你需要设置无边框效果，可以使用CSS定义： border-collapse: collapse;

clear: left;
clear: right;
clear: both;
许多2列或者3列布局都使用 float属性来定位。如果你在浮动层中定义了背景颜色或者背景图片，你可以使用clear属性.
cellpadding="3"
vspace="3"
hspace="3" padding: 3px; 用CSS，任何元素都可以设定padding属性，同样，padding可以分别设置top, right, bottom and left。padding是透明的。
align="center" text-align: center;
margin-right: auto; margin-left: auto;
Text-align 只适用于文本.
象div，p这样的块级怨毒可以通过margin-right: auto; 和margin-left: auto;来水平居中

一些令人遗憾的技巧和工作环境
由于浏览器对CSS支持的不完善，我们有时候不得不采取一些技巧(hacks)或建立一种环境(Workarounds)来让CSS实现传统方法同样的效果。例如块级元素有时侯需要使用水平居中的技巧，盒模型bug的技巧等等。所有这些技巧都在Molly Holzschlag的文章《Integrated Web Design: Strategies for Long-Term CSS Hack Management》中有详细说明。
另外一个关于CSS技巧的资源站点是Big John和Holly Bergevin的“Position is Everything”。
理解浮动行为
Eric Meyer的《Containing Floats》将帮助你掌握如何使用float属性布局。float元素有时候需要清除(clear)，阅读《How To Clear Floats Without Structural Markup》将非常有帮助。
更多帮助
已有的《CSS Discussion》列表是很好的资源，它收集了一个WiKiA讨论组的信息，其中包括CSS布局总结(css-discuss.incutio.com/?page=CssLayouts)，CSS 技巧总结 (css-discuss.incutio.com/?page=CssHack) 以及更多

CSS速记小纸片+CSS参考表

Tue, 14 Feb 2006 15:15:23 +0000

字体属性：(font)
大小 font-size: x-large;(特大) xx-small;(极小) 一般中文用不到，只要用数值就可以，单位：PX、PD
样式 font-style: oblique;(偏斜体) italic;(斜体) normal;(正常)
行高 line-height: normal;(正常) 单位：PX、PD、EM
粗细 font-weight: bold;(粗体) lighter;(细体) normal;(正常)
变体 font-variant: small-caps;(小型大写字母) normal;(正常)
大小写 text-transform: capitalize;(首字母大写) uppercase;(大写) lowercase;(小写) none;(无)
修饰 text-decoration: underline;(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁)
常用字体：(font-family)
"Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana

背景属性：(background)
色彩 background-color: #FFFFFF;
图片 background-image: url();
重复 background-repeat: no-repeat;
滚动 background-attachment: fixed;(固定) scroll;(滚动)
位置 background-position: left(水平) top(垂直);
简写方法 background:#000 url(..) repeat fixed left top;

区块属性：(Block)
字间距 letter-spacing: normal; 数值
对刘 text-align: justify;(两端对齐) left;(左对齐) right;(右对齐) center;(居中)
缩进 text-indent: 数值px;
垂直对齐 vertical-align: baseline;(基线) sub;(下标) super;(下标) top; text-top; middle; bottom; text-bottom;
词间距 word-spacing: normal; 数值
空格 white-space: pre;(保留) nowrap;(不换行)
显示 display:block;(块) inline;(内嵌) list-item;(列表项) run-in;(追加部分) compact;(紧凑) marker;(标记) table; inline-table; table-raw-group; table-header-group; table-footer-group; table-raw; table-column-group; table-column; table-cell; table-caption;(表格标题)

方框属性：(Box)
width:; height:; float:; clear:both; margin:; padding:; 顺序：上右下左

边框属性：(Border)
border-style: dotted;(点线) dashed;(虚线) solid; double;(双线) groove;(槽线) ridge;(脊状) inset;(凹陷) outset;
border-width:; 边框宽度
border-color:#;
简写方法 border：width style color;

列表属性：(List-style)
类型 list-style-type:disc;(圆点) circle;(圆圈) square;(方块) decimal;(数字) lower-roman;(小罗码数字) upper-roman; lower-alpha; upper-alpha;
位置 list-style-position: outside;(外) inside;
图像 list-style-image: url(..);

定位属性：(Position)
Position: absolute; relative; static;
visibility: inherit; visible; hidden;
overflow: visible; hidden; scroll; auto;
clip: rect(12px,auto,12px,auto) (裁切)

CSS2 中文手册

Fri, 26 Aug 2005 05:29:16 +0000

http://www.51windows.net/pages/css2/
很有用的东西