公司網站最近一個月統計出來的訪客分辨率報表圖：

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

再看一組數據

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

設計師們對蘋果情有獨衷。在 1024 x 768 的分辨率下，打開Firefox：

自然狀態下，Firefox窗體的大小約為 974 x 650. 減掉左右兩邊7px的邊框，網頁的實際大小為上圖中的紅色部分，高寬為 960 x 650.

數字背后的奧妙

上面的“自然”出現，細究自然是不讓人信服的。蘋果系統的設計者們在沒有喝醉酒的情況下選擇了960，而不是其它什么1000之類的整數，自然另有奧妙。

科學界有很多問題都可以歸結到數學問題上，我們也從數學著手：

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

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自身），我們標記為：

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

根據上面的算法，可以得到：

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

根據直覺（嚴格證明也不難，不過還是留給數學系的學生去證明吧），我們得到一個有趣的結論：

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

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

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

N越大，可組合的寬度值就越多。對柵格系統來說，這意味著越靈活！

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

以上內容轉自http://lifesinger.org/blog/?p=375

從零開始學習jQuery (一) 開天辟地入門篇

從零開始學習jQuery (二) 萬能的選擇器

從零開始學習jQuery (三) 管理jQuery包裝集

從零開始學習jQuery (四) 使用jQuery操作元素的屬性與樣式

從零開始學習jQuery (五) 事件與事件對象

從零開始學習jQuery (六) jQuery中的Ajax

從零開始學習jQuery (七) jQuery動畫-讓頁面動起來!

從零開始學習jQuery (八) 插播:jQuery實施方案

從零開始學習jQuery (九) jQuery工具函數

從零開始學習jQuery (十) jQueryUI常用功能實戰

從零開始學習jQuery (十一) 實戰表單驗證與自動完成提示插件

淘寶網用戶體驗設計UED： http://ued.taobao.com/blog/
口碑網用戶體驗設計UED： http://ued.koubei.com/
阿里媽媽用戶體驗設計UED： http://ued.alimama.com/
阿里巴巴(中國站) 用戶體驗部： http://www.aliued.cn/
阿里軟件UED團隊： http://www.alisoftued.com
19樓UED團隊： http://ued.dukuai.com/blog/
用戶為中心的設計(UCD),UCD大社區,http://ucdchina.com/

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

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

用戶體驗（User Experience，簡稱UX 或 UE）是一種純主觀的在用戶使用一個產品（服務）的過程中建立起來的心理感受。因為它是純主觀的，就帶有一定的不確定因素。個體差異也決定了每個用戶的真實體驗是無法通過其他途徑來完全模擬或再現的。但是對于一個界定明確的用戶群體來講，其用戶體驗的共性是能夠經由良好設計的實驗來認識到。計算機技術和互聯網的發展，使技術創新形態正在發生轉變，以用戶為中心、以人為本越來越得到重視，用戶體驗也因此被稱做創新2.0模式的精髓。”—–百度百科

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

1.一個購書體驗：流程流暢度

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

——站點的載入速度是個大問題，當當基本能在3秒內打開首頁，不錯的優化。廣告語和用色貼合國內消費人群的心理，起碼對于我來說，覺得：可信賴，不太亂。
找到我要的書后，我點擊了購買，進入了我的購物車，有一個疑慮、不舒服：

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

2.邊緣體驗，一樣的重要

上面的購書例子，有個地方很重要，那就是最后的線下體驗，我把他作為邊緣體驗的一種，有別于線上的核心業務。
訂單下來后，系統能根據我提交的送貨地址，選出最近的發貨地點，減少物流時間，并且讓購買者知道，這個點是好的，說明：我一直為你著想。
但快遞環節卻有點問題，因為存在一定的不可控因素。送快遞的人，需要經過一定的培訓，否則，是在砸當當的牌子。電話中的語氣讓人不舒服，書的包裝問題也讓人不安，書角磨破了，就這兩個點，購買者就有可能把整個交易撤銷。
屬于邊緣體驗范疇的還有很多，例如：你到了友商網舉辦的一個論壇，門前的海報是否能夠傳遞本次論壇的信息、是否能夠將友商網的品牌進行詮釋，給你的良好感覺有多少？再例如市場營銷人員的著裝和談吐，在用戶眼里，在一定程度上，也在間接體驗他們的產品，起碼，穿著拖鞋的營銷，不會給人好的感覺。
邊緣體驗，一樣重要。

