公司網(wǎng)站最近一個(gè)月統(tǒng)計(jì)出來(lái)的訪客分辨率報(bào)表圖：

可見(jiàn)，目前使用800*600的幾乎是微乎其微了，1024還是居于上風(fēng)，目前19，21寸甚至更大的顯示正在逐步被廣泛使用，所以N年前流行的778，780等等都好像是幾個(gè)世紀(jì)以前的事情了。

再看一組數(shù)據(jù)

上面都是Alexa全球排名前100的站點(diǎn)，而且WordPress的皮膚，百分之90以上都是960px寬。為什么設(shè)計(jì)師們都喜歡這個(gè)數(shù)據(jù)(950px/960px)呢？以下部分轉(zhuǎn)自網(wǎng)頁(yè)柵格系統(tǒng)研究（1）：960的秘密，作者：玉伯

設(shè)計(jì)師們對(duì)蘋(píng)果情有獨(dú)衷。在 1024 x 768 的分辨率下，打開(kāi)Firefox：

自然狀態(tài)下，F(xiàn)irefox窗體的大小約為 974 x 650. 減掉左右兩邊7px的邊框，網(wǎng)頁(yè)的實(shí)際大小為上圖中的紅色部分，高寬為 960 x 650.

數(shù)字背后的奧妙

上面的“自然”出現(xiàn)，細(xì)究自然是不讓人信服的。蘋(píng)果系統(tǒng)的設(shè)計(jì)者們?cè)跊](méi)有喝醉酒的情況下選擇了960，而不是其它什么1000之類(lèi)的整數(shù)，自然另有奧妙。

科學(xué)界有很多問(wèn)題都可以歸結(jié)到數(shù)學(xué)問(wèn)題上，我們也從數(shù)學(xué)著手：

960可以分解為2的6次方乘以3和5, 這使得960可以分割成以下寬度的整數(shù)倍：

2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40,
48, 60, 64, 80, 96, 120, 160, 192, 240, 320, 480

共26種（26 = 7 * 2 * 2 – 2, 減去2是去掉1和960自身），我們標(biāo)記為：

N(960) = N(2^6 * 3 * 5) = 26

根據(jù)上面的算法，可以得到：

N(360) = N(2^3 * 3^2 * 5) = 22
N(480) = N(2^5 * 3 * 5) = 22
N(720) = N(2^4 * 3^2 * 5) = 28
N(750) = N(2 * 3 * 5^3) = 14
N(800) = N(2^5 * 5^2) = 16
N(960) = N(2^6 * 3 * 5) = 26
N(1000) = N(2^3 * 5^3) = 14
N(1024) = N(2^10) = 9
N(1440) = N(2^6 * 3^2 * 5) = 34
N(1920) = N(2^7 * 3 * 5) = 30

根據(jù)直覺(jué)（嚴(yán)格證明也不難，不過(guò)還是留給數(shù)學(xué)系的學(xué)生去證明吧），我們得到一個(gè)有趣的結(jié)論：

要使得N(width)最大，width的取值有兩個(gè)系列：

A系列： …, 320, 720, 1440, …

B系列： …, 480, 960, 1920, …

N越大，可組合的寬度值就越多。對(duì)柵格系統(tǒng)來(lái)說(shuō)，這意味著越靈活！

目前絕大多數(shù)顯示器都支持 1024 x 768 及其以上分辨率。為了有效的利用屏幕寬度同時(shí)保證柵格的靈活度，可以看出960是非常合適的。這樣，在目前主流顯示器下，960就成為網(wǎng)頁(yè)柵格系統(tǒng)中的最佳寬度了。（也許不久的將來(lái)，將會(huì)流行1440）

以上內(nèi)容轉(zhuǎn)自http://lifesinger.org/blog/?p=375

從零開(kāi)始學(xué)習(xí)jQuery (一) 開(kāi)天辟地入門(mén)篇

從零開(kāi)始學(xué)習(xí)jQuery (二) 萬(wàn)能的選擇器

從零開(kāi)始學(xué)習(xí)jQuery (三) 管理jQuery包裝集

從零開(kāi)始學(xué)習(xí)jQuery (四) 使用jQuery操作元素的屬性與樣式

從零開(kāi)始學(xué)習(xí)jQuery (五) 事件與事件對(duì)象

從零開(kāi)始學(xué)習(xí)jQuery (六) jQuery中的Ajax

從零開(kāi)始學(xué)習(xí)jQuery (七) jQuery動(dòng)畫(huà)-讓頁(yè)面動(dòng)起來(lái)!

從零開(kāi)始學(xué)習(xí)jQuery (八) 插播:jQuery實(shí)施方案

從零開(kāi)始學(xué)習(xí)jQuery (九) jQuery工具函數(shù)

從零開(kāi)始學(xué)習(xí)jQuery (十) jQueryUI常用功能實(shí)戰(zhàn)

從零開(kāi)始學(xué)習(xí)jQuery (十一) 實(shí)戰(zhàn)表單驗(yàn)證與自動(dòng)完成提示插件

淘寶網(wǎng)用戶(hù)體驗(yàn)設(shè)計(jì)UED： http://ued.taobao.com/blog/
口碑網(wǎng)用戶(hù)體驗(yàn)設(shè)計(jì)UED： http://ued.koubei.com/
阿里媽媽用戶(hù)體驗(yàn)設(shè)計(jì)UED： http://ued.alimama.com/
阿里巴巴(中國(guó)站) 用戶(hù)體驗(yàn)部： http://www.aliued.cn/
阿里軟件UED團(tuán)隊(duì)： http://www.alisoftued.com
19樓UED團(tuán)隊(duì)： http://ued.dukuai.com/blog/
用戶(hù)為中心的設(shè)計(jì)(UCD),UCD大社區(qū),http://ucdchina.com/

個(gè)人技術(shù)博客：
李會(huì)軍：http://www.dotneteye.cnorg 去過(guò)博客園的應(yīng)該都知道吧，神仙級(jí)專(zhuān)家。
趙劼：http://www.cnblogs.com/JeffreyZhao/ 同上，為博客員知名專(zhuān)家，特佩服他！
淘寶玉伯：http://lifesinger.org/blog/ 淘寶前端，對(duì)前端細(xì)節(jié)研究很深入！博客更新也算頻繁。
淘寶懌飛：http://www.planabc.net/ 淘寶前端，花名圓心，博客內(nèi)容也很值得看。
cssrain:http://www.cssrain.cn/ 懶人開(kāi)發(fā)人員一定要去看看哦，資源超多，很多效果例子。特別是jquery。

