目錄

第1部分基礎篇

第1章概述

1.1Web網頁設計概述

1.1.1Web技術基礎

1.1.2靜態網頁與動態網頁

1.1.3網頁設計制作流程

1.1.4頁面構成

1.1.5Web前端開發常用工具

1.2XHTML簡介

1.2.1XHTML概述

1.2.2XHTML的發展

1.3HTML5的優勢

1.3.1跨瀏覽器問題

1.3.2更明確的文檔結構

1.3.3替代了部分JavaScript功能

1.3.4音視頻和互動支持

1.4本章小結

習題1

第2章網頁設計基礎與技巧

2.1網頁配色

2.1.1顏色概述及相關術語

2.1.2色彩心理學與網頁配色

2.1.3網頁配色原理與技巧

2.2網頁版面布局

2.2.1常見版面布局方案

2.2.2網頁布局常用的4種方法

2.3網素設計

2.3.1Logo設計

2.3.2Banner設計

2.3.素設計

2.4設計理念及新趨勢

2.4.1不同的網站類型及其風格

2.4.2用戶體驗及網站體驗類型

2.4.3視覺風格與趨勢

2.4.4移動化風潮

2.5本章小結

習題2

第3章HTML&XHTML

3.1HTML標記語言

3.1.1HTML文件基本結構

3.1.2文檔格式定義的聲明

3.1.3HTML代碼區域

3.1.4HTML標簽格式

3.1.5HTML標簽分類

3.2可擴展的超文本標記語言XHTML

3.2.1HTML文檔結構分析

3.2.2XHTML文檔結構

3.2.3XHTML與HTML的差異

3.2.4如何將HTML升級為XHTML

3.3XHTML常用標簽

3.3.1注釋

3.3.2文字

3.3.3標題

3.3.4段落

3.3.5區域

3.3.6圖像img

3.3.7超鏈接a

3.3.8列表list

3.3.9層

3.3.10表格

3.3.11嵌入多媒體

3.3.12圖像映射

3.3.13空標簽

3.3.14特殊標簽

3.4本章實例——構建完整的XHTML文檔

3.4.1課程網站首頁

3.4.2商業網站首頁

3.5本章小結

習題3

第4章層疊樣式表CSS

4.1層疊樣式表簡介

4.1.1層疊樣式表概述

4.1.2層疊樣式表優勢

4.2CSS編寫基礎

4.2.1CSS編寫方法

4.2.2樣式規則

4.3CSS樣式屬性

4.3.1字體屬性

4.3.2背景屬性

4.3.3塊級標簽屬性

4.3.4邊框屬性

4.3.5盒模型

4.3.6列表屬性

4.3.7定位屬性

4.4CSS選擇器

4.4.1style屬性

4.4.2類型選擇器

4.4.3類選擇器

4.4.4ID選擇器

4.5選擇器的編寫

4.5.1組合選擇器類型

4.5.2上下文選擇器

4.5.3選擇器的分組定義

4.6偽類

4.6.1錨偽類

4.6.2首字母和首行偽標簽

4.7CSS文檔結構

4.7.1CSS的繼承性

4.7.2CSS的特殊性

4.7.3CSS的層疊性

4.7.4CSS的重要性

4.8布局屬性

4.8.1顯示屬性display

4.8.2浮動策略

4.8.3清除浮動

4.8.4定位技術

4.9實例基本CSS樣式設計

4.9.1CSS常用操作三部曲

4.9.2CSS實例解析

4.10本章小結

習題4

第5章網頁布局技術

5.1布局技術概述

5.2CSS布局

5.2.1CSS布局技術

5.2.2浮動技術

5.2.3清除浮動

5.2.4IE瀏覽器的兼容問題

5.2.5常用DIV CSS布局功能

5.2.6DIV CSS布局示例： 導航菜單

5.3響應式布局

5.3.1布局類型

5.3.2幾個概念

5.3.3可變布局

5.4媒體查詢

5.4.1媒體類型

5.4.2媒體查詢結構

5.4.3媒體查詢順序