3.無形的體驗

無形的體驗有兩種，一種是某用戶在使用、體驗產品后得出口碑傳播給另外的用戶或者潛在用戶，對于后者，他已開始無形情感體驗；另一種是用內而外的，是生產此產品的團隊或者說這個企業由內發出的一些信息，有意的或無意的信息。
對于第一種，有時候口碑會決定了某個用戶是否與產品有緣，舉個例子，小姨買了一個xx牌子的冰箱，用了兩個月，燈管壞了，打開冰箱門燈不亮了，聯系維修后好景不長，還是壞，于是她對死黨說：以后打死也不會買xx牌的東西了，這個死黨有可能以后就跟這個牌子絕緣了，因為她對“它”的無形體驗很不好。當然，這個口碑產生的根源，就是產品質量本身。
而第二種范圍包括的就比較大了，如果是上市公司，那么你的財務狀況是否良好；組織結構是不是頻繁大調整；員工整體對外的信息放射是否正面；網絡媒體，傳統媒體傳播的信息是否有利公司發展（不管是不是軟文），這些，都是用戶或者潛在用戶、普通人可能接觸到的一面，這也是一個無形的體驗。

4.引領用戶的“體驗”

在初步發展階段，無數產品和服務都是跟隨用戶需求，用戶需要什么，就給什么，以找準需求點為重中之重，這個是對的，但到了產品成熟期，到了市場占有率足夠高后，需要考慮的，就是引導潮流，引領用戶朝雙贏的方向。web中的視覺概念設計，汽車中的概念車，走的，就是這個路線。

5.核心產品體驗

這個放在最后是因為是人都知道，核心產品，必須做好可用性，通過不斷迭代，適當做好減法，提供一個體驗好的產品。具體到各個產品和服務各不相同，無需展開。
總之，用戶體驗設計并不復雜，但需要耐得住性子，需要注意觸角，因為，從接觸這個品牌那一刻起，用戶體驗就在進行，是疊加還是消耗呢？就看能否盡量做到人人UE，能否將這些好的idea引導、聚合。

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

加速的關鍵，不是降低重量，而是減少個數。傳統切圖講究精細，圖片規格越小越好，重量越小越好，其實規格大小無所謂，計算機統一都按byte計算?？蛻舳嗣匡@示一張圖片都會向服務器發送請求，所以，圖片越多請求次數越多，造成延遲的可能性也就越大。

二，CSS Sprite的使用

有幾篇關于CSS Sprites的文章，基本上把其原理和機制說明得很清楚。

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中關于CSS Sprites的內容3.2. CSS Sprites

三，CSS Sprite的例子

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

1. 圖片限制(Image Slicing)

典型如文本編輯器，小圖標特別多，打開時一張張跑出來，給用戶的感覺很不好。如果能用一張圖解決，則不會有這個問題，比如百度空間、163博客、Gmail都是這么做的。

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

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

觸發切換圖片的需求，傳統方案得重新請求新圖片，因為網絡問題經常造成停留或等待。如果能把多種狀態合并成一張圖，就能完美解決，然后再使用背景圖技術模擬動態效果。

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

3. 延長背景(Extend Background Image)

如果圖片的某邊可以背景平鋪無限延長，則不需要每個角、每條邊單獨搞出來，圖片能少一個就少一個。其實，這個理論還可以擴展到四角容器里，好處是能大大簡化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的問題

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

關于IE6的flicker問題，fivesevensix.com上有一篇很不錯的研究文章Minimize Flickering CSS Background Images in IE6

另外：brunildo.org的CSS tests and experiments是關于css各種功能不錯的參考手冊和測試工具。

五，相關資源

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用法測試工具：CSS tests and experiments

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

各瀏覽器CSS hack兼容表：
 

整體測試代碼示例：

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

復制代碼代碼如下:
#menu { line-height: 23px; }/* firefox 瀏覽器實行這句定義 */
#menu { line-height: 26px\9; }/*ie6,ie7,ie8 這句定義主要尖對IE8來hack*/
#menu { *line-height: 23px; }/*ie6,ie7 這句定義主要尖對IE7來hack*/
#menu { _line-height: 23px; }/*ie6 瀏覽器優先實行這句定義*/
或者寫成一句，注意順序
#menu { line-height:23px; line-height: 26px\9; *line-height: 23px; _line-height:23px; }
或者
* html #menu { line-height: 23px; } /* IE6 瀏覽器實行這句定義 */
*+html #menu { line-height: 23px; }/* IE7 瀏覽器實行這句定義*/

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

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

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