源碼站：
http://www.codeplex.com 微軟的.NET源碼發(fā)布站，很多很好的.NET源代碼

用戶(hù)體驗(yàn)（User Experience，簡(jiǎn)稱(chēng)UX 或 UE）是一種純主觀的在用戶(hù)使用一個(gè)產(chǎn)品（服務(wù)）的過(guò)程中建立起來(lái)的心理感受。因?yàn)樗羌冎饔^的，就帶有一定的不確定因素。個(gè)體差異也決定了每個(gè)用戶(hù)的真實(shí)體驗(yàn)是無(wú)法通過(guò)其他途徑來(lái)完全模擬或再現(xiàn)的。但是對(duì)于一個(gè)界定明確的用戶(hù)群體來(lái)講，其用戶(hù)體驗(yàn)的共性是能夠經(jīng)由良好設(shè)計(jì)的實(shí)驗(yàn)來(lái)認(rèn)識(shí)到。計(jì)算機(jī)技術(shù)和互聯(lián)網(wǎng)的發(fā)展，使技術(shù)創(chuàng)新形態(tài)正在發(fā)生轉(zhuǎn)變，以用戶(hù)為中心、以人為本越來(lái)越得到重視，用戶(hù)體驗(yàn)也因此被稱(chēng)做創(chuàng)新2.0模式的精髓。”—–百度百科

現(xiàn)在，幾乎人人都在談、在做用戶(hù)體驗(yàn)，有為了用戶(hù)體驗(yàn)而用戶(hù)體驗(yàn)的；有不知何為用戶(hù)體驗(yàn)，就亂指揮一通的；有做了幾天可用性改進(jìn)就宣稱(chēng)飛躍的…..當(dāng)然，也有很多是踏踏實(shí)實(shí)為廣大人民做實(shí)事，做好產(chǎn)品設(shè)計(jì)的。
不管怎樣，以下的思考文字中希望有那么一點(diǎn)點(diǎn)是閃光的。
 
看了百度百科的詞條，結(jié)合自己的經(jīng)驗(yàn)，可以這么理解：用戶(hù)體驗(yàn)，是通過(guò)接觸某樣有形或者無(wú)形的事物后，建立在用戶(hù)身上的一個(gè)范圍比較廣的情感疊加，跟樂(lè)高積木是一樣一樣的，堆得好，可以很高，某一塊不穩(wěn)，就會(huì)全倒下。那，到底有多廣呢？

1.一個(gè)購(gòu)書(shū)體驗(yàn)：流程流暢度

給自己買(mǎi)一本書(shū)，我想到的是淘寶和當(dāng)當(dāng)，有人會(huì)說(shuō)：買(mǎi)書(shū)當(dāng)然去當(dāng)當(dāng)或者卓越了。我不是這么認(rèn)為的，首先，都是網(wǎng)購(gòu)，淘寶也賣(mài)書(shū)，并且能討價(jià)還價(jià)，能了解更多細(xì)節(jié)，而當(dāng)當(dāng)不能，但如果在淘寶上價(jià)格太高，沒(méi)有當(dāng)當(dāng)劃算，且不是很急著買(mǎi)，那我會(huì)選擇當(dāng)當(dāng)。
—–這里面有兩個(gè)點(diǎn)：網(wǎng)絡(luò)購(gòu)物習(xí)慣養(yǎng)成的條件反射 和  買(mǎi)賣(mài)家之間的交流 ，這兩個(gè)是體驗(yàn)的一部分。
決定上當(dāng)當(dāng)后，打開(kāi)首頁(yè)，logo旁的“十年品質(zhì) 放心低價(jià)”，有點(diǎn)暖，而導(dǎo)航下左邊的這個(gè)綠色突出的區(qū)域也表明，當(dāng)當(dāng)主要核心業(yè)務(wù)就是書(shū)！整個(gè)配色在視覺(jué)上挺舒服，而導(dǎo)航和搜索也讓我很快找到我要買(mǎi)的書(shū)—《教父》。

——站點(diǎn)的載入速度是個(gè)大問(wèn)題，當(dāng)當(dāng)基本能在3秒內(nèi)打開(kāi)首頁(yè)，不錯(cuò)的優(yōu)化。廣告語(yǔ)和用色貼合國(guó)內(nèi)消費(fèi)人群的心理，起碼對(duì)于我來(lái)說(shuō)，覺(jué)得：可信賴(lài)，不太亂。
找到我要的書(shū)后，我點(diǎn)擊了購(gòu)買(mǎi)，進(jìn)入了我的購(gòu)物車(chē)，有一個(gè)疑慮、不舒服：

—–不知道這個(gè)是好，還是壞，可能對(duì)于不同的人，有不同的感受，這個(gè)推薦本身是很好的，但讓我疑惑的是，它大面積的空間和眾多黃色按鈕，讓我找不著北了，因?yàn)榈竭@步，我心里想著：該結(jié)算了，但處于商業(yè)目的，推薦區(qū)域在一定程度上(或許我比較閑的時(shí)候，推薦對(duì)我有用)干擾了我。
接下來(lái)的結(jié)算流程很順利，我選擇的是貨到付款，很好的是：最后提示我，發(fā)貨地點(diǎn)是廣州，會(huì)在2-3天后發(fā)貨，郵箱也很快收到訂單生成的郵件。接下來(lái)就是等待，三天后，接到聲音不太舒服的電話(huà)，說(shuō)是當(dāng)當(dāng)網(wǎng)的，我想，應(yīng)該是書(shū)到了。可憐的是，對(duì)方收錢(qián)時(shí)，零錢(qián)不夠。
—–最終是買(mǎi)到書(shū)了，快遞的小伙子找不了我的零錢(qián)，我也沒(méi)要了，書(shū)的包裝不太好。
整個(gè)過(guò)程，總體打分8.5分。總的來(lái)說(shuō)，這本書(shū)的購(gòu)買(mǎi)的體驗(yàn)流暢度是很滿(mǎn)意的，沒(méi)有出現(xiàn)意外的中斷，要知道體驗(yàn)的流程能完整的走完才意味著，這個(gè)產(chǎn)品、這個(gè)服務(wù)，是可用的，這是根基，其他的視覺(jué)效果和折扣等等，都是建立在他之上。而流暢度，就跟用戶(hù)在這個(gè)過(guò)程中碰到疑惑和不解的強(qiáng)烈程度是成反比的，想提高流暢度，就需要捋清楚，讓這個(gè)核心購(gòu)買(mǎi)流程以最短的時(shí)間完成，減少干擾。

2.邊緣體驗(yàn)，一樣的重要