5.4.4設置斷點

5.5母版

5.5.1母版概述

5.5.2母版頁的工作原理

5.5.3母版頁的創建和應用

5.5.4母版頁嵌套

5.5.5實例

5.6本章小結

習題5

第6章JavaScript程序設計

6.1JavaScript概述

6.1.1JavaScript簡介

6.1.2JavaScript入門案例

6.2JavaScript語法

6.2.1語法基礎

6.2.2常用變量

6.2.3表達式與運算符

6.2.4程序設計

6.2.5函數

6.3JavaScript對像

6.3.1對像基礎

6.3.2常用對像

6.4JavaScript事件

6.4.1事件及事件處理

6.4.2常用事件

6.4.3事件應用舉例

6.5JavaScript實例

6.5.1實例61——圖片交替展示

6.5.2實例62——嵌入Flash動畫

6.5.3實例63——打開任意大小的窗口

6.6本章小結

習題6

第2部分進階篇

第7章HTML5基礎

7.1HTML5概述

7.1.1HTML5新特性

7.1.2HTML5組織

7.1.3HTML5開發歷程

7.1.4HTML5開發動力

7.1.5HTML5設計理念

7.2HTML5基礎

7.2.1HTML5語法

7.2.2HT素

7.2.3HTML5增加及廢除的屬性

7.2.4HTML5全局屬性

7.3HTML素

7.3.1認識HTML5 can素

7.3.2繪制簡單圖形

7.3.3圖形的變換

7.3.4圖形的組合與裁切

7.3.5更多的顏色和樣式選項

7.3.6繪制文字

7.4HTML5素

7.4.1HTML5多媒體技術概述

7.4.2瀏覽器支持概述

7.4.3在HTML5中播放音頻

7.4.4在HTML5中播放視頻

7.4.5音頻與視頻相關屬性、方法與事件

7.5HTML5高級功能

7.5.1Web存儲

7.5.2離線應用

7.5.3Workers多線程處理

7.5.4Geolocation（地理位置）

7.6本章小結

習題7

第8章CSS3及進階

8.1CSS3選擇器

8.1.1通用兄弟選擇器

8.1.2屬性選擇器

8.1.3結構性偽類

8.1.4target選擇器

8.1.5其他CSS3選擇器

8.2CSS3的非圖片處理

8.2.1背景和邊框

8.2.2漸變和陰影

8.2.3自定義字體

8.3CSS3的新布局

8.3.1負邊距與浮動

8.3.2柵格繫統與多列布局

8.3.3彈性盒布局

8.4CSS3的動態性

8.4.1CSS變形

8.4.2CSS過渡

8.4.3CSS動畫

8.5CSS3創意案例

8.5.1燒烤動畫特效

8.5.2CSS3鼠標劃過圖片散開特效

8.5.3超炫動感圓盤時鐘

8.5.4流暢的自行車

8.6本章小節

習題8

第9章jQuery

9.1jQuery簡介及語法

9.1.1jQuery庫簡介

9.1.2引入jQuery的方法

9.1.3jQuery的基本語法

9.2jQuery選擇器

9.2.1jQuery基本選擇器

9.2.2jQuery層次選擇器

9.2.3jQuery過濾選擇器

9.2.4jQuery表單選擇器

9.3jQuery事件及應用

9.3.1jQuery事件機制

9.3.2常用事件函數

9.3.3事件的綁定

9.3.4事件的解除

9.4jQuery動畫及特效

9.4.1顯示與隱藏

9.4.2淡入淡出

9.4.3滑動

9.4.4自定義動畫

9.5jQuery實例

9.5.1實例91: 伸縮的導航條

9.5.2實例92： 相冊瀏覽

9.6本章小結

習題9

第3部分案例篇

第10章綜合案例

10.1等級考試網上報名繫統

10.1.1網站設計分析

10.1.2HTML文檔結構分析

10.1.3網站文件規劃與設計

10.1.4網站標題布局

10.1.5導航欄布局

10.1.6快捷方式