border-radius(圓角)的幾點說明：

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

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

-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(圓角)還有其他一些用法，Firefox、webkit內核的Safari和Chrome和opera（css3）其他寫法有些略微的差異，具體可以查看以下網址：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>
/******************************************************
* 簡單的JavaScript隨機顯示圖片廣告的效果  Share JavaScript (http://www.ShareJS.com)
* 使用此腳本程序，請保留此聲明
* 獲取此腳本以及更多的JavaScript程序，請訪問 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本身并不支持相鄰選擇器；請查閱本書的網址www.wrox.com/go/beginning_css2e以獲取兼容性方面的幫助。

圖  3-24

在圖3-24中，可以看到加號被用來表示兩個元素之間的相鄰關系。你在這點上也許會有疑問：這么做看起來很舒服，但實際用途是什么？難道不能單獨引用div#body來達到同樣的效果嗎？為什么需要一個相鄰選擇器？很高興你這樣問。在特定的情況下這個選擇器會發揮作用，比如當幾份HTML文檔引用同一份樣式表時。在一部分文檔中，帶有id名稱heading的<div>元素和帶有id名稱body的<div>元素是相鄰的，即它們在源文件中相繼出現。在其他文檔中這兩個元素或許不是相鄰的。如果你對這兩種理論上不同的文檔有不同的模板需求的話，自然會想通過某種方法來引用那些相鄰的元素，這就是相鄰選擇器實際應用的一個例子。正如我在上一節"直接子選擇器"中提到的那樣，有時你不想創建新的id和類名。在某些情況下，當你使用相鄰選擇器時，能夠避免創建新的類和id名稱。

在接下來的概念驗證型例子中，你將親自試驗相鄰選擇器。

試一試 相鄰選擇器

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

1. 在文本編輯器中輸入以下標記：

<!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. 保存上述標記為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;

            }

（點擊查看大圖）圖  3-25

工作原理

相鄰選擇器基于相鄰關系應用樣式。下面是對Example_3-5.css中有關樣式的分析。

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

h1 + p {

            background: lightyellow;

            color: darkkhaki;

            border: 1px solid darkkhaki;

            }

只有當<p>元素是直接與<h1>元素相鄰的元素時，這條規則才起作用。

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

h1 + p + p {

            background: yellowgreen;

            color: green;

            border: 1px solid green;

            }
            

就像直接子選擇器可以基于父子關系應用樣式一樣，相鄰選擇器可以基于相鄰關系應用樣式。

在很多時候，如果能基于元素的屬性或屬性值應用樣式會很有用。

LI代碼的格式化:
A).運用CSS格式化列表符： ul li{
list-style-type:none;
}
B).如果你想將列表符換成圖像，則： ul li{
list-style-type:none;
list-style-image: url(/blog/images/icon.gif);
}
C).為了左對齊，可以用如下代碼： 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; }說明：display:block;這一行必須要加的，這樣才能塊狀顯示！

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

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

type="square"
設定符號款式，其值有三種，如下，內定為 type="disc"：
符號 是當 type="disc" 時的列項符號。
符號 是當 type="circle" 時的列項符號。
符號 是當 type="square" 時的列項符號。

<ul>是項目列表，<li>是列表項，項目列表就是用符號來列的，所以你列出來默認的就是黑點啦，還有一個是<ol>這個是編號列表，用數字來列的，也是用<li>做列表項
<li>是 list item 即列表項，但列表有很兩種，所以外面得有 <ul> 或者 <ol> 用來區別無序列表（小點點）和有序列表（1,2,3...）。

網頁設計制作,CSS實現隔行換色的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:　默認值。對象不飄浮
left:　文本流向對象的右邊
right:　文本流向對象的左邊 

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

高度：沒有一個固定值，因為每個人的瀏覽器的工具欄不同。
寬度：
1、在IE6.0下，寬度為顯示器分辨率減21，比如1024的寬度-21就變成1003。但值得注意的是IE6.0(或更低)無論你的網頁多高都會有右側的滾動條框。
2、在Firefox下，寬度的分率辨減19。比如1024的寬度-19就變成1005
3、在Opear下，寬度的分率辨減23。比如1024的寬度-23就變成1001
注：Firefox或Opear在內容少于瀏覽器高度時不顯示右側滾動條。

所以如果是1024的分辨率，你的網頁不如設成1000安全一點。
如果是800的分辨率一般都設成770

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

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

2．Flash做一個簡單的圖形遮罩效果

3．把網站童車列表頁的結構美感重新設計

4．用ps或者Fw等圖像處理軟件對一個網頁平面圖做切片（例圖為：）

二 網頁設計分析能力

1． 購物網站的主色調應該是什么樣色？交友網站？體育網站？軟件網站？年輕的互聯網？搜索引擎？

2． 一個網站最多有幾種色彩

3． 百度和google，你看哪個覺得更舒服一點？

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

5． 一般網站的版式有哪幾種？

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

7． 在在紅色中加入少量的黑色，你覺得應該是種什么感覺？

三 網頁制作能力

1． 用table和div分別設計一個三行三列的網頁（頭部,身體,底部;身體部分為三列）

2． 列出你所用過的Html元素

3． 用li做一個橫向的導航菜單，不少于三個菜單

4．背景的哪個屬性來確定背景圖像是否固定？

四 高級應用能力（選做）

1． 用js代碼寫出一個頁面加載后能不斷變換背景的效果

2． 利用DOM知識是列出一個ul中li的總數，li中的內容

3． 寫出你會用的兼容個中不同瀏覽器的hack css代碼，如IE7 FF

4． 說出你所知道的web標準方面的知識

5． 高級圖像處理（可網上查詢教程）：模仿例圖

6． Form表單的哪個屬性是表單數據的傳送方式？

7． /images/123.jpg 與 images/123.jpg,那種寫法是相對根目錄的？

即使是CSS高手，也難免在書寫CSS代碼的時候出一些小錯誤，或者說，任何一種代碼都是如此。小錯誤卻往往造成大問題，浪費很多無辜的時間來調試和排錯。查看下面這份CSS網頁布局中易犯的10個小錯誤，努力的修正你可能會犯的錯誤，加速你的前端開發效率。

1. 檢查html元素是否有拼寫錯誤、是否忘記結束標記

即使是老手也經常會弄錯div的嵌套關系。可以用dreamweaver的驗證功能檢查一下有無錯誤。

2. 檢查CSS是否書寫正確

檢查一下有無拼寫錯誤、是否忘記結尾的 } 等?？梢岳肅leanCSS來檢查 CSS的拼寫錯誤。CleanCSS本是為CSS減肥的工具，但也能檢查出拼寫錯誤。

3. 用刪除法確定錯誤發生的位置

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

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

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

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

MacIE下如果對float的元素的父元素使用clear屬性，周圍的float元素布局就會混亂。這是MacIE的著名的bug，倘若不知道就會走彎路。

6. float元素務必指定width屬性

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

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

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

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

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

9. 是否重設了默認的樣式？

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

10. 是否忘記了寫DTD？

如果無論怎樣調整不同瀏覽器顯示結果還是不一樣，那么可以檢查一下頁面開頭是不是忘了寫下DTD聲明。

注: 本文來源于網絡，出處不明。

<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>內容</p>
    <p>內容</p>
    <p>內容</p>
    <p>內容</p>
    <p>內容</p>
    <p>內容</p>
    <p>內容</p>
    <p>內容</p>
  </div>
  <a name="anchor2"></a>
  <div id="block2">
    <h3><a href="#" onclick="javascript:ScrollWin.scroll('0'); return false;">頂部</a>
  鏈接 2</h3>
    <p>內容</p>
    <p>內容</p>
    <p>內容</p>
    <p>內容</p>
    <p>內容</p>
    <p>內容</p>
    <p>內容</p>
    <p>內容</p>
  </div>
  <a name="anchor3"></a>
  <div id="block3">
    <h3><a href="#" onclick="javascript:ScrollWin.scroll('0'); return false;">頂部</a>
  鏈接 3</h3>
    <p>內容</p>
    <p>內容</p>
    <p>內容</p>
    <p>內容</p>
    <p>內容</p>
    <p>內容</p>
    <p>內容</p>
    <p>內容</p>
  </div>
  <a name="anchor4"></a>
  <div id="block4">
    <h3><a href="#" onclick="javascript:ScrollWin.scroll('0'); return false;">頂部</a>
  鏈接 4</h3>
    <p>內容</p>
    <p>內容</p>
    <p>內容</p>
    <p>內容</p>
    <p>內容</p>
    <p>內容</p>
    <p>內容</p>
    <p>內容</p>
  </div>
  <a name="anchor5"></a>
  <div id="block5">
    <h3><a href="#" onclick="javascript:ScrollWin.scroll('0'); return false;">頂部</a>
  鏈接 5</h3>
    <p>內容</p>
    <p>內容</p>
    <p>內容</p>
    <p>內容</p>
    <p>內容</p>
    <p>內容</p>
    <p>內容</p>
    <p>內容</p>
  </div>
</div>
</div>
</body>

頁頭：header                    登錄條：loginBar
標志：logo                        側欄：sideBar
廣告：banner                    導航：nav
子導航：subNav                菜單：menu
子菜單：subMenu               搜索：search
滾動：scroll
頁面主體：main
內容：content
標簽頁：tab
文章列表：list
提示信息：msg
小技巧：tips
欄目標題：title
加入：joinus
指南：guild
服務：service
熱點：hot
新聞：news
下載：download
注冊：regsiter
狀態：status
按鈕：btn
投票：vote
合作伙伴：partner
友情鏈接：friendLink
頁腳：footer
版權：copyRight

1.CSS ID 的命名
外　套：　　wrap
主導航：　　mainNav
子導航：　　subnav
頁　腳：　　footer
整個頁面：　content
頁　眉：　　header
頁　腳：　　footer
商　標：　　label
標　題：　　title
主導航：　　mainNav（globalNav）
頂導航：　　topnav
邊導航：　　sidebar
左導航：　　leftsideBar
右導航：　　rightsideBar
旗　志：　　logo
標　語：　　banner
菜單內容1： menu1Content
菜單容量：　menuContainer
子菜單：　　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

 

隨著最新CSS的不斷完善，越來越多的網站采用DIV+CSS布局。而原來使用table套table的網頁布局模式也逐漸應該淘汰了。由于目前IE6不能支持有些標準的CSS，需要用微軟特有的CSS來修復這些BUG.而且現在隨著瀏覽器層出不窮，要是頁面能夠適應盡量多的瀏覽器成為一個課題。 但是隨著CSS標準的進一步完善，瀏覽器將最終都會遵循這個標準，到時候寫DIV+CSS布局的頁面就不那么麻煩了。 但是現在，我們還是需要處理CSS在不同瀏覽器下的兼容性。一下是一個網友寫的CSS兼容技巧，值得大家參考。 CSS兼容技巧 　　1, FF下給 div 設置 padding 后會導致 width 和 height 增加, 但IE不會.              可用!important解決 　　2, 居中問題. 　　 1).垂直居中.將 line-height 設置為 當前 div 相同的高度, 再通過 vertical-align: middle.( 注意內容不要換行.) 　　   2).水平居中. margin: 0 auto;(當然不是萬能) 　　3, 若需給 a 標簽內內容加上樣式,需要設置 display: block;(常見于導航標簽) 　　4, FF 和 IE 對 BOX 理解的差異導致相差 2px 的還有設為 float的div在ie下 margin加倍等問題. 　　5, ul 標簽在 FF 下面默認有 list-style 和 padding . 最好事先聲明, 以避免不必要的麻煩. (常見于導航標簽和內容列表) 　　6, 作為外部 wrapper 的 div 不要定死高度, 最好還加上 overflow: hidden.以達到高度自適應. 　　7, 關于手形光標. cursor: pointer. 而hand 只適用于 IE. 針對firefox ie6 ie7的css樣式 　　現在大部分都是用!important來hack，對于ie6和firefox測試可以正常顯示， 　　但是ie7對!important可以正確解釋，會導致頁面沒按要求顯示!找到一個針 　　對IE7不錯的hack方式就是使用“*+html”，現在用IE7瀏覽一下，應該沒有問題了。 　　現在寫一個CSS可以這樣： 　　#1 { color: #333; } /* Moz */ 　　* html #1 { color: #666; } /* IE6 */ 　　*+html #1 { color: #999; } /* IE7 */ 　　那么在firefox下字體顏色顯示為#333，IE6下字體顏色顯示為#666，IE7下字體顏色顯示為#999。 css布局中的居中問題 　　主要的樣式定義如下： 　　body {TEXT-ALIGN: center;} 　　#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; } 　　說明： 　　首先在父級元素定義TEXT-ALIGN: center;這個的意思就是在父級元素內的內容居中;對于IE這樣設定就已經可以了。 　　但在mozilla中不能居中。解決辦法就是在子元素定義時候設定時再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ” 　　需要說明的是，如果你想用這個方法使整個頁面要居中，建議不要套在一個DIV里，你可以依次拆出多個div， 　　只要在每個拆出的div里定義MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。 盒模型不同解釋 　　#box{ width:600px; //for ie6.0- w/idth:500px; //for ff+ie6.0} 　　#box{ width:600px!important //for ff width:600px; //for ff+ie6.0 width /**/:500px; //for ie6.0-} 浮動ie產生的雙倍距離 　　#box{ float:left; width:100px; margin:0 0 0 100px; //這種情況之下IE會產生200px的距離 display:inline; //使浮動忽略} 　　這里細說一下block,inline兩個元素,Block元素的特點是:總是在新行上開始,高度,寬度,行高,邊距都可以控制(塊元素);Inline元素的特點是:和其他元素在同一行上,…不可控制(內嵌元素); 　　#box{ display:block; //可以為內嵌元素模擬為塊元素 display:inline; //實現同一行排列的的效果 diplay:table; 　　IE不認得min-這個定義，但實際上它把正常的width和height當作有min的情況來使。這樣問題就大了，如果只用寬度和高度， 　　正常的瀏覽器里這兩個值就不會變，如果只用min-width和min-height的話，IE下面根本等于沒有設置寬度和高度。 　　比如要設置背景圖片，這個寬度是比較重要的。要解決這個問題，可以這樣： 　　#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;} 頁面的最小寬度 　　min-width是個非常方便的CSS命令，它可以指定元素最小也不能小于某個寬度，這樣就能保證排版一直正確。但IE不認得這個， 　　而它實際上把width當做最小寬度來使。為了讓這一命令在IE上也能用，可以把一個 放到 標簽下，然后為div指定一個類： 　　然后CSS這樣設計： 　　#container{ min-width: 600px; width:expression(document.body.clientWidth < 600? “600px”: “auto” );} 　　第一個min-width是正常的;但第2行的width使用了Javascript，這只有IE才認得，這也會讓你的HTML文檔不太正規。它實際上通過Javascript的判斷來實現最小寬度。 清除浮動 　　.hackbox{ display:table; //將對象作為塊元素級的表格顯示}或者.hackbox{ clear:both;} 　　或者加入:after(偽對象),設置在對象后發生的內容，通常和content配合使用，IE不支持此偽對象，非Ie 瀏覽器支持， 　　所 以并不影響到IE/WIN瀏覽器。這種的最麻煩的……#box:after{ content: “.”; display: block; height: 0; clear: both; visibility: hidden;} DIV浮動IE文本產生3象素的bug 　　左邊對象浮動，右邊采用外補丁的左邊距來定位，右邊對象內的文本會離左邊有3px的間距. 　　#box{ float:left; width:800px;}#left{ float:left; width:50%;}#right{ width:50%;}*html #left{ margin-right:-3px; //這句是關鍵} 　　HTML代碼 屬性選擇器(這個不能算是兼容,是隱藏css的一個bug) 　　p[id]{}div[id]{} 　　這個對于IE6.0和IE6.0以下的版本都隱藏,FF和OPera作用 　　屬性選擇器和子選擇器還是有區別的,子選擇器的范圍從形式來說縮小了,屬性選擇器的范圍比較大,如p[id]中,所有p標簽中有id的都是同樣式的. IE捉迷藏的問題 　　當div應用復雜的時候每個欄中又有一些鏈接，DIV等這個時候容易發生捉迷藏的問題。 　　有些內容顯示不出來，當鼠標選擇這個區域是發現內容確實在頁面。 　　解決辦法：對#layout使用line-height屬性 或者給#layout使用固定高和寬。頁面結構盡量簡單。 高度不適應 　　高度不適應是當內層對象的高度發生變化時外層高度不能自動進行調節，特別是當內層對象使用 　　margin 或paddign 時。 　　例：         p對象中的內容 　　CSS：#box {background-color:#eee; } 　　#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; } 　　解決方法：在P對象上下各加2個空的div對象CSS代碼：.1{height:0px;overflow:hidden;}或者為DIV加上border屬性