上面的購(gòu)書(shū)例子，有個(gè)地方很重要，那就是最后的線(xiàn)下體驗(yàn)，我把他作為邊緣體驗(yàn)的一種，有別于線(xiàn)上的核心業(yè)務(wù)。
訂單下來(lái)后，系統(tǒng)能根據(jù)我提交的送貨地址，選出最近的發(fā)貨地點(diǎn)，減少物流時(shí)間，并且讓購(gòu)買(mǎi)者知道，這個(gè)點(diǎn)是好的，說(shuō)明：我一直為你著想。
但快遞環(huán)節(jié)卻有點(diǎn)問(wèn)題，因?yàn)榇嬖谝欢ǖ牟豢煽匾蛩亍Ｋ涂爝f的人，需要經(jīng)過(guò)一定的培訓(xùn)，否則，是在砸當(dāng)當(dāng)?shù)呐谱印ｋ娫?huà)中的語(yǔ)氣讓人不舒服，書(shū)的包裝問(wèn)題也讓人不安，書(shū)角磨破了，就這兩個(gè)點(diǎn)，購(gòu)買(mǎi)者就有可能把整個(gè)交易撤銷(xiāo)。
屬于邊緣體驗(yàn)范疇的還有很多，例如：你到了友商網(wǎng)舉辦的一個(gè)論壇，門(mén)前的海報(bào)是否能夠傳遞本次論壇的信息、是否能夠?qū)⒂焉叹W(wǎng)的品牌進(jìn)行詮釋?zhuān)o你的良好感覺(jué)有多少？再例如市場(chǎng)營(yíng)銷(xiāo)人員的著裝和談吐，在用戶(hù)眼里，在一定程度上，也在間接體驗(yàn)他們的產(chǎn)品，起碼，穿著拖鞋的營(yíng)銷(xiāo)，不會(huì)給人好的感覺(jué)。
邊緣體驗(yàn)，一樣重要。

3.無(wú)形的體驗(yàn)

無(wú)形的體驗(yàn)有兩種，一種是某用戶(hù)在使用、體驗(yàn)產(chǎn)品后得出口碑傳播給另外的用戶(hù)或者潛在用戶(hù)，對(duì)于后者，他已開(kāi)始無(wú)形情感體驗(yàn)；另一種是用內(nèi)而外的，是生產(chǎn)此產(chǎn)品的團(tuán)隊(duì)或者說(shuō)這個(gè)企業(yè)由內(nèi)發(fā)出的一些信息，有意的或無(wú)意的信息。
對(duì)于第一種，有時(shí)候口碑會(huì)決定了某個(gè)用戶(hù)是否與產(chǎn)品有緣，舉個(gè)例子，小姨買(mǎi)了一個(gè)xx牌子的冰箱，用了兩個(gè)月，燈管壞了，打開(kāi)冰箱門(mén)燈不亮了，聯(lián)系維修后好景不長(zhǎng)，還是壞，于是她對(duì)死黨說(shuō)：以后打死也不會(huì)買(mǎi)xx牌的東西了，這個(gè)死黨有可能以后就跟這個(gè)牌子絕緣了，因?yàn)樗龑?duì)“它”的無(wú)形體驗(yàn)很不好。當(dāng)然，這個(gè)口碑產(chǎn)生的根源，就是產(chǎn)品質(zhì)量本身。
而第二種范圍包括的就比較大了，如果是上市公司，那么你的財(cái)務(wù)狀況是否良好；組織結(jié)構(gòu)是不是頻繁大調(diào)整；員工整體對(duì)外的信息放射是否正面；網(wǎng)絡(luò)媒體，傳統(tǒng)媒體傳播的信息是否有利公司發(fā)展（不管是不是軟文），這些，都是用戶(hù)或者潛在用戶(hù)、普通人可能接觸到的一面，這也是一個(gè)無(wú)形的體驗(yàn)。

4.引領(lǐng)用戶(hù)的“體驗(yàn)”

在初步發(fā)展階段，無(wú)數(shù)產(chǎn)品和服務(wù)都是跟隨用戶(hù)需求，用戶(hù)需要什么，就給什么，以找準(zhǔn)需求點(diǎn)為重中之重，這個(gè)是對(duì)的，但到了產(chǎn)品成熟期，到了市場(chǎng)占有率足夠高后，需要考慮的，就是引導(dǎo)潮流，引領(lǐng)用戶(hù)朝雙贏的方向。web中的視覺(jué)概念設(shè)計(jì)，汽車(chē)中的概念車(chē)，走的，就是這個(gè)路線(xiàn)。

5.核心產(chǎn)品體驗(yàn)

這個(gè)放在最后是因?yàn)槭侨硕贾溃诵漠a(chǎn)品，必須做好可用性，通過(guò)不斷迭代，適當(dāng)做好減法，提供一個(gè)體驗(yàn)好的產(chǎn)品。具體到各個(gè)產(chǎn)品和服務(wù)各不相同，無(wú)需展開(kāi)。
總之，用戶(hù)體驗(yàn)設(shè)計(jì)并不復(fù)雜，但需要耐得住性子，需要注意觸角，因?yàn)椋瑥慕佑|這個(gè)品牌那一刻起，用戶(hù)體驗(yàn)就在進(jìn)行，是疊加還是消耗呢？就看能否盡量做到人人UE，能否將這些好的idea引導(dǎo)、聚合。

一，關(guān)于CSS Sprite
CSS Sprites是一種網(wǎng)頁(yè)圖片應(yīng)用處理方式。它允許你將一個(gè)頁(yè)面涉及到的所有零星圖片都包含到一張大圖中去，這樣一來(lái)，當(dāng)訪問(wèn)該頁(yè)面時(shí)，載入的圖片就不會(huì)像以前那樣一幅一幅地慢慢顯示出來(lái)了。對(duì)于當(dāng)前網(wǎng)絡(luò)流行的速度而言，不高于200KB的單張圖片的所需載入時(shí)間基本是差不多的，所以無(wú)需 顧忌這個(gè)問(wèn)題。
按照yahoo的rules for high performance web sites的原則，應(yīng)當(dāng)較少Client與Server端間 的HTTP Request次數(shù)。通過(guò)CSS Sprites方法將多張圖片組裝成單獨(dú)的一張圖片，可以有效減少HTTP請(qǐng)求 的次數(shù)。
當(dāng)整幅圖片載入完成后，你就可以使用CSS方法通過(guò)設(shè)置背景位置的方式完成所需圖片的準(zhǔn)確調(diào)用。