10.1.7網頁主體內容區

10.1.8用戶信息區域

10.1.9內容區布局

10.1.10頁腳布局

10.1.11繫統完善

10.2網站首頁UI設計案例

10.2.1網站策劃

10.2.2首頁設計與制作

10.2.3手稿設計

10.2.4PS稿設計

10.3本章小結

參考文獻

《C#4.0權威指南》由國內資深微軟技術專家親自執筆，微軟技術開發者社區和技術專家聯袂推薦。內容新穎，基於的C# 4.0.NET Framework 4和Visual Studio 2010； 寫作方式有創新，用圖解的方式對C#進行了完美的演繹； 內容全面，不僅重點講解了C# 4.0的所有新特性，而且對C#的所有知識點的原理、用法和要點都進行了全面的講解和深度的分析。《C#4.0權威指南》注重實踐，包含大量有價值的示例代碼，可操作性強。

標簽將文本包圍，讓段落兩端顯示一些空白。顧名思義，

標簽表示其中所包含的內容是引自其他數據源。如果在文檔設計中隻是為了使頁面中的文本采用縮進樣式顯示而使用blockquote標簽，但這段文字卻並非引自其他數據源，那麼就意味著因為違背了

標簽的語義而錯誤地使用了HTML標簽。HTML標簽隻是用來表示文檔結構，不能通過它來左右網頁在運行時的表現效果，如果需要一定的顯示樣式，則必須通過CSS樣式表來實現。良好的HTML文檔結構主要體現在對HTML標簽正確、合理的使用。在選擇HTML標簽時，要取決於其語義，而並非顯示樣式。
5.2CSS布局
5.2.1CSS布局技術
CSS布局是DIV標簽與CSS樣式表相結合的布局技術，用來存放其他HTML標簽或數據信息，通過樣式表實現對頁面進行布局。其中，DIV標簽主要是用來定義結構，如示例52所示。示例52