加速的關(guān)鍵，不是降低重量，而是減少個(gè)數(shù)。傳統(tǒng)切圖講究精細(xì)，圖片規(guī)格越小越好，重量越小越好，其實(shí)規(guī)格大小無(wú)所謂，計(jì)算機(jī)統(tǒng)一都按byte計(jì)算。客戶(hù)端每顯示一張圖片都會(huì)向服務(wù)器發(fā)送請(qǐng)求，所以，圖片越多請(qǐng)求次數(shù)越多，造成延遲的可能性也就越大。

二，CSS Sprite的使用

有幾篇關(guān)于CSS Sprites的文章，基本上把其原理和機(jī)制說(shuō)明得很清楚。

What Are CSS Sprites?

How to create CSS sprites

Creating Rollover Effects with CSS Sprites

Building a Dynamic Banner with CSS Sprites

High Performance Web Sites中關(guān)于CSS Sprites的內(nèi)容3.2. CSS Sprites

三，CSS Sprite的例子

[原文：http://blog.rexsong.com/?p=746#comments]

1. 圖片限制(Image Slicing)

典型如文本編輯器，小圖標(biāo)特別多，打開(kāi)時(shí)一張張跑出來(lái)，給用戶(hù)的感覺(jué)很不好。如果能用一張圖解決，則不會(huì)有這個(gè)問(wèn)題，比如百度空間、163博客、Gmail都是這么做的。

Image Slicing’s Kiss of Death
http://www.alistapart.com/articles/sprites

2. 單圖轉(zhuǎn)滾(Single-image Rollovers)

觸發(fā)切換圖片的需求，傳統(tǒng)方案得重新請(qǐng)求新圖片，因?yàn)榫W(wǎng)絡(luò)問(wèn)題經(jīng)常造成停留或等待。如果能把多種狀態(tài)合并成一張圖，就能完美解決，然后再使用背景圖技術(shù)模擬動(dòng)態(tài)效果。

ColorScheme Ratings
http://demo.rexsong.com/200608/colorscheme_ratings/

3. 延長(zhǎng)背景(Extend Background Image)

如果圖片的某邊可以背景平鋪無(wú)限延長(zhǎng)，則不需要每個(gè)角、每條邊單獨(dú)搞出來(lái)，圖片能少一個(gè)就少一個(gè)。其實(shí)，這個(gè)理論還可以擴(kuò)展到四角容器里，好處是能大大簡(jiǎn)化HTML Structure。

Extend Background Image
http://demo.rexsong.com/200705/extend_background_image/

綜合案例

Google Korea（1和2技巧）
http://demo.rexsong.com/200705/google_korea/

CSS Menus（2和3技巧）
http://demo.rexsong.com/200705/css_background_menus/

四，CSS Sprites的問(wèn)題

由于IE6存在的background的flicker問(wèn)題IE6/Win, background image on <a>, cache=‘check every visit’: flicker!，有人針對(duì)此問(wèn)題提出了解決方案Fast Rollovers Without Preload

關(guān)于IE6的flicker問(wèn)題，fivesevensix.com上有一篇很不錯(cuò)的研究文章Minimize Flickering CSS Background Images in IE6

另外：brunildo.org的CSS tests and experiments是關(guān)于css各種功能不錯(cuò)的參考手冊(cè)和測(cè)試工具。

五，相關(guān)資源

What Are CSS Sprites?

http://www.peachpit.com/articles/printerfriendly.aspx?p=447210&rl=1

CSS Sprites: Image Slicing’s Kiss of Death

http://www.alistapart.com/articles/sprites/

CSS Sprites Generator

http://www.csssprites.com/

http://spritegen.website-performance.org/

Fast Rollovers Without Preload

http://wellstyled.com/css-nopreload-rollovers.html

JavaScript Sprite Animation Using jQuery

http://www.sitepoint.com/blogs/2007/07/20/javascript-sprite-animation-using-jquery/

http://www.sitepoint.com/blogs/2007/07/05/css-using-percentages-in-background-image/

How to create CSS sprites

http://fatagnus.com/how-to-create-css-sprites/

Creating Rollover Effects with CSS Sprites

http://www.devarticles.com/c/a/Web-Style-Sheets/Creating-Rollover-Effects-with-CSS-Sprites/

Building a Dynamic Banner with CSS Sprites

http://www.devarticles.com/c/a/Web-Style-Sheets/Building-a-Dynamic-Banner-with-CSS-Sprites/

CSS Sprites and IE/Win Flicker Issue

http://www.brajeshwar.com/2006/css-sprites-and-iewin-flicker-issue/

css用法測(cè)試工具：CSS tests and experiments

http://www.brunildo.org/test/index.html

各瀏覽器CSS hack兼容表：
 

整體測(cè)試代碼示例：

復(fù)制代碼代碼如下:
.test{
color:#000000;
color:#0000FF\0;
[color:#00FF00;
*color:#FFFF00;
_color:#FF0000;
}

復(fù)制代碼代碼如下:
#menu { line-height: 23px; }/* firefox 瀏覽器實(shí)行這句定義 */
#menu { line-height: 26px\9; }/*ie6,ie7,ie8 這句定義主要尖對(duì)IE8來(lái)hack*/
#menu { *line-height: 23px; }/*ie6,ie7 這句定義主要尖對(duì)IE7來(lái)hack*/
#menu { _line-height: 23px; }/*ie6 瀏覽器優(yōu)先實(shí)行這句定義*/
或者寫(xiě)成一句，注意順序
#menu { line-height:23px; line-height: 26px\9; *line-height: 23px; _line-height:23px; }
或者
* html #menu { line-height: 23px; } /* IE6 瀏覽器實(shí)行這句定義 */
*+html #menu { line-height: 23px; }/* IE7 瀏覽器實(shí)行這句定義*/

其他說(shuō)明：
1、如果你的頁(yè)面對(duì)IE7兼容沒(méi)有問(wèn)題，又不想大量修改現(xiàn)有代碼，同時(shí)又能在IE8中正常使用，微軟聲稱(chēng)，開(kāi)發(fā)商僅需要在目前兼容IE7的網(wǎng)站上添加一行代碼即可解決問(wèn)題，此代碼如下：
<meta http-equiv="x-ua-compatible" content="ie=7" />
2、body:nth-of-type(1) 如果這樣寫(xiě)，表示全局查找body，將會(huì)對(duì)應(yīng)第一個(gè)<body>。
3、還有其他寫(xiě)法，比如：
*html #test{}或者 *+html #test{}
4、*+html 對(duì)IE7的hack 必須保證HTML頂部有如下聲明：
http://www.w3.org/TR/html4/loose.dtd
5、順序：Firefox、IE8、IE7、IE6依次排列。
小知識(shí)：什么是CSS hack？
　　由于不同的瀏覽器，比如IE6、IE7、IE8、Firefox等，對(duì)CSS的解析認(rèn)識(shí)不一樣，因此會(huì)導(dǎo)致生成的頁(yè)面效果不一樣，得不到我們所需要的頁(yè)面效果。
　　這個(gè)時(shí)候我們就需要針對(duì)不同的瀏覽器去寫(xiě)不同的CSS，讓它能夠同時(shí)兼容不同的瀏覽器，能在不同的瀏覽器中也能得到我們想要的頁(yè)面效果。
　　這個(gè)針對(duì)不同的瀏覽器寫(xiě)不同的CSS code的過(guò)程，就叫CSS hack，也叫寫(xiě)CSS hack。
下面是補(bǔ)充：

復(fù)制代碼代碼如下:
selector{
property:value; /* 所有瀏覽器 */
property:value\9; /* 所有IE瀏覽器 */
+property:value; /* IE7 */
_property:value; /* IE6 */
}

詳細(xì)出處參考：http://www.jb51.net/css/24946.html

border-radius(圓角)的幾點(diǎn)說(shuō)明：

border-radius:長(zhǎng)度
Firefox支持border-radius(圓角)：-moz-border-radius:2px;
webkit內(nèi)核的Safari和Chrome支持border-radius(圓角)：-webkit-border-radius:2px;
Opera支持border-radius(圓角)：border-radius:2px;
IE不支持border-radius(圓角)

我們還可以隨意指定圓角的位置，左上、左下、右上、右下四個(gè)方向。在firefox、webkit內(nèi)核的Safari和Chrome和opera（css3）、中的具體書(shū)寫(xiě)格式如下：

-moz-border-radius-topleft / -webkit-border-top-left-radius / border-top-left-radius
-moz-border-radius-topright / -webkit-border-top-right-radius / border-top-right-radius
-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius / border-bottom-left-radius
-moz-border-radius-bottomright / -webkit-border-bottom-right-radius /border-bottom-right-radius

border-radius(圓角)還有其他一些用法，F(xiàn)irefox、webkit內(nèi)核的Safari和Chrome和opera（css3）其他寫(xiě)法有些略微的差異，具體可以查看以下網(wǎng)址：https://developer.mozilla.org/en/CSS:-moz-border-radius
http://www.the-art-of-web.com/css/border-radius/
http://dancewithnet.com/2008/12/27/border-radius-and-rounded-corner/

<html>
  <head>
  <style type="text/css">
   body
   {
     background-image:url('eg_bg_03.gif');
     background-repeat:no-repeat;
     background-position:center;
     background-attachment:fixed;
   }
  </style>
  </head>
  <body>

  </body>
</html>

2、

clear:both

<script>
/******************************************************
* 簡(jiǎn)單的JavaScript隨機(jī)顯示圖片廣告的效果  Share JavaScript (http://www.ShareJS.com)
* 使用此腳本程序，請(qǐng)保留此聲明
* 獲取此腳本以及更多的JavaScript程序，請(qǐng)?jiān)L問(wèn) http://www.ShareJS.com
******************************************************/

var str=new Array("http://www.sharejs.com/code/image/img/1.jpg","http://www.sharejs.com/code/image/img/2.jpg","http://www.sharejs.com/code/image/img/3.jpg");
var a;
a=str[parseInt(Math.random()*(str.length))];
document.write("<img src="+a+">");
</script>

注意：

IE 6本身并不支持相鄰選擇器；請(qǐng)查閱本書(shū)的網(wǎng)址www.wrox.com/go/beginning_css2e以獲取兼容性方面的幫助。

圖  3-24

在圖3-24中，可以看到加號(hào)被用來(lái)表示兩個(gè)元素之間的相鄰關(guān)系。你在這點(diǎn)上也許會(huì)有疑問(wèn)：這么做看起來(lái)很舒服，但實(shí)際用途是什么？難道不能單獨(dú)引用div#body來(lái)達(dá)到同樣的效果嗎？為什么需要一個(gè)相鄰選擇器？很高興你這樣問(wèn)。在特定的情況下這個(gè)選擇器會(huì)發(fā)揮作用，比如當(dāng)幾份HTML文檔引用同一份樣式表時(shí)。在一部分文檔中，帶有id名稱(chēng)heading的<div>元素和帶有id名稱(chēng)body的<div>元素是相鄰的，即它們?cè)谠次募邢嗬^出現(xiàn)。在其他文檔中這兩個(gè)元素或許不是相鄰的。如果你對(duì)這兩種理論上不同的文檔有不同的模板需求的話(huà)，自然會(huì)想通過(guò)某種方法來(lái)引用那些相鄰的元素，這就是相鄰選擇器實(shí)際應(yīng)用的一個(gè)例子。正如我在上一節(jié)"直接子選擇器"中提到的那樣，有時(shí)你不想創(chuàng)建新的id和類(lèi)名。在某些情況下，當(dāng)你使用相鄰選擇器時(shí)，能夠避免創(chuàng)建新的類(lèi)和id名稱(chēng)。

在接下來(lái)的概念驗(yàn)證型例子中，你將親自試驗(yàn)相鄰選擇器。

試一試 相鄰選擇器

例3-5  按以下步驟，了解相鄰選擇器是如何工作的。

1. 在文本編輯器中輸入以下標(biāo)記：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

            "
            <html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'>

            <head>

            <title>Next Sibling Selectors</title>

            <link rel='stylesheet' type='text/css' href='Example_3-5.css' />

            </head>

            <body>

            <h1>Next Sibling Selectors</h1>

            <p>

            The next sibling selector (or adjacent sibling combinator as

            it's officially called) allows you to select an element based on

            its sibling. This paragraph has a lightyellow background and

            darkkhaki text.

            </p>

            <p>

            This paragraph has a yellowgreen background and green text.

            </p>

            <p>

            This paragraph has no colored background, border, or text.

            </p>

            </body>

            </html>
            

2. 保存上述標(biāo)記為Example_3-5.html。

3. 在文本編輯器中輸入以下CSS：

body {

            font: 12px sans-serif;

            }

            p {

            padding: 5px;

            }

            h1 + p {

            background: lightyellow;

            color: darkkhaki;

            border: 1px solid darkkhaki;

            }

            h1 + p + p {

            background: yellowgreen;

            color: green;

            border: 1px solid green;

            }

（點(diǎn)擊查看大圖）圖  3-25

工作原理

相鄰選擇器基于相鄰關(guān)系應(yīng)用樣式。下面是對(duì)Example_3-5.css中有關(guān)樣式的分析。

Example_3-5.css中的第一個(gè)樣式應(yīng)用于Example_3-5.html的第一段。h1 + p表示如果<p>元素是直接跟在<h1>元素后的元素，則應(yīng)用本規(guī)則中的聲明。

h1 + p {

            background: lightyellow;

            color: darkkhaki;

            border: 1px solid darkkhaki;

            }

只有當(dāng)<p>元素是直接與<h1>元素相鄰的元素時(shí)，這條規(guī)則才起作用。

第二條規(guī)則里使用了一個(gè)更為復(fù)雜的相鄰選擇器。它表示如果一個(gè)<p>元素直接相鄰于另一個(gè)<p>元素，并且后者也直接相鄰于一個(gè)<h1>元素時(shí)，應(yīng)用本規(guī)則中的聲明。

h1 + p + p {

            background: yellowgreen;

            color: green;

            border: 1px solid green;

            }
            

就像直接子選擇器可以基于父子關(guān)系應(yīng)用樣式一樣，相鄰選擇器可以基于相鄰關(guān)系應(yīng)用樣式。

在很多時(shí)候，如果能基于元素的屬性或?qū)傩灾祽?yīng)用樣式會(huì)很有用。