從示例52的代碼分析出，DIV標簽不是用來布局的，隻負責定義頁面的內容結構(也稱語義)，指明該內容塊的功能，如包含網站標志和名稱的抬頭內容(header)、頁面導航欄(navigator)、頁面主要內容(content)、副導航欄(sider)、包含版權和有關法律聲明的頁腳信息(footer)等。因此，在建立頁面時，外觀並不重要，需要考慮的是頁面內容的語義和結構。一個具有良好結構的HTML文檔可以通過相應的表現代碼(即CSS樣式表代碼)以任何外觀表現出來。例如，CSS禪意花園(http://www.csszengarden.com)網站中，針對同一篇HTML文檔，通過引入不同的CSS代碼就呈現完全不同的顯示效果。圖51所示是其中的兩個示例。



圖51CSS禪意花園網站頁面

Web標準要求適當地為HTML標簽設置id屬性，從示例52的代碼可以看出，每個DIV都設置了相應的id，既可以用來表示該內容塊的語義，也可以通過在CSS中定義相應的選擇器來控制該內容塊的顯示樣式，還可以在腳本程序中用來控制它的行為，可謂一舉三得。DIV容器中可以包含任何內容塊，也可以嵌套另一個DIV。內容塊可以包含任意的H素——標題、段落、圖片、表格、列表等。由此可見，通過DIV標簽可以方便地定義頁面結構。一個結構化的HTML文檔非常簡單，素都用於結構目的。要縮進一個段落，不需要使用

標簽，隻要使用

標簽，並對

加一個CSS的margin規則就可以實現縮進目的。

是結構化標簽，margin是表現屬性，前者屬於HTML，後者屬於CSS，這就是Web標準中的“結構與表現相分離”。良好結構的HTML文檔內幾乎沒有表現屬性的標簽，代碼非常干淨簡潔。例如，代碼

到現在可以隻在HTML中寫，所有控制表現的內容都寫到CSS中，在結構化的HTML中， table就是表格，而並非用來實現其他功能(如布局和定位)的工具。總之，DIV CSS布局的原理就是通過DIV標簽來定義文檔結構，然後通過CSS來控制文檔的外觀表現，如字體、顏色、背景、內容塊的大小、位置等。5.2.2浮動技術1. 浮動的使用

瀏覽網頁時，經常會看到圖文並茂的表現方式，其中圖片會居左或居右，然後被文字包圍，從而使文

圖52圖片浮動後的頁面顯示
本信息的表現更加完整，如圖52所示。
浮動技術是DIV CSS布局中常用的一種布局手段，其概念是將內容塊從父標簽中浮動出來，它的頂部會與父標簽的頂部對齊。被浮動標簽的定位還是基於正常的文檔流，標簽浮動後將自動轉為塊級標簽，並被移動至當前行的左側或右側，文字內容會圍繞在浮動標簽周圍。當一個標簽從正常文檔流中浮動出來之後，仍然在文檔流中的其他標簽信息將忽略該標簽並填補其原先的空間。實現浮動的樣式屬性為float，其值有三個關鍵字組成： none、left和right，分別用來實現無浮動、居左浮動和居右浮動。圖52中實現圖片浮動的CSS樣式代碼示例53所示。示例53



img
{
float: left;
margin: 5px;
padding: 1px;
border: solid 1px #ccc;
}



頁面標簽通過設置浮動來實現布局，是DIV CSS布局中關鍵的技術。注意：  浮動標簽隻能浮動至左側或右側，沒有浮動至中間的說法。 讓一個標簽浮動，它會往左或往右浮動直至遇到容器的邊緣。如果向同一方向再浮動一個標簽，它會浮動直至踫到前一個浮動標簽的邊緣。如果浮動更多的標簽，它們將一個挨一個排列，但不久就會造成空間不足。當該行已經無法容納更多的浮動標簽，則下一個浮動標簽會換行繼續排列。 浮動標簽垂直位置由它原先在文檔流中的位置決定，與當前行對齊，但是水平方向上，它盡可能遠地向容器邊緣移動，但仍遵循容器標簽的填充距離。同行的行內標簽則圍繞浮動標簽排列。 通常標簽設置浮動的同時，會伴有寬度的設置。因此，有必要遵循盒模型的計算標準，以免影響終的顯示效果。 浮動標簽會從父標簽中浮動出來，如果父標簽沒有設置浮動，那麼，當浮動子標簽的高度超過父標簽的高度時，在頁面中的表現就好像脫離了父標簽一樣(如圖53所示)。如果需要將子標簽包含到父標簽內(如圖54所示)，則需要同時浮動父標簽。


圖53子標簽浮動出父標簽的範圍



圖54子標簽和父標簽同時浮動的效果

2. 浮動技術的應用在采用DIV CSS技術布局時，必須通過浮動技術來終完成整個網頁的布局，因此，浮動使用的好壞將直接影響整個網頁的終顯示效果。例如，在本示例中，可以通過“居左浮動”的設置將側邊欄浮動到頁面的左方，同時需要同時為子標簽設置浮動，達到終的表現效果。具體CSS樣式代碼如示例54所示。示例54


#sider
{
width: 270px;
float: left;
margin-top: 10px;
color: #8f8f8f;
}
#sider .block
{
margin-bottom: 10px;
float: left; /*在父標簽的範圍內浮動*/
clear: both;
width: 100%;
}



同樣，在“CSDN圈子”欄目中也需要使用浮動，代碼如示例55所示。示例55



#csdnGroups
{
float: left;
width: 100%;
clear: both;
border: solid 0px gray;
padding: 0px;
margin: 0px;
font-size:18px;font-old: 12px;
}
#csdnGroups h1
{
background-image: url(Images/icon_warn.png);
background-position: center left;
border: solid 0px gray;
float: left;
background-repeat: no-repeat;





padding: 6px;
padding-left: 30px;
}
#csdnGroups ul
{
background-color: #24323b;
padding: 0px;
margin: 0px;
float: left;
clear: both;
width: 100%;
}
#csdnGroups ul li
{
padding: 5px 0 5px 5px;
margin: 1px 0px 0px 1px;
background-color: #eeeeee;
float: left;
display:inline-block;
list-style: none;
width: 94px;
}



浮動技術是根據實際需要應用的，並非任何時候、任何地方都要使用，這是在長期網頁設計實踐過程中經驗的積累。讀者可以通過浮動技術終完成網頁中其他部分的頁面布局。5.2.3清除浮動1. clear屬性清除浮動

DIV CSS布局通過浮動內容塊來達到布局效果，內容浮動出去之後，HTML文檔中後面的內容就會自動填補浮動標簽的位置。這樣，對於那些在新的一行顯示的信息會位置錯亂。圖55所示是未設置浮動時瀏覽器中的顯示情況，其CSS樣式代碼如示例56所示。示例56


#header{background:#369;}
#sider{background:#9c3;}
#footer{background:#cc9;}






圖55設置浮動之前的頁面效果
下面通過示例57的CSS代碼，將其中的“內容介紹”和“作者介紹”兩部分進行浮動定位。示例57



#header{background:#369;}
#content{width:70%;float:left;}
#sider{background:#9c3;width:30%;float:right;}
#footer{background:#cc9;}



通過浮動定位之後，就形成了左右分布的內容欄和側邊欄，但是頁腳部分的信息卻與前面的兩個浮動塊混在一起了。因為在HTML文檔中，頁腳的代碼緊跟側邊欄的代碼，所以，它就被放置在這裡了。另外，頁腳沒有設定寬度，因此，它的背景顏色占據了整個容器的寬度,如圖56所示。


圖56設置浮動之後的頁面效果
浮動本來是為了控制頁面布局，圖56中的效果卻沒有達到終的要求。其原因也曾經提過，標簽浮動之後，文檔流中位於該標簽後面的內容就會占據它的位置，導致出現了圖56中的效果。在DIV CSS布局過程中設置浮動的同時，通常還需要配合使用“清除浮動”的操作。“清除浮動”的作用是使當前標簽的左、右或左右同時都不存在浮動的標簽，從而達到預期的表現效果。清除浮動的樣式屬性為clear，其值關鍵字包括：  none： 不清除任何浮動。 left： 標簽左側不允許存在浮動標簽。 right： 標簽右側不允許存在浮動標簽。 both： 標簽左右兩側都不允許存在浮動標簽。其中，clear:both的樣式設置為常用。在含有浮動設置的頁面中，通過清除浮動來開啟新的一行。修改示例57的CSS代碼，就可以達到預期的效果了，代碼如示例58所示。示例58



#header{background:#369;}
#content{width:70%;float:left;}
#sider{background:#9c3;width:30%;float:right;}
#footer{background:#cc9; clear:both;}



對頁腳設置清除浮動操作之後，後頁面的顯示效果如圖57所示。


圖57為頁腳清除浮動之後的效果
當然，圖57仍然存在頁面表現方面的瑕疵，但基本的頁面架構已經成型，有利於進一步通過CSS代碼來完善頁面的外觀。2. 清除浮動設置浮動之後，還需要適時清除浮動。如果層header、navigater、quickSummary、mainer、footer都使用了浮動，那麼根據浮動的使用效果，有必要為這些標簽同時設置清除浮動(即clear:both)，代碼如示例59所示。示例59


#header{
background-image: url(Images/logo.png) no-repeat center 5px;
clear:both;
height:107px;
width:100%;






text-align:center;
}
#mainer
{
margin: 10px auto;
clear: both;
}
#footer
{
background-image: url(Images/footer_bg.png) no-repeat center top;
clear: both;
margin: 10px auto;
text-align: center;
margin-top: 20px;
padding: 20px;
height: 40px;
}