LI代碼的格式化:
A).運(yùn)用CSS格式化列表符： ul li{
list-style-type:none;
}
B).如果你想將列表符換成圖像，則： ul li{
list-style-type:none;
list-style-image: url(/blog/images/icon.gif);
}
C).為了左對(duì)齊，可以用如下代碼： ul{
list-style-type:none;
margin:0px;
}
D).如果想給列表加背景色，可以用如下代碼： ul{
list-style-type: none;
margin:0px;
}
ul li{
background:#CCC;
}
E).如果想給列表加MOUSEOVER背景變色效果，可以用如下代碼： ul{ list-style-type: none; margin:0px; }
ul li a{ display:block; width: 100%; background:#ccc; }
ul li a:hover{ background:#999; }說(shuō)明：display:block;這一行必須要加的，這樣才能塊狀顯示！

F).LI中的元素水平排列,關(guān)鍵FLOAT:LEFT： ul{
list-style-type:none;
width:100%;
}
ul li{
width:80px;
float:left;
}
<ul><li>的區(qū)別
<LI> 的參數(shù)設(shè)定（常用）：
例如： <li type="square" value="4">

type="square"
只適用于非順序清單，設(shè)定符號(hào)款式，其值有三種，如下，內(nèi)定為 type="disc"：
符號(hào) 是當(dāng) type="disc" 時(shí)的列項(xiàng)符號(hào)。
符號(hào) if" width=10 height=10 border=0> 是當(dāng) type="circle" 時(shí)的列項(xiàng)符號(hào)。
符號(hào) 是當(dāng) type="square" 時(shí)的列項(xiàng)符號(hào)。
value="4"
只適用于順序清單，設(shè)定該一項(xiàng)的數(shù)目，其後各項(xiàng)將以此作為起始數(shù)目而遞增，但前面各項(xiàng)則不受影響，其值只能是 1,2,3.. 等整數(shù)，沒(méi)有內(nèi)定值。
<UL>稱(chēng)為無(wú)序清單標(biāo)記。
所謂無(wú)序清單就是在每一項(xiàng)前面加上 、、等符號(hào)，故又稱(chēng)符號(hào)清單。
<UL> 的參數(shù)設(shè)定（常用）：
例如： <UL type="square">

type="square"
設(shè)定符號(hào)款式，其值有三種，如下，內(nèi)定為 type="disc"：
符號(hào) 是當(dāng) type="disc" 時(shí)的列項(xiàng)符號(hào)。
符號(hào) 是當(dāng) type="circle" 時(shí)的列項(xiàng)符號(hào)。
符號(hào) 是當(dāng) type="square" 時(shí)的列項(xiàng)符號(hào)。

<ul>是項(xiàng)目列表，<li>是列表項(xiàng)，項(xiàng)目列表就是用符號(hào)來(lái)列的，所以你列出來(lái)默認(rèn)的就是黑點(diǎn)啦，還有一個(gè)是<ol>這個(gè)是編號(hào)列表，用數(shù)字來(lái)列的，也是用<li>做列表項(xiàng)
<li>是 list item 即列表項(xiàng)，但列表有很兩種，所以外面得有 <ul> 或者 <ol> 用來(lái)區(qū)別無(wú)序列表（小點(diǎn)點(diǎn)）和有序列表（1,2,3...）。

網(wǎng)頁(yè)設(shè)計(jì)制作,CSS實(shí)現(xiàn)隔行換色的2種方法:

第1種方法:
<style type="text/css">
UL.myul1 LI{background-color: expression(this.sourceIndex%2==0?'#9FB7F6':'#B6C8F8');
}
</style>
<ul class="myul1">
<li id="li1">111</li>
<li id="li2">222</li>
<li id="li2">333</li>
<li id="li2">444</li>
<li id="li2">555</li>
<li id="li2">666</li>
</ul>

第2種方法:

<style type="text/css">
<!--
.li01 { background:#FFF; }
.li02 { background:#000; }
li a{width:100%;display:block;}
li a:hover{background:red;}
-->
</style>

<div id="list01"><ul>
<li class="title"><a href="#">title</a></li>
<li><a href="#">111</a></li>
<li><a href="#">222</a></li>
<li><a href="#">333</a></li>
<li><a href="#">444</a></li>
<li><a href="#">555</a></li>
<li><a href="#">666</a></li>
</ul></div>

<script Language="Javascript1.2">

objName=document.getElementById("list01").getElementsByTagName("li")

for (i=0;i<objName.length;i++) {
(i%2==0)?(objName(i).className = "li01"):(objName(i).className = "li02");
}
</script> 

CSS布局常用的方法
float:none|left|right 
取值：
none:　默認(rèn)值。對(duì)象不飄浮
left:　文本流向?qū)ο蟮挠疫?br /> right:　文本流向?qū)ο蟮淖筮?nbsp;

它是怎樣工作的，看個(gè)一行兩列的例子 
xhtml代碼:

高度：沒(méi)有一個(gè)固定值，因?yàn)槊總€(gè)人的瀏覽器的工具欄不同。
寬度：
1、在IE6.0下，寬度為顯示器分辨率減21，比如1024的寬度-21就變成1003。但值得注意的是IE6.0(或更低)無(wú)論你的網(wǎng)頁(yè)多高都會(huì)有右側(cè)的滾動(dòng)條框。
2、在Firefox下，寬度的分率辨減19。比如1024的寬度-19就變成1005
3、在Opear下，寬度的分率辨減23。比如1024的寬度-23就變成1001
注：Firefox或Opear在內(nèi)容少于瀏覽器高度時(shí)不顯示右側(cè)滾動(dòng)條。