5.2.4IE瀏覽器的兼容問題由於不同的瀏覽器內核對Web設計標準有著不同的解析，則不同的瀏覽器對相同的CSS樣式代碼就會呈現不同的表現效果，如樣式表中的盒模型，這一點在低版本的IE瀏覽器中(IE 6、IE 7)表現更為明顯。因此，有必要對這些瀏覽器編寫專門的CSS代碼（如示例510所示），以提高網頁對瀏覽器的兼容性。示例510


#navigater li
{
/*float: left;*/
text-align: center;
list-style: none;
width: 102px;
display:inline-block;
height: 44px;
_height: 31px;/*兼容IE6瀏覽器*/
*height: 33px; /*兼容IE7瀏覽器*/
_margin-top: 7px;
padding-top: 13px;
_padding-top: 13px;
margin-left: 5px;
}



從示例代碼中可以得到：  直接使用屬性： 應用於IE 8瀏覽器，以及Firefox瀏覽器。 “_” 屬性： 兼容IE 6瀏覽器。 “*” 屬性： 兼容IE 7瀏覽器。由於常用的瀏覽器是IE，因此在編寫網頁的CSS樣式時，有必要專門對不同版本的瀏覽器編寫兼容性代碼。5.2.5常用DIV CSS布局功能習慣使用表格布局的程序員，如果突然轉到DIV CSS布局，會有很大的不適應。他會感覺對頁面的布局突然變得松散，因為與原來對表格的樣式控制相比，層(DIV)就像浮雲一樣，突然變得毫無規律可言，這也是為什麼有人稱DIV CSS布局為流動布局的原因。下面通過DIV CSS布局來實現表格布局中的一些習慣樣式。1. 頁面整體水平居中由於浮動的層隻能有居左和居右兩種選擇，這就使得頁面居中設置比表格布局復雜一些。要實現該效果，首先需要在標簽中間添加一個層，然後通過CSS樣式來實現。示例58的HTML代碼可以更新如示例511所示。示例511