所以如果是1024的分辨率，你的網(wǎng)頁(yè)不如設(shè)成1000安全一點(diǎn)。
如果是800的分辨率一般都設(shè)成770

一 軟件應(yīng)用能力(選2題)：

1．Ps或者其他圖像處理軟件做一個(gè)如圖的漸變按鈕

2．Flash做一個(gè)簡(jiǎn)單的圖形遮罩效果

3．把網(wǎng)站童車(chē)列表頁(yè)的結(jié)構(gòu)美感重新設(shè)計(jì)

4．用ps或者Fw等圖像處理軟件對(duì)一個(gè)網(wǎng)頁(yè)平面圖做切片（例圖為：）

二 網(wǎng)頁(yè)設(shè)計(jì)分析能力

1． 購(gòu)物網(wǎng)站的主色調(diào)應(yīng)該是什么樣色？交友網(wǎng)站？體育網(wǎng)站？軟件網(wǎng)站？年輕的互聯(lián)網(wǎng)？搜索引擎？

2． 一個(gè)網(wǎng)站最多有幾種色彩

3． 百度和google，你看哪個(gè)覺(jué)得更舒服一點(diǎn)？

4． 列出你所知道的幾種圖像格式，并說(shuō)出它們之間的不同點(diǎn)和大部分的用途

5． 一般網(wǎng)站的版式有哪幾種？

6． 如果背景是黑色，那么字體用什么顏色能突出字體，且不顯得刺眼？

7． 在在紅色中加入少量的黑色，你覺(jué)得應(yīng)該是種什么感覺(jué)？

三 網(wǎng)頁(yè)制作能力

1． 用table和div分別設(shè)計(jì)一個(gè)三行三列的網(wǎng)頁(yè)（頭部,身體,底部;身體部分為三列）

2． 列出你所用過(guò)的Html元素

3． 用li做一個(gè)橫向的導(dǎo)航菜單，不少于三個(gè)菜單

4．背景的哪個(gè)屬性來(lái)確定背景圖像是否固定？

四 高級(jí)應(yīng)用能力（選做）

1． 用js代碼寫(xiě)出一個(gè)頁(yè)面加載后能不斷變換背景的效果

2． 利用DOM知識(shí)是列出一個(gè)ul中li的總數(shù)，li中的內(nèi)容

3． 寫(xiě)出你會(huì)用的兼容個(gè)中不同瀏覽器的hack css代碼，如IE7 FF

4． 說(shuō)出你所知道的web標(biāo)準(zhǔn)方面的知識(shí)

5． 高級(jí)圖像處理（可網(wǎng)上查詢(xún)教程）：模仿例圖

6． Form表單的哪個(gè)屬性是表單數(shù)據(jù)的傳送方式？

7． /images/123.jpg 與 images/123.jpg,那種寫(xiě)法是相對(duì)根目錄的？

即使是CSS高手，也難免在書(shū)寫(xiě)CSS代碼的時(shí)候出一些小錯(cuò)誤，或者說(shuō)，任何一種代碼都是如此。小錯(cuò)誤卻往往造成大問(wèn)題，浪費(fèi)很多無(wú)辜的時(shí)間來(lái)調(diào)試和排錯(cuò)。查看下面這份CSS網(wǎng)頁(yè)布局中易犯的10個(gè)小錯(cuò)誤，努力的修正你可能會(huì)犯的錯(cuò)誤，加速你的前端開(kāi)發(fā)效率。

1. 檢查html元素是否有拼寫(xiě)錯(cuò)誤、是否忘記結(jié)束標(biāo)記

即使是老手也經(jīng)常會(huì)弄錯(cuò)div的嵌套關(guān)系。可以用dreamweaver的驗(yàn)證功能檢查一下有無(wú)錯(cuò)誤。

2. 檢查CSS是否書(shū)寫(xiě)正確

檢查一下有無(wú)拼寫(xiě)錯(cuò)誤、是否忘記結(jié)尾的 } 等。可以利用CleanCSS來(lái)檢查 CSS的拼寫(xiě)錯(cuò)誤。CleanCSS本是為CSS減肥的工具，但也能檢查出拼寫(xiě)錯(cuò)誤。

3. 用刪除法確定錯(cuò)誤發(fā)生的位置

如果錯(cuò)誤影響了整體布局，則可以逐個(gè)刪除div塊，直到刪除某個(gè)div塊后顯示恢復(fù)正常，即可確定錯(cuò)誤發(fā)生的位置。

4. 利用border屬性確定出錯(cuò)元素的布局特性

使用float屬性布局一不小心就會(huì)出錯(cuò)。這時(shí)為元素添加border屬性確定元素邊界，錯(cuò)誤原因即水落石出。

5. float元素的父元素不能指定clear屬性

MacIE下如果對(duì)float的元素的父元素使用clear屬性，周?chē)膄loat元素布局就會(huì)混亂。這是MacIE的著名的bug，倘若不知道就會(huì)走彎路。

6. float元素務(wù)必指定width屬性

很多瀏覽器在顯示未指定width的float元素時(shí)會(huì)有bug。所以不管float元素的內(nèi)容如何，一定要為其指定width屬性。
另外指定元素時(shí)盡量使用em而不是px做單位。

7. float元素不能指定margin和padding等屬性

IE在顯示指定了margin和padding的float元素時(shí)有bug。因此不要對(duì)float元素指定margin和padding屬性（可以在float元素內(nèi)部嵌套一個(gè)div來(lái)設(shè)置margin和padding）。也可以使用hack方法為IE指定特別的值。

8. float元素的寬度之和要小于100%

如果float元素的寬度之和正好是100%，某些古老的瀏覽器將不能正常顯示。因此請(qǐng)保證寬度之和小于99%。

9. 是否重設(shè)了默認(rèn)的樣式？

某些屬性如margin、padding等，不同瀏覽器會(huì)有不同的解釋。因此最好在開(kāi)發(fā)前首先將全體的margin、padding設(shè)置為0、列表樣式設(shè)置為none等。

10. 是否忘記了寫(xiě)DTD？

如果無(wú)論怎樣調(diào)整不同瀏覽器顯示結(jié)果還是不一樣，那么可以檢查一下頁(yè)面開(kāi)頭是不是忘了寫(xiě)下DTD聲明。