然後修改CSS代碼如示例512所示。示例512


body
{
font-family: "Arial";
color: #000;
padding-top: 24px;
background: url(images/main_bg.jpg) #4396ca repeat-x left top;
font-size:18px;font-old:12px;
text-align:center;
}
#wrap{width: 995px;  margin:0 auto;  text-align:left;}



上述CSS代碼中下畫線的部分就是用來實現網站居中的樣式設置。2. 垂直居中通過DIV CSS布局實現垂直居中相對復雜，需要用到定位的知識。下面示例513來說明如何實現。示例513HTML代碼： 

http://bolm.cn

DIV居中示例

CSS代碼： 


html,body{height:100%;}
#wrapper{ height: 100%; width: 100%; position: relative;}
#mid{position: absolute; top: 50%;left: 50%;}
#box{position: relative; top: -50%; left: -50%; z-index: 9999; width: 300px;}
div.boxstyle{ border: 2px solid #000; text-align: center; padding: 5px;}




3. 分欄背景平鋪


圖58背景圖片設計

在圖57中，通過清除浮動完成了基本的頁面架構，但還有不完美的地方，那就是右邊側邊欄的背景顏色沒有擴展至要求的高度。這是因為側邊欄沒有足夠的內容將層撐到足夠的高度。對此，可以通過創建一個背景圖片填充，達到分欄的效果，如圖58所示。
然後將外層(id=“wrap”)的背景設置為垂直平鋪該背景圖片，如示例514所示。示例514



#wrap
{
max-width: 1000px;
background: url(images/bg.png) repeat-y 70% 0;
}



這樣，通過垂直平鋪背景圖片，側邊欄的顏色就一直延伸到頁腳，並跟隨窗口的伸展和收縮而變化，如圖59所示。


圖59通過背景圖片來偽分欄

5.2.6DIV CSS布局示例： 導航菜單由於表格布局已經成為歷史，因此本書從一開始就主張使用DIV CSS的布局技術，這在前面章節中的實例部分(包括HTML文檔的建立和CSS樣式表的編寫)都有所體現。在DIV CSS布局中，浮動技術的應用尤為重要，為了更好地完成浮動，還要合理地清除浮動。現在，通過DIV標簽 CSS樣式表來重新布局。
圖51中父導航欄和子導航欄可以分別通過兩個不同的層(div)來劃分，每個層中都是一個無序列表(

)，而前格(

)則通過列表項( )來代替，這就完成了導航欄的結構分析。具體實現代碼如示例515所示。 示例515 與表格布局相比，DIV CSS布局的代碼無論在代碼語義的理解方面，還是代碼量方面都有顯著的提高，然後再通過設計的CSS樣式代碼，就可以完成與表格布局效果完全一樣的外觀。用來實現導航欄效果的CSS代碼如示例516所示。示例516 #nav{background:url(images/tab_bg_tal.jpg) left bottom repeat-x;height:34px;} #subNav{background:#d90f0f url(images/subtab_act_lbg_first.jpg) left bottom no-repeat;height:46px;} #nav ul, #subNav ul{float:left;margin:0;padding:0;width:100%;clear:both; list-style:none;} #nav ul{height:100%;} #nav ul li, #subNav ul li{float:left;margin:0;padding:0;height:100%; text-align:center;} #nav ul li a, #subNav ul li a{display:block;color:#fff;} #nav ul li a span, #subNav ul li a span{margin:10px; display:block;} #nav ul li{background:url(images/tab_rbg.jpg) right center no-repeat; font-weight:bold;} #nav ul li.active{background:#d90f0f url(images/tab_act_lbg_first.jpg) left top no-repeat;width:165px;} #subNav ul li{background:url(images/subtab_leftbord.jpg) right center no-repeat;font-weight:bold;} #subNav ul li.active{} #nav ul li.last, #subNav ul li.last{background:none;} 在該案例中，需要注意的是列表項 標簽的樣式設置。因為，在應用列表標簽 時，默認情況下，它具有一定的margin屬性和padding屬性。同時，每個列表項 都使用點作為前導符號，並且是縱向依次排列。TemplateMonster導航欄的顯示要求與列表標簽默認的外觀可以說是大相徑庭。要達到TemplateMonster的要求，可以通過控制 標簽的兩種CSS屬性來實現：  float： 如上面CSS代碼中，設置float:left就可以讓列表項按順序橫向依次顯示。 inline： 通過設置display:inline，將列表項轉換為內聯標簽，從而顯示在同一行中。 5.3響應式布局 Web是一個極不“穩定”的環境，舊的瀏覽器和設備仍在被人們使用的同時，新的瀏覽器和設備在不斷出現，而這些新的設備不久以後又可能被淘汰，這勢必會造成混亂，而混亂又在造成的同時也激發了創新和創造。因此，各種Web瀏覽器、Android手機、iPhone、kindle閱讀器、Nook閱讀器、iPad……這些不同形式因素衝擊著設計師，需要確保在不同平臺的不同瀏覽器上都能創造出相同的用戶體驗，這就需要響應式布局技術來幫助實現。響應式布局的提出者Ethan Marcotte在論文中指出： “當談論響應式設計時，我希望強調的是，響應式設計不是‘為移動設備而設計’，也不是‘為臺式機而設計’，是關於采用靈活、與設備無關的方法來為Web進行的設計。”可見，設備無關的概念是關鍵，它要求所有的組件或布局都能與不同類型的設備和平臺兼容。對於大部分開發者，響應式設計可能隻停留在“桌面版和移動版共享一套代碼”這個層面，但隨著移動Web的飛速發展產生了非常多的實踐。廣義上的響應式設計其實包含非常多的內容，從前端技術角度而言，通常包含如下內容： (1) 使用流式布局(Fluid Layout)或響應式柵格(Responsive Fluid Grid)以適應不同屏幕寬度。(2) 使用CSS3媒體查詢技術針對不同尺寸甚至不同類型屏幕實現一套代碼多套布局或進行樣式微調。(3) 使用流式圖片(Fluid Images)以充分利用屏幕空間。(4) 配合後端抽像出HTML模塊，輸出針對不同類型設備適配後的模板、CSS、JavaScript或其他資源。5.3.1布局類型在Zoe Mickley的《Flexible Web Design》一書中定義了4種布局類型： 固定布局、可變布局、彈性