注: 本文來(lái)源于網(wǎng)絡(luò)，出處不明。

<head>
<style type="text/css">
  #container{
  text-align: left;
  background-color: #faf7ec;
  width: 500px;
  margin: 20px auto 0 auto;
  padding: 0;
  font-family:Arial, Helvetica, sans-serif;
  font-size:12px;
 }
#block0, #block1, #block2, #block3, #block4, #block5
{
  border-top: solid 1px #785a3c;
  margin: 0;
  padding: 10px;
}
.active {  background-color: #fff;}
.visited {  background-color: #ede7da;}
#block0, #block0.active, #block0.visited
{
  text-align: center;
  background-color: #a0dcf8;
  border-top: none;
  border-bottom: solid 4px #785a3c;
}
</style>

<script>
var ScrollWin = {
  w3c : document.getElementById,
  iex : document.all,
  scrollLoop : false,
  scrollInterval : null, // setInterval id
  currentBlock : null,   // object reference
  getWindowHeight : function(){
    if(this.iex) return (document.documentElement.clientHeight) ?
document.documentElement.clientHeight : document.body.clientHeight;
    else return window.innerHeight;
  },
  getScrollLeft : function(){
    if(this.iex) return (document.documentElement.scrollLeft) ?
document.documentElement.scrollLeft : document.body.scrollLeft;
    else return window.pageXOffset;
  },
  getScrollTop : function(){
    if(this.iex) return (document.documentElement.scrollTop) ?
document.documentElement.scrollTop : document.body.scrollTop;
    else return window.pageYOffset;
  },
  getElementYpos : function(el){
    var y = 0;
    while(el.offsetParent){
      y += el.offsetTop
      el = el.offsetParent;
    }
    return y;
  },
  scroll : function(num){
    if(!this.w3c){
      location.href = "#"+this.anchorName+num;
      return;
    }
    if(this.scrollLoop){
      clearInterval(this.scrollInterval);
      this.scrollLoop = false;
      this.scrollInterval = null;
    }
    if(this.currentBlock != null) this.currentBlock.className = this.offClassName;
    this.currentBlock = document.getElementById(this.blockName+num);
    this.currentBlock.className = this.onClassName;
    var doc = document.getElementById(this.containerName);
    var documentHeight = this.getElementYpos(doc) + doc.offsetHeight;
    var windowHeight = this.getWindowHeight();
    var ypos = this.getElementYpos(this.currentBlock);
    if(ypos > documentHeight - windowHeight) ypos = documentHeight - windowHeight;
    this.scrollTo(0,ypos);
  },
  scrollTo : function(x,y){
    if(this.scrollLoop){
      var left = this.getScrollLeft();
      var top = this.getScrollTop();
      if(Math.abs(left-x) <= 1 && Math.abs(top-y) <= 1){
        window.scrollTo(x,y);
        clearInterval(this.scrollInterval);
        this.scrollLoop = false;
        this.scrollInterval = null;
      }else{
        window.scrollTo(left+(x-left)/10, top+(y-top)/10);  
      }
    }else{
      this.scrollInterval = setInterval("ScrollWin.scrollTo("+x+","+y+")",20);   
      this.scrollLoop = true;
    }
  }
};
ScrollWin.containerName = "container";
ScrollWin.anchorName    = "anchor";  
ScrollWin.blockName     = "block";    
ScrollWin.onClassName   = "active";   
ScrollWin.offClassName  = "visited";  
</script>
</head>

<body>
<div align="center">
<div id="container">
  <a name="anchor0"></a>
  <div id="block0">
    <a href="javascript:ScrollWin.scroll('1')">鏈接 1</a> |
    <a href="javascript:ScrollWin.scroll('2')">鏈接 2</a> |
    <a href="javascript:ScrollWin.scroll('3')">鏈接 3</a> |
    <a href="javascript:ScrollWin.scroll('4')">鏈接 4</a> |
    <a href="javascript:ScrollWin.scroll('5')">鏈接 5</a>
  </div>
  <a name="anchor1"></a>
  <div id="block1">
    <h3><a href="#" onclick="javascript:ScrollWin.scroll('0'); return false;">頂部</a>
  鏈接 1</h3>
    <p>內(nèi)容</p>
    <p>內(nèi)容</p>
    <p>內(nèi)容</p>
    <p>內(nèi)容</p>
    <p>內(nèi)容</p>
    <p>內(nèi)容</p>
    <p>內(nèi)容</p>
    <p>內(nèi)容</p>
  </div>
  <a name="anchor2"></a>
  <div id="block2">
    <h3><a href="#" onclick="javascript:ScrollWin.scroll('0'); return false;">頂部</a>
  鏈接 2</h3>
    <p>內(nèi)容</p>
    <p>內(nèi)容</p>
    <p>內(nèi)容</p>
    <p>內(nèi)容</p>
    <p>內(nèi)容</p>
    <p>內(nèi)容</p>
    <p>內(nèi)容</p>
    <p>內(nèi)容</p>
  </div>
  <a name="anchor3"></a>
  <div id="block3">
    <h3><a href="#" onclick="javascript:ScrollWin.scroll('0'); return false;">頂部</a>
  鏈接 3</h3>
    <p>內(nèi)容</p>
    <p>內(nèi)容</p>
    <p>內(nèi)容</p>
    <p>內(nèi)容</p>
    <p>內(nèi)容</p>
    <p>內(nèi)容</p>
    <p>內(nèi)容</p>
    <p>內(nèi)容</p>
  </div>
  <a name="anchor4"></a>
  <div id="block4">
    <h3><a href="#" onclick="javascript:ScrollWin.scroll('0'); return false;">頂部</a>
  鏈接 4</h3>
    <p>內(nèi)容</p>
    <p>內(nèi)容</p>
    <p>內(nèi)容</p>
    <p>內(nèi)容</p>
    <p>內(nèi)容</p>
    <p>內(nèi)容</p>
    <p>內(nèi)容</p>
    <p>內(nèi)容</p>
  </div>
  <a name="anchor5"></a>
  <div id="block5">
    <h3><a href="#" onclick="javascript:ScrollWin.scroll('0'); return false;">頂部</a>
  鏈接 5</h3>
    <p>內(nèi)容</p>
    <p>內(nèi)容</p>
    <p>內(nèi)容</p>
    <p>內(nèi)容</p>
    <p>內(nèi)容</p>
    <p>內(nèi)容</p>
    <p>內(nèi)容</p>
    <p>內(nèi)容</p>
  </div>
</div>
</div>
</body>