2014教程年html、css夏季版

1、2014 年HTML、CSS夏季版*說(shuō)明*1.如果您在一年后看到了該，那么可以考慮搜索它的更新的版本了，畢竟它的更新速度還是蠻快的。2.建議搜索“html”或者“css”，肯定不會(huì)失望的。3.如果您也經(jīng)常用CSDN 博客的話(huà)，可以留言給：，發(fā)郵件給我： 。問(wèn)題也可以4.由于是第一版寫(xiě)HTML、CSS，難免會(huì)有知識(shí)疏漏、沒(méi)講清楚、系統(tǒng)性不夠的問(wèn)題，期望您的參與，可以嗎？一起完善它，目標(biāo)：更新更全更實(shí)用。前進(jìn)的道路，陪伴您。只要在，編程充滿(mǎn)愛(ài)?？赡墚?dāng)前版本您并不滿(mǎn)意，下個(gè)版本絕對(duì)超乎您想象。目錄：1 / 120前言4第一部分：HTML 快速掌握第一節(jié)：HTML 快速入門(mén)5第二節(jié)：head和文本.8

2、第三節(jié)：.11第四節(jié)：超.16第五節(jié)：表單21第六節(jié)：列表25第七節(jié)：區(qū)塊30第八節(jié)：小結(jié)32第二部分：CSS 快速掌握第一節(jié)：CSS 簡(jiǎn)介35第二節(jié)：CSS 語(yǔ)法快速入門(mén)38第三節(jié)：CSS 中的顏色與文字45第四節(jié)：超與列表以及簡(jiǎn)單導(dǎo)航欄49第五節(jié)：盒模型52第六節(jié)：定位56第七節(jié)：浮動(dòng)65第八節(jié)：、背景和布局772 / 120第三部分：CSS 經(jīng)典應(yīng)用第一節(jié)：導(dǎo)航條84第二節(jié)：氣泡91第三節(jié)：面包屑導(dǎo)航100第四節(jié)：列表113第五節(jié)：結(jié)語(yǔ)1203 / 120前言*我需不需要學(xué)習(xí)它*1.我認(rèn)識(shí)的很多開(kāi)發(fā)web 的朋友，他們或許有人專(zhuān)注于后臺(tái)程序的編寫(xiě)，有人專(zhuān)注于前臺(tái)的制作。2.寫(xiě)的程序員大都

3、很怕編寫(xiě)前臺(tái)界面，認(rèn)為寫(xiě)網(wǎng)頁(yè)是一個(gè)很累的活兒，感覺(jué)又沒(méi)有技術(shù)含量。3.于是，很多人會(huì)說(shuō)：HTML、CSS 是前臺(tái)的事，我不需要去學(xué)，我是做的。4.其實(shí)，什么不跟著看法是：由于它的學(xué)習(xí)這么簡(jiǎn)單，那快速的掌握它呢？為*我怎么學(xué)好它*1.老實(shí)說(shuō)，HTML 和CSS 絕對(duì)不是靠“學(xué)”出來(lái)的，它是靠練出來(lái)的。2.它和算法不一樣，它更像繪畫(huà)和射擊，理論就那么點(diǎn)知識(shí)，學(xué)習(xí)完了理論就是無(wú)盡的實(shí)戰(zhàn)和自己的創(chuàng)意。3.如果說(shuō)寫(xiě)是一門(mén)“技術(shù)活”，那么寫(xiě)前臺(tái)絕對(duì)是一門(mén)“藝術(shù)活”，我相信你有藝術(shù)細(xì)胞的。4.其實(shí)最好是從心里喜歡它，就一定能做好它，就想有些人喜歡繪畫(huà)一樣，做出一個(gè)漂亮的前臺(tái)界面，和繪畫(huà)出一幅畫(huà)一樣有成就感，

4、不是嗎？*1.其實(shí)我最的就是博客園了，這里是一個(gè)高手云集的地方：/ ，我也從中受益匪淺。2.另外，號(hào)稱(chēng)新手樂(lè)園的CSDN 也不錯(cuò)，至少我在這里還是感覺(jué)很有收獲的：。4 / 120第一部分：HTML 快速掌握第一節(jié)：HTML 快速入門(mén)。5 / 120首先一個(gè)，就是http:/，這是一個(gè)公開(kāi)的教學(xué)，但是它有一個(gè)問(wèn)題，那就是雖然很全面，但它不是一個(gè)入門(mén)，而是一個(gè)手冊(cè)性質(zhì)的，也就是適合去隨時(shí)查詢(xún)，但是不適合隨時(shí)隨地的閱讀和學(xué)習(xí)。本則是一個(gè)適合入門(mén)的，如果是新手，可以學(xué)習(xí)下，如果是高手，這種html 的知識(shí)就不用看了。*快速入門(mén)*html 是HyperText Markup Language 的縮寫(xiě)，即

5、超文本標(biāo)記語(yǔ)言，所謂的超文本，也就是可以包含了、超鏈接等的文本，而不僅僅是只能顯示文字，它是一個(gè)標(biāo)記語(yǔ)言，不是一個(gè)編程語(yǔ)言，因此大家學(xué)習(xí)起來(lái)會(huì)非常的快速可以新建一個(gè)xinxing.html，在編輯器中寫(xiě)入如下代碼：CSS，的關(guān)注HTML，的關(guān)注。6 / 120然后保存，然后用瀏覽器打開(kāi)，會(huì)發(fā)現(xiàn)瀏覽器的界面上顯示了幾個(gè)文字：HTML，的關(guān)注。 下面來(lái)講解一下這段代碼。3.我運(yùn)行一下這個(gè)頁(yè)面把，它的界面是這樣的：*這里大家會(huì)發(fā)現(xiàn)有一個(gè)和一個(gè)標(biāo)記，它們兩個(gè)組成了一個(gè)對(duì)，每一個(gè)都被稱(chēng)之為一個(gè)當(dāng)然下面的head 和body 也是對(duì)，而且開(kāi)頭都用尖括號(hào)起來(lái)，并且結(jié)尾的地方加一個(gè)斜線(xiàn)。其實(shí)HTML 既然被稱(chēng)

6、為一個(gè)標(biāo)記語(yǔ)言，它本身也是由若干的組成的，的最初始的說(shuō)明這是一個(gè)html文檔的開(kāi)始，而則說(shuō)明停止該文檔，也就是 html對(duì)中間的部分都是html 的內(nèi)容。當(dāng)然，還有head對(duì)和body對(duì)，它們的功能是一樣的，這里說(shuō)一下head，它包含了所有的頭部元素，在head 元素中可以添加一些設(shè)置，到后面再細(xì)說(shuō)。下面的title說(shuō)明的是在瀏覽器的的標(biāo)題的內(nèi)容，它還會(huì)協(xié)助搜索引擎來(lái)搜索頁(yè)面，而且當(dāng)把該網(wǎng)頁(yè)添加到收藏夾的時(shí)候，它還會(huì)顯示在收藏夾中的標(biāo)題。7 / 120上面的body 則是瀏覽器的顯示內(nèi)容， 通常也是的把內(nèi)容寫(xiě)到這里面來(lái)，它的內(nèi)容也就愈加廣泛。body 的p 則是指明了一個(gè)段落，它里面的文本信息

7、就是該段落所擁有的內(nèi)容，當(dāng)然 這里只是顯示了一句話(huà)，沒(méi) 特別的意義。*備注*并不是所有的都是由開(kāi)始和結(jié)束組成的，比如用于換行的,其實(shí)要換行，只需要寫(xiě)一個(gè)就可以了，但是出于標(biāo)準(zhǔn)，在br 后面加一個(gè)空格和一個(gè)斜線(xiàn)。還可以有屬性，這些后面再說(shuō)，原則就是:用到的時(shí)候再說(shuō)。*小結(jié)*本小節(jié)主要認(rèn)識(shí)了一下HTML 的基礎(chǔ)知識(shí)，然后演示了一下HTML 文件的寫(xiě)法。雖然HTML5 的腳步越來(lái)越快了，但是本并不是為 HTML5 準(zhǔn)備的，而是為那些學(xué)習(xí)、JavaEE、的程序員快速入門(mén)前臺(tái)，不再為前臺(tái)編寫(xiě)界面而一籌莫展而寫(xiě)的一本。第二節(jié)：head和文本上面一節(jié)中介紹了HTML 文件的書(shū)寫(xiě)和幾個(gè)，接下來(lái)head來(lái)認(rèn)識(shí)幾

8、個(gè)其他的，這里主要介紹一下和文本。*head*1.所謂head，就是頭的意思，它可以包含若干子，它的內(nèi)容是不會(huì)再瀏覽器的文本區(qū)域顯示的，但是它的作用非常廣泛，下面重點(diǎn)介紹一下它的子。已經(jīng)看到了，2.head而title可以包含title，上面就是在瀏覽器的標(biāo)題欄顯示的內(nèi)容，這點(diǎn)我們上節(jié)說(shuō)了。3.link可以用于導(dǎo)入外部的資源文件，通常用于導(dǎo)入css 文件和js 文件，對(duì)于css 和js，這里先給一個(gè)導(dǎo)入css 的例子：后面會(huì)介紹的，8 / 120比如下面定義了一個(gè)關(guān)鍵字，方便搜索引擎來(lái)抓取我們的頁(yè)面:它還可以通過(guò)使用style 來(lái)內(nèi)置css，不過(guò)我本人不是很 這么做，這會(huì)使得文件過(guò)于臃腫。me

9、ta ，它是指的元數(shù)據(jù)，所謂元數(shù)據(jù)，就是可以用于描述網(wǎng)頁(yè)的一些信息，比如指定編碼方式、作者等等，下面這個(gè)例子就指定網(wǎng)頁(yè)的編碼格式使用gbk：6.script 元素，它用于加載Javascript，后面再 *body*1.上面講解了head，那么接下來(lái)講解body2.除了上面講解的幾個(gè)，下面的都是body 的 子，就不一一介紹了。1.用中的內(nèi)容來(lái)表示最大的標(biāo)題，用對(duì)來(lái)表示小一號(hào)的標(biāo)題，這個(gè)數(shù)字是可以繼 3.標(biāo)題出現(xiàn)在body里面，因?yàn)樗强梢灾苯语@示 1.前面也說(shuō)過(guò)了，用p表示段落。對(duì)來(lái)讓文本加粗，用對(duì)或者對(duì) 來(lái)定義上標(biāo)字，用ins來(lái)定義字，用del來(lái) 9 / 120定義刪除字。讓文本傾斜。3.

10、此外還可以用sub來(lái)定義下標(biāo)字，用sup2.可以用對(duì)或者在瀏覽器中的。*段落*續(xù)加下去的，一直加到，它表示最小字號(hào)的標(biāo)題。2.標(biāo)會(huì)使得文字變粗而且也會(huì)變大，但是不要單純的讓文字變粗變大而使用標(biāo)題。*標(biāo)題*，body中的內(nèi)容是瀏覽器的主要顯示部分。說(shuō)。4.下面是一個(gè)代碼示例：10 / 120它的效果如下：此外， 可以用來(lái)表示一個(gè)換行，當(dāng)然老版的書(shū)籍上也會(huì)用，我更 前者。對(duì)于這種一個(gè) 就可以表達(dá)清楚，而不是需要一個(gè)標(biāo)簽對(duì)的， 通常建議在第一個(gè) 的后面加一個(gè)空格和一個(gè)斜線(xiàn)。*小結(jié)*本節(jié)認(rèn)識(shí)了兩個(gè)比較重要的，一個(gè)是head，另一個(gè)是文本標(biāo)記的。例子比較簡(jiǎn)單，希望讀者也可以跟著做一下。以前價(jià)格：400

11、元現(xiàn)在價(jià)格：200 元第三節(jié)：前面也涉及了HTML 中的一些東西，接下來(lái)要涉及 終歸還是單調(diào)的，就需要用來(lái)給的網(wǎng)頁(yè)增加 的表現(xiàn)形式。*1.用來(lái)給的HTML 文件導(dǎo)入一個(gè)， 它是一個(gè)空，即它只包含屬性，而且它沒(méi)有相應(yīng)的閉 合，即它不用成對(duì)出現(xiàn)。2.很多時(shí)候還是需要去作為裝飾甚至是主要內(nèi)容 來(lái)呈現(xiàn)的，而技術(shù)里面對(duì)的常見(jiàn)操作就是加水印， 的，里面就有操作的，有的讀者可以去看 徑，也可以是相對(duì)路徑，還可以是一個(gè)，即一個(gè)URL， 比如要引入的是的一張，那么可以寫(xiě)如 下代碼：11 / 120一下。3.它的src 屬性應(yīng)用于指定源屬性地址，它可以是絕對(duì)路到圖像了，如果沒(méi)有圖像，即使文字的樣式再多，再?gòu)?fù)雜，4

12、.當(dāng)然上述代碼有點(diǎn)長(zhǎng)，主要是的地址比較長(zhǎng)，既然地址都發(fā)出來(lái)了，于是干脆把運(yùn)行效果一起粘貼出來(lái)把：它是的一種比較有力的方式，當(dāng)然，我會(huì)出一期 12 / 120img還可以包括alt 屬性，它是當(dāng)無(wú)法載入的時(shí)候用來(lái)顯示的。這個(gè)時(shí)候?yàn)g覽器的區(qū)別就看出來(lái)了，各大瀏覽器的支持是不一樣的，首先是全球用戶(hù)量已經(jīng)第一的谷歌瀏覽器：11.設(shè)置高度和寬度是非常重要的，它可以讓的圖 片排列更加整齊，比如不指定大小的時(shí)候如下：13 / 120還是上面的代碼，用微軟哥的IE 瀏覽器瀏覽效果如下；img還有一個(gè)width 屬性用于設(shè)置顯示圖像的寬度，用height 屬性來(lái)設(shè)置顯示的高度。如果一個(gè)有多個(gè)屬性，那么需要用空格

13、進(jìn)行分開(kāi)，并且屬性的值需要引號(hào)引起來(lái)，以明確表示它的屬性。示例代碼：14 / 120但是使用下面這種方式是不是就更整齊一些了呢？對(duì)來(lái)源大小不一樣的可以通過(guò)人為的改變它的顯示大?。?路徑問(wèn)題*1.會(huì)想到我初學(xué)HTML 的一些經(jīng)歷，在這里提醒大家一下關(guān)于路徑的問(wèn)題吧，img 的src 屬性可以用絕對(duì)路徑，也可以用相對(duì)路徑。15 / 1202.比如編寫(xiě)的html 和在同一目錄下，且叫 x.gif，那么就可以寫(xiě)代碼為：*小結(jié)*本節(jié)課 介紹了HTML 中關(guān)于 的一些知識(shí)，希望大家可以理解。但是真正的項(xiàng)目中，添加合適的 卻往往是一件比較費(fèi)時(shí)費(fèi)力的事情， 往往要進(jìn)行各種各樣的切圖，這些后面再說(shuō)。其實(shí)HTML

14、 本身非常簡(jiǎn)單，現(xiàn)在的CSS 技術(shù)則是越來(lái)越復(fù)雜了，因此學(xué)好CSS 和Javascript 顯得越來(lái)越關(guān)鍵。*另外*由于每一節(jié)都是一頁(yè)的開(kāi)頭，這里還有一些空隙，我廢話(huà)幾句把，那就是，的使用并不難，但是的布局，還有的切圖等部分，還是一個(gè)比較累的活的。另外附上一張小星星（作為吉祥物把）：第四節(jié)：超16 / 120接下來(lái)繼續(xù)學(xué)習(xí)HTML 中的，希望大家能夠再接再厲，同時(shí)也會(huì)支持大家，一起努力，一起加油。本小節(jié)來(lái)認(rèn)識(shí)另外幾個(gè)。*空格和換行*在HTML 文件中的那么多的空格和換行在瀏覽器上顯示的時(shí)候和在文本編輯器中看到的并不一樣，可能HTML 代碼中有大量的空格和換行，但是輸出到瀏覽器上的時(shí)候卻好像沒(méi)有

15、空隙。瀏覽器會(huì)把多余一個(gè)的空格都為一個(gè)空格，如果想要多加幾個(gè)空格的話(huà)，需要使用 它表示字符實(shí)體，每當(dāng)加上一個(gè)它就會(huì)多加一個(gè)空格，值得注意的是，這里的總共是六個(gè)字符，兩個(gè)符號(hào)和母，。至于換行，前面也看到了，通常用表示。比如：*實(shí)例演示*1.比如在文本編輯器中輸入“辛星”，雖然輸入了很多空格，但是只是顯示一個(gè)空格，截圖：17 / 120因此使用的話(huà)，效果如下：就像這種在HTML 中叫做“字符實(shí)體”，感的童鞋可以去下字符實(shí)體。18 / 120*pre*所謂的的pre，就是定義預(yù)格式文本，在該中間的部分會(huì)原封不動(dòng)的輸出到瀏覽器上，它的多于一個(gè)的空格不會(huì)被當(dāng)做一個(gè)空格，而且換行也會(huì)正常顯示。示例代碼：我

16、是，你是誰(shuí)啊，值得關(guān)注看一下它的執(zhí)行效果：*超*1.所謂超，就是當(dāng)點(diǎn)擊某個(gè)東西的時(shí)候，它會(huì)自動(dòng)跳轉(zhuǎn)到別的，這個(gè)“東西”可以是文字，也可以是2.用a來(lái)表示超，而且它有一個(gè)href 屬性， 這個(gè)href 屬性中填寫(xiě)連接到的地址。3.光用a定義一個(gè)超往往還不夠，還需 要定義一個(gè)載體，點(diǎn)擊這個(gè)載體，跳轉(zhuǎn)到連接的地址，如果用文字作為載體，則在a中書(shū)寫(xiě)相應(yīng)的文字 4.下面用文字作為載體，來(lái)演示一下超的使用： 19 / 120需明的是，超的href 屬性中的http:/ 不能省略，否則會(huì)導(dǎo)致錯(cuò)誤。上面的截圖：也通常指定a的href 屬性為#號(hào)表示一個(gè)空鏈接。新浪即可。，而且當(dāng)把鼠標(biāo)指針移動(dòng)到網(wǎng)頁(yè)的某個(gè)超上

17、的時(shí)候，鼠標(biāo)通常會(huì)變成一只小手的樣子。7.a的另一個(gè)常用屬性就是 屬性了，如果沒(méi)有 該屬性，點(diǎn)擊它，默認(rèn)是在本網(wǎng)頁(yè)加載該連接到的網(wǎng) 頁(yè)，如果使用了它，那么可以在新的頁(yè)中打開(kāi)， ，20 / 1208.比如我點(diǎn)擊該超，并且效果如下：*小結(jié)*本節(jié)介紹的內(nèi)容首先介紹了HTML 網(wǎng)頁(yè)中的回車(chē)和換行的問(wèn)題，然后還介紹了一下pre 。然后就是介紹了超 ，超 在HTML 應(yīng)用中異常的廣泛，因?yàn)镠TML 要進(jìn)行各種各樣的頁(yè)面跳轉(zhuǎn)，就必然要涉及到 url，而使用 url 很方便的 式就是使用超因此， 以后學(xué)CSS 的時(shí)候，對(duì)應(yīng)于超 的美化是很大的一塊內(nèi)容。去示例代碼：第五節(jié)：表單素，可以是輸入文本的文本框，也可以

18、是用于輸入的 示把數(shù)據(jù)提交給服務(wù)器所使用的方法，通常來(lái)說(shuō)，method 有g(shù)et 和t 兩種方式，如果是get 方式的提交， 那么表單的數(shù)據(jù)可以在url 中出現(xiàn)，而t 方式就安全的 務(wù)器的處理，服務(wù)器可以用 寫(xiě)，可以用 java，還可以用 等等，這一點(diǎn)確實(shí)不好說(shuō)了。2.比如可以指定type 的屬性為text，那么此時(shí)它表示 21 / 120一個(gè)文本輸入框。3.比如可以指定type 的屬性為password，那么此時(shí)它表示一個(gè)輸入框，其實(shí)輸入框和文本輸入框很像，*表單元素*1.所謂表單元素，通常使用輸入來(lái)表示，即input，它也是一個(gè)空，它沒(méi)有與之對(duì)應(yīng)的結(jié)束， 通過(guò)指定它的type 屬性來(lái)讓該表

19、單元素具有不同的功 能。多了，不會(huì)再u(mài)rl 中出現(xiàn)。3.表單通常還需要定義一個(gè)action 屬性，它的屬性值是服框，還可以是各種各樣的下拉框，還有可能是單選框 和復(fù)選框。2.表單通常需要定義一個(gè)方法，用屬性method 表示，它表如果讀者是一位開(kāi)發(fā)者，那么肯定會(huì)知道什么叫表單，這里就介紹一下前臺(tái)如何使用表單，表單的使用也是編寫(xiě)網(wǎng)頁(yè)的必須經(jīng)歷的一關(guān)，而且，表單也往往是的和弱點(diǎn)出現(xiàn)的地方。*表單*1.所謂表單，就是一個(gè)包含表單元素的區(qū)域，所謂表單元22 / 120賬號(hào)：: 如果非區(qū)別，那就是它的顯示特別單一，無(wú)法從它的顯示信息來(lái)獲取的內(nèi)容?？梢酝ㄟ^(guò)指定type 屬性為radio 來(lái)設(shè)置為一個(gè)單選框

20、，它需要傳遞一個(gè)value 屬性，表示當(dāng)選中該單選框的時(shí)候向傳遞的值是多少。還可以通過(guò)指定type 屬性為checkbox 來(lái)設(shè)置為一個(gè)復(fù)選框，它可以同時(shí)選擇。的表單是需要提交給處理程序的，此時(shí)定義type 為submit，它還可以接受一個(gè)value 屬性來(lái)指定該按鈕的顯示文本信息。*name 屬性*上面提到表單中可以有input，而input 表單都可以擁有一個(gè)name 屬性，它表示當(dāng)把數(shù)據(jù)提交給后臺(tái)的時(shí)候，用于區(qū)分這些內(nèi)容，比如把一個(gè)表單的數(shù)據(jù)提交給的去處理的時(shí)候，name 的值就是$_T數(shù)組的下標(biāo)。當(dāng)點(diǎn)擊type 為submit 的時(shí)候，它會(huì)提交表單，并且同時(shí)把數(shù)據(jù)發(fā)送過(guò)去。下面是定義了

21、一個(gè)表單的代碼：23 / 120至于 t 和get 是什么意思，這個(gè)對(duì)于學(xué)習(xí) 的童鞋是一定要熟練掌握的，對(duì)于前臺(tái)來(lái)說(shuō)，一般用 t 就可以了。它的效果圖：*常見(jiàn)的表單元素*比較常見(jiàn)的就是輸入框、框和隱藏域了，所謂隱藏域，就是需要發(fā)送的額外信息，但是不讓用戶(hù)看到。比如下面表單中就使用了隱藏域發(fā)送了一條額外的信息，但是用戶(hù)是看不到的。的HTML 代碼如下：24 / 120當(dāng)然級(jí)別的用戶(hù)和老太太是不知道隱藏域是神馬的，因?yàn)榈慕缑嬷挥袃蓚€(gè)框框可以輸入信息：那么怎么加密呢？這就需要程序猿的配合了，到底采用什么不是前臺(tái)一個(gè)人的事。*小結(jié)*這里定義了表單，如果讀者會(huì)諸如java 或者等服務(wù)器端的語(yǔ)言，就很容易

22、理解了。如果讀者沒(méi)有 方面的基礎(chǔ)，可能該小節(jié)有點(diǎn)吃力，也建議學(xué)習(xí)前臺(tái)的朋友們 一下 的知識(shí)，畢竟這兩者的結(jié)合態(tài)緊密了。第六節(jié)：列表希望博客少走彎路，獲得更系統(tǒng)的知識(shí)。用表格來(lái)布局，因?yàn)楸砀竦牟季直容^整齊，只需要把 2.隨著div+css 的流行，表格布局越來(lái)越不所喜歡， 3.table來(lái)實(shí)現(xiàn)一個(gè)表格，然后可以指定它 4.用tr 來(lái)表示表格的每一行，即tr是嵌套在他 table里面的。5.而用td來(lái)表示一個(gè)單元格，即td是嵌套 在 tr 里面的，通常把內(nèi)容寫(xiě)到的 td 中，而tr僅僅相當(dāng)于起到一個(gè)換行符的作用。1.比如下面定義一個(gè)三行兩列的表格：男女25 / 120*示例*的border 屬性，

23、默認(rèn)是無(wú)邊框的，即默認(rèn)情況下表格是用于布局的。甚至有人特別排斥表格，本來(lái)該用表格的地方也不用表格了，其實(shí)大可不必那么偏激，它也有它有用的一面，當(dāng)然也有它不可取的一面。表格的邊框設(shè)置為 0 就可以讓內(nèi)容顯示的很有條理了。*表格*1.在早些時(shí)候，那時(shí)候大家為了布局上的美觀(guān)，會(huì)經(jīng)常使不知道這樣大家會(huì)不會(huì)感覺(jué)枯燥，總之不管大家怎么樣，始終會(huì)陪伴大家的，的關(guān)注和支持，也衷心的 男女26 / 1205.來(lái)看一下上述代碼的運(yùn)行效果把：不知道讀者是否感覺(jué)有點(diǎn)別扭，因?yàn)樯鲜霰砀竦摹薄昂汀薄?、”“的作用是不同的，它有點(diǎn)類(lèi)似于標(biāo)題的感覺(jué)?？匆幌律厦娴倪\(yùn)行效果：對(duì)于上述表格中的” “和” “這種單元格，我們可以用th

24、 來(lái)代替td ，即 把代碼寫(xiě)成如下樣式：2.看一下運(yùn)行效果把：27 / 1206.其實(shí)表格還有諸如表格的標(biāo)題、頁(yè)眉、頁(yè)腳等屬性，個(gè)人感覺(jué)不是很常用，就不講解了。*列表* 1.HTML 中支持有序列表、無(wú)序列表和定義列表。所謂有序列表即一系列內(nèi)容是用序號(hào)進(jìn)行標(biāo)識(shí)的，它用ol來(lái)表示一個(gè)有序列表，用li 來(lái)表示每一個(gè)列表項(xiàng)。這里的ol 是order list 的意思，即”有序 列表“，而 li 是”list item“的意思，即”列表 元素“?？梢杂胾l 來(lái)表示一個(gè)無(wú)序列表，每一個(gè)列表li來(lái)表示，這里的ul 中的u 是un 的第一個(gè)字母，表示否定，即沒(méi)有順序?？梢杂胐l 來(lái)進(jìn)行一個(gè)自定義列表，其中的

25、d 是 define 的意思，即”定義“。而dt 表示列表中的上層項(xiàng)目，dd 通常用來(lái)表示列表中的下層項(xiàng)目，而dt 和dd 都必須放在dl 標(biāo)簽對(duì)之間。*代碼示例*1.首先是有序列表和無(wú)需列表，這里僅以有序列表為例子進(jìn)行說(shuō)明：28 / 120然后就是對(duì)定義列表的代碼實(shí)例：廣州 城市芝加哥 紐約 來(lái)看一下它的運(yùn)行效果吧：3.無(wú)序列表不論在制作導(dǎo)航，還是商品列表、文章列表等功能的時(shí)候都顯得異常強(qiáng)大，因?yàn)楹芏鄷r(shí)候需要顯示重復(fù)的信息，而最適合的就是列表（當(dāng)然也得分情況）。4.而且懂編程的話(huà)，會(huì)發(fā)現(xiàn)列表配合循環(huán)將會(huì)是一個(gè)非常強(qiáng)大的組合，二者很有默契，不是嗎？5.當(dāng)然，也不全對(duì)，也要看情況。29 / 12

26、0*小結(jié)*本小節(jié)的前部分介紹了表格，后部分介紹了列表。列表的應(yīng)用，特別是無(wú)序列表，其應(yīng)用比較廣泛，但是由于沒(méi)有涉及到css，因此先不講了，等后面再講解。第七節(jié)：區(qū)塊，30 / 120經(jīng)過(guò)前面六節(jié)的學(xué)習(xí)， 大致清楚了HTML 中的基礎(chǔ)內(nèi)容，那么接下來(lái) 開(kāi)始繼續(xù)向后推進(jìn)，可以說(shuō)，下面介紹一下HTML 中的區(qū)塊。*區(qū)塊*HTML 中的大多數(shù)元素都被定義為塊級(jí)元素或內(nèi)聯(lián)元素，塊級(jí)元素在顯示的時(shí)候，會(huì)以新行開(kāi)始，比如 前面講到的h1 ，p ，ol 和table 。而內(nèi)聯(lián)元素則在顯示的時(shí)候是不會(huì)另起一行的，它們會(huì)在后面顯示，比如前面講到的td，img， strong等等。*div*span*div 元素是

27、一個(gè)塊級(jí)元素，而且這個(gè)沒(méi)特定的含義，它就是表示一個(gè)塊，由于是塊級(jí)元素，因此每當(dāng)我們遇到一個(gè)div，都會(huì)換行。div 通常需要配合 css 一起用，才能顯示出它強(qiáng)大的在后面講css 的時(shí)候也會(huì)經(jīng)常用到div，這里就先不說(shuō)了。span 元素是典型的內(nèi)聯(lián)元素，它也沒(méi)有特定的含義，它就是定義一個(gè)內(nèi)聯(lián)元素，然后 可以配合css 來(lái)修改其內(nèi)部樣式。*布局*1.布局，翻譯成英語(yǔ)通常就是layout，一個(gè) 的布局是非常重要的，一個(gè)合理的布局就像 所說(shuō)的”這個(gè)人身材很好“，而一個(gè)不好的布局，就會(huì)個(gè)人一種很別扭的感覺(jué)。31 / 1202.關(guān)于布局的知識(shí)，我都放到后面的css里面去了，這里就先略過(guò)去了。*提前說(shuō)一下

28、*讓來(lái)看一下一個(gè)div 是什么把，代碼和演示效果如下：加入背景色和大小來(lái)看一下：第八節(jié)：小結(jié)32 / 120經(jīng)過(guò)前面七節(jié)的學(xué)習(xí)，我感覺(jué)大家的HTML 的功底也差不多了，而且我特別的刪去了某些東西，比如框架，如果回到幾年前，那么框架是非常流行的，但是現(xiàn)在都到了 2014 年了，這些東西早就該被遺忘了，因此，我果斷的把這些我感覺(jué)過(guò)時(shí)的東西全部扔掉。*標(biāo)準(zhǔn)寫(xiě)法*如果讀者是初學(xué)，經(jīng)過(guò)上面的學(xué)習(xí)，可能會(huì)亂了，比如我需要不需要寫(xiě)html呢？說(shuō)的是，由于HTML 語(yǔ)言是一門(mén)非常松散的語(yǔ)言，就是 隨便寫(xiě)兩個(gè)漢字，然后保存為.html 格式的文件，它也會(huì)給 去 ，比如：而且各大瀏覽器對(duì)HTML 文件的大致是一樣

29、的，但是也有很多不同，比如在那一節(jié)就看到了谷歌瀏覽器和 IE 瀏覽器的區(qū)別，那么該支持哪一種呢？按理說(shuō)，要盡可能的做到兼容性，剩下的，就讓決定吧。其實(shí)標(biāo)準(zhǔn)寫(xiě)法也分為好幾種，不過(guò)如果按照HTML5 的寫(xiě)法一般情況下是這樣的格式：33 / 120如果遵循XHTML1.0，寫(xiě)法大致是這個(gè)樣子：目前來(lái)說(shuō)，我還是標(biāo)題為 4 的寫(xiě)法。*HTML5*而HTML5 的話(huà)，本還是沒(méi)有涉及，我認(rèn)為現(xiàn)在學(xué)習(xí) HTML5 已經(jīng)可以了，畢竟HTML5 的也有一些人出了，但 是本不涉及，并不是我不建議大家學(xué)、不建議大家用，只是本沒(méi)有提及而已。還有些東西，比如樣式的設(shè)置，比如的id 和name 什么的，凡是我認(rèn)為可以放到c

30、ss里面的，都全部從HTML中劃掉了，可能有些讀者會(huì)持態(tài)度，但是經(jīng)驗(yàn)告訴我：這么做更好一些。3.不管怎么說(shuō)，HTML支持。告一段落，HTML，的*說(shuō)明*1.由于是第一版，雖然我經(jīng)過(guò)了一些修改和校正，避免了錯(cuò)誤的出現(xiàn)。2.但是還是肯定還會(huì)有這樣或那樣的不足，如果您喜歡這種的風(fēng)格（更新快、截圖展示、使用序號(hào)、使用星號(hào)分割內(nèi)容等等），那么為何不加入到程做好呢？，一起把這個(gè)教3.的支持。34 / 120第二部分：CSS 快速掌握第一節(jié)：CSS 簡(jiǎn)介CSS 是 Cascading Style Sheets 的縮寫(xiě)，即層疊樣式表，它用于表現(xiàn)HTML 的樣式，即HTML 只是去寫(xiě)該網(wǎng)頁(yè)有哪些內(nèi)容，至于如何去

31、表現(xiàn)它們，由CSS 去定制。*時(shí)代的呼喚*1.在之前，造成格式的直接把網(wǎng)頁(yè)的格式寫(xiě)到HTML 中去，這樣會(huì)，而且難以閱讀和修改，不過(guò)這不是最大的問(wèn)題，最大的問(wèn)題在于想給網(wǎng)頁(yè)換一個(gè)表達(dá)樣式的時(shí)候，需要修改的地方不僅很多關(guān)鍵是非常零散，需要花費(fèi)很大的力氣去定位這些樣式。2.于是，把網(wǎng)頁(yè)內(nèi)容與其表現(xiàn)形式相分離的想法就出現(xiàn)了，CSS 能夠?qū)崿F(xiàn)對(duì)網(wǎng)頁(yè)中的對(duì)象的精確控制，而且支持幾乎所有的字體字號(hào)樣式，還擁有對(duì)網(wǎng)頁(yè)對(duì)象和模型樣式進(jìn)行編輯的能力，并且能夠進(jìn)行一定的交互設(shè)計(jì)，因此功能還是比較強(qiáng)大的。3.CSS 的可讀性也很強(qiáng)，稍微熟悉一點(diǎn)英語(yǔ)的，也能夠很輕松的讀懂 CSS 代碼所要表述的意思，并且取修改它的樣

32、式。*CSS 的歷史*1.1996 年 12 月 17 日，CSS1 發(fā)布，1999 年，此被修訂。2.1999 年 1 月 1 日，CSS2 發(fā)布，并且增加了對(duì)媒介和一些字體的支持。3.2001 年 5 月 23 日，CSS3 發(fā)布，但是只是一項(xiàng)草案，并沒(méi)有成為W3C 的標(biāo)準(zhǔn)，W3C 的標(biāo)準(zhǔn)還是 1998 年 5月 12 日退出的CSS2.*CSS 快速入門(mén)*35 / 120h1 color:red; font-size:14px;這里的h1 就是選擇器，當(dāng)然這里直接用當(dāng)做選擇器了，后面的color 屬性取值為red，而后面的font-size屬性取值為 14 個(gè)像素。6.其中color：r

33、ed 就可以理解為一個(gè)。7.的CSS 由多個(gè)這樣的規(guī)則組成。*示例*1.下：先寫(xiě)一個(gè)HTML 文件，取名為”xin.html“，內(nèi)容如2014 年CSS 教學(xué)夏季版CSS，的關(guān)注，知識(shí)，傳遞36 / 120CSS 的入門(mén)比HTML 并不高多少，也是一句話(huà)入門(mén)，剩下的就是實(shí)戰(zhàn)了。CSS 的語(yǔ)法如下：選擇器1；2；3；.N這里的是以 “屬性:值”的形式，而且多個(gè)之間用分號(hào)進(jìn)行分割，即C 語(yǔ)言的語(yǔ)句分隔符。這里的屬性是希望設(shè)置的樣式屬性，至于具體的屬性，后面會(huì)說(shuō)。先看一個(gè)例子：37 / 120都保存完畢之后，就可以雙擊打開(kāi)my.html 文件，發(fā)現(xiàn)文字都在中間并且是綠色的。下面是它們的效果截圖：至此

34、，大致理解了css 的工作機(jī)理，下面開(kāi)始深入css 的細(xì)節(jié)處開(kāi)始學(xué)習(xí)。*小結(jié)*理解了CSS 的由來(lái)，以及演示了CSS 的語(yǔ)法。然后通過(guò)一個(gè)小型的例子，演示了CSS 的大致使用方式。pcolor: green;font-size: 14px;text-align: center;2.可以從第四行代碼看出，它導(dǎo)入了一個(gè)my.css 文件，然 后在同一目錄下新建一個(gè) my.css 文件，書(shū)寫(xiě)內(nèi)容如下：第二節(jié)：CSS 語(yǔ)法快速入門(mén)。38 / 120*選擇器*第一節(jié)就介紹了CSS 的基礎(chǔ)語(yǔ)法了，其中就說(shuō)到了選擇器，在CSS 中有兩類(lèi)稍微特殊點(diǎn)的選擇器， 稱(chēng)之為id 選擇器和class 選擇器。先說(shuō)id

35、選擇器， 在HTML 的元素中，每一個(gè)元素都可以設(shè)置一個(gè)屬性，該屬性就是id，然后 在CSS 中使用#號(hào)外加這個(gè)id 的數(shù)值型來(lái)作為選擇器，后面的 就和普通的寫(xiě)法一樣。光說(shuō)是有點(diǎn)抽象的， 下面給個(gè)例子： 首先新建一個(gè)my.html 文件，書(shū)寫(xiě)內(nèi)容如下：pcolor: green;/*在這里書(shū)寫(xiě)注釋*CSS，與博客園共同成長(zhǎng)*/font-size: 14px; text-align: center;第一節(jié)簡(jiǎn)介了一下CSS 的工作流程，我相信讀者會(huì)有一個(gè)大體的認(rèn)識(shí)，那么接下來(lái)會(huì)深入的一下CSS的細(xì)節(jié)問(wèn)題，這些問(wèn)題的涉及將會(huì)使的工作更加完善*注釋*CSS 也是需要注釋的，注釋中的內(nèi)容不會(huì)被解釋執(zhí)行，

36、它也和C 語(yǔ)言一樣，用/*開(kāi)頭，用*/結(jié)尾，其中的內(nèi)容會(huì)被當(dāng)做注釋?zhuān)朐趺磳?xiě)就怎么寫(xiě)。下面給個(gè)例子：2014 年CSS 教學(xué)夏季版 CSS，知識(shí)，傳遞然后在my.css 中這么寫(xiě)就可以了：39 / 120上面就通過(guò)在HTML 文件中指定了p的id，然后在 css 文件中根據(jù)id 來(lái)設(shè)置了它的屬性。它的效果圖如下：所謂id，那就是唯一的，在同一個(gè)HTML 文件中，不能有兩個(gè)id 都是para，這樣會(huì)導(dǎo)致，可以用下面的 class 來(lái)解決。如果說(shuō)id 是單個(gè)的樣式，那么，class 則用于描述一組的樣式，class 可以用在多個(gè)元素中使用。#paracolor: green; font-size:

37、 14px; text-align: center;selector:pseudo-class property:value;40 / 120a:linkcolor:red; a:visitedcolor: green;什么意思呢，就是selector 就是選擇器嘛，而pseudo- class 就是相應(yīng)的偽類(lèi)了，后面跟的就是它的屬性和值。其實(shí)偽類(lèi)的最經(jīng)典的例子之一就是超，比如可以書(shū)寫(xiě)如下代碼：首先是創(chuàng)建一個(gè)my.html 文件，代碼如下：2014 年CSS 教學(xué)夏季版博客園然后就是my.css 文件，代碼如下：7.id 使用#號(hào)來(lái)加上屬性值，而class 則使用.號(hào)加上屬性值，由于兩者的使用

38、及其的類(lèi)似，我就不贅述了，想必聰明的讀者已經(jīng)可以仿造出來(lái)了。*偽類(lèi)*1.CSS 中的選擇器是比較靈活的，比較常用的還有偽類(lèi)的說(shuō)法，下面我來(lái)解釋一下，偽類(lèi)的使用給出的語(yǔ)法格式是這樣的：41 / 120上面的css 文件中就設(shè)置了當(dāng)沒(méi)有點(diǎn)擊超的時(shí)候是紅色的，當(dāng)?shù)氖髽?biāo)經(jīng)過(guò)的時(shí)候是藍(lán)色的，當(dāng)?shù)氖髽?biāo)點(diǎn)擊它而又沒(méi)有松開(kāi)的時(shí)候，它是黑色的，當(dāng)過(guò)的連接，它會(huì)呈現(xiàn)綠色。下面實(shí)例演示一下吧：a:hovercolor:blue; a:activecolor:black;42 / 120*進(jìn)一步說(shuō)明*而且 a：hover 必須被放到 a：link 和 a：visited 之后，才會(huì)有效。而a：active 必須被當(dāng)?shù)?/p>

39、a：hover 之后，才有效。還可以讓偽類(lèi)與上面提到的class 選擇器一起用，我感覺(jué)不是很常用，就不介紹了。還有一個(gè)child 偽類(lèi)，但是對(duì)瀏覽器的兼容性上不好，因此也不介紹了。p,td,licolor: red;p*color: red;43 / 120會(huì)把所有的段落的顏色都設(shè)置為紅色。6.還有通用選擇器的說(shuō)法，就是用一個(gè)*表示，如下代碼：5.此外還有偽元素的說(shuō)法，如果大家做的事英文 ，還是比較重要的，但是對(duì)于漢語(yǔ) 來(lái)說(shuō)，意義不大，因此也就不說(shuō)了。*其他選擇器*CSS 還支持幾種其他的選擇器類(lèi)型，第一種就是后代選擇器，比如 把a(bǔ) 到一個(gè)div 里面去，那么可以用div a 這樣的選擇器來(lái)表

40、示a 的樣式。第二種就是子元素選擇器，它會(huì)選擇父元素中的所有子元素，比如diva，即它和第一個(gè)的區(qū)別就是把空格換成了大于號(hào)。另外的相鄰兄弟選擇器和普通相鄰兄弟選擇器，總體感覺(jué)意義不大，只會(huì)增加 量和學(xué)習(xí)的難度，實(shí)用性并不高。CSS 還支持屬性選擇器，但是由于也是對(duì)瀏覽器的兼容性上不好，也就不介紹了。還有所謂的群組選擇器的說(shuō)法，是指幾個(gè)選擇器使用同一個(gè)樣式，它用逗號(hào)把各個(gè)選擇器進(jìn)行區(qū)分，并且連接起來(lái)，就像C 語(yǔ)言中函數(shù)的參數(shù)列表中的多個(gè)參數(shù)一樣，示例：*說(shuō)明*1.后面的實(shí)例中也會(huì)大量的使用選擇器，沒(méi)辦法，要HTML 元素，必須得借助于選擇器。2.而且大家在學(xué)習(xí)jQuery 的時(shí)候，也必然會(huì)接觸選

41、擇器，因?yàn)檫x擇器的使用太廣泛了。44 / 120*小結(jié)*本小節(jié)講述了CSS 選擇器和注釋。CSS 常用的選擇器就是選擇器、id 選擇器、class 選擇器和偽類(lèi)選擇器，其他選擇器的方式都可以用上面這幾種方式來(lái)搞定。第三節(jié)：CSS 中的顏色與文字45 / 120第二節(jié) 講述的幾乎全是CSS 的選擇器，那么下面這一節(jié) 來(lái)講一下CSS 的顏色和文本的一些東西，雖然我對(duì)調(diào)色不大敏感，但是對(duì)于顏色還是比較感 的。*CSS 中的顏色*說(shuō)到顏色，不得不一下 ，簡(jiǎn)直是偉大，光的色散，非常大的突破，可以說(shuō)它一個(gè)人完成了幾代人沒(méi)有完成的工作。下面說(shuō)一下三原色:即紅綠藍(lán)，即RGB， 在CSS 中定義一個(gè)顏色可以用這

42、種三原色的方式來(lái)自己配色，還可以用一些比如red，green 等這種比較經(jīng)典的顏色。要配色的話(huà)，首先需要以#開(kāi)頭，然后跟上三個(gè)雙位數(shù)字的 制的寫(xiě)法，所謂 進(jìn)制，即每一位從 0 到F，即包括 0、1、2、3、4、5、6、7、8、9、A、B、C、D、E、 F。4.其中#000000 是黑色，#是白色，#F00 是黃色， #CCCCCC 是一款比較經(jīng)典的灰色，關(guān)于如何配色，我還沒(méi)有 很好的經(jīng)驗(yàn)可以和大家，總之?dāng)?shù)值越大，顏色越淡，數(shù)值越小，顏色越深。5.CSS 這種顏色組合可以產(chǎn)生出大約萬(wàn)種顏色，而且這些大多數(shù)還是可以被瀏覽器正確的解釋的。*幾種常見(jiàn)顏色*在說(shuō)這個(gè)之前，其實(shí)顏色是支持簡(jiǎn)寫(xiě)方式的，即 在

43、#號(hào)后面不寫(xiě)六個(gè)字符，而是寫(xiě)三個(gè)，比如寫(xiě) ，它就自動(dòng)當(dāng)成 ，即六個(gè)里面每?jī)蓚€(gè)都是一樣的。下面 通過(guò)CSS 文本的方式介紹幾種我喜歡的顏色：a text-decoration:none;5.上面就是刪除了超的下劃線(xiàn)，比如還可以設(shè)置如下：46 / 120p text-decoration:overline;p text-decoration:line-through;p text-decoration:underline;*文本的樣式*雖然的布局追求多樣化，但是，文字信息仍然是不可少的，下面就文字說(shuō)一下CSS 中的使用。關(guān)于顏色，用color 屬性，可以指定文字的顏色，這一點(diǎn)大家應(yīng)該知道怎么用了吧

44、。text-align 屬性是指文本的對(duì)其方式，可以設(shè)置為left（居左）、right（居右）、center（居中）、justfy（每一行被展開(kāi)且寬度相等，左右外邊距對(duì)齊）。text-decoration 是指用來(lái)設(shè)置或者刪除文本的裝飾，它的最經(jīng)典的應(yīng)用就是刪除超的下劃線(xiàn)，如下代碼：p font-style:italic;47 / 1205.下面就來(lái)一個(gè)大雜燴把：首先創(chuàng)建一個(gè)my.html，內(nèi)容如下：2014 年CSS 教學(xué)夏季版第一個(gè)是添加了上劃線(xiàn)，第二個(gè)是中劃線(xiàn)，第三個(gè)是添加了下劃線(xiàn)，不過(guò)下劃線(xiàn)用的比較廣泛，大家比較好接受，上劃線(xiàn)和中劃線(xiàn)有點(diǎn)怪怪的感覺(jué)。6. 還可以設(shè)置大小寫(xiě)字母、縮進(jìn)之類(lèi)

45、的，我感覺(jué)這些對(duì)漢語(yǔ)意義不大，倒是英文 蠻適合的，就不講了。*字體*CSS 中 可以相對(duì) 的設(shè)置字體， 可以用font- family 來(lái)指定字體名稱(chēng)，我對(duì)字體的 不多，也就知道那么幾個(gè)?？梢杂胒ont-size 來(lái)指定字體大小， 可以用px表示的方式，即像素的格式。瀏覽器時(shí)有默認(rèn)的大小的，普通文本的大小是 16px， 可以以用font-size 來(lái)指定該字體的大小。除了用px 來(lái)指定字體的大小，還可以用em 來(lái)指定大小，em 的尺寸 由W3C 建議，1em 相當(dāng)于 16px，即我們想用 40px 的時(shí)候，就是使用 2.5em。可以通過(guò)font-style 來(lái)設(shè)置字體的風(fēng)格，它的兩個(gè)經(jīng)典樣式就

46、是italic，即傾斜，如下代碼：48 / 1206.下面是效果圖：*小結(jié)*本節(jié)主要涉及的就是顏色和字體的排版以及字體的樣式。這里需明的是一個(gè)是text 類(lèi)的，它用于排版，是一群文字的排布方式。而font 則是每個(gè)字的格式，比如字體，字號(hào)，字體是否傾斜等等。pcolor: red;text-align: center;font-size: 13px;font-style: italic;博客園，傳遞然后創(chuàng)建一個(gè)my.css，內(nèi)容如下：第四節(jié)：超與列表以及簡(jiǎn)易導(dǎo)航欄49 / 120接下來(lái)的這一節(jié)我計(jì)劃講解的是超 和列表的樣式，然后 做出一個(gè)導(dǎo)航欄出來(lái)，其實(shí)導(dǎo)航欄是非常常見(jiàn)的，但是 這里做得這個(gè)有

47、點(diǎn)并不那么完善，等 學(xué)完了 css 之后再完善它。*超 *講偽類(lèi)的時(shí)候已經(jīng)講到了，一個(gè)超 可以有l(wèi)ink（正常狀態(tài)）、visited（已經(jīng) 過(guò)）、hover（獲得鼠標(biāo)焦點(diǎn)）active（被鼠標(biāo)點(diǎn) ）這樣四個(gè)狀態(tài)， 前面也分別設(shè)置過(guò)不同的顏色了，使用選擇器:偽類(lèi)的形式。還可以使用background-color 來(lái)設(shè)置其背景顏色，可以用text-decoration：none 來(lái)去掉超的下劃線(xiàn)。*列表*前面講HTML 的時(shí)候講過(guò)，列表分為有序列表和無(wú)序列表，這里講解它的一個(gè)屬性：list-style-type。list-style-type 屬性是什么意思呢，就是列表的風(fēng)格類(lèi)型，對(duì)于無(wú)序列表，可

48、以用circle 和square，即分別用圓形和方形來(lái)作為無(wú)序列表的開(kāi)頭。list-style-type 屬性還可以取值為upper-roman 來(lái)設(shè)置為大寫(xiě)羅馬數(shù)字，還可以用lower-alpha 來(lái)設(shè)置為小寫(xiě)的英文字母。它還有一個(gè)屬性是list-style-image：用 來(lái)作為列表項(xiàng)的開(kāi)頭，它需要用url 導(dǎo)入一個(gè) ，這個(gè) 后面再說(shuō)。*實(shí)現(xiàn)一個(gè)導(dǎo)航欄*1.第一步，先來(lái)一個(gè)無(wú)序列表，然后給他們加上超鏈接，由于這里我不知道連接到哪里，用#表示一個(gè)空連接，下面新建一個(gè)my.html 代碼如下：2014 年CSS 教學(xué)夏季版type=text/cssaaaaahref=#href=# href=

49、# href=#href=#2.然后新建一個(gè)my.css 文件如下：3.它的效果如下：50 / 120ullist-style-type: none; atext-decoration: none; lidisplay: inline;51 / 120的這個(gè)橫向的導(dǎo)航條就算完成了，但是它還是太簡(jiǎn)單了，它只是單純的列出了五個(gè)連接，并且水平排列，我們到后面再去完善。這里說(shuō)明一下，這個(gè)li 屬性的display：inline 表示設(shè) 置格式為內(nèi)聯(lián)，即它不是以塊級(jí)元素出現(xiàn)的，是內(nèi)聯(lián)元素，即向右排列而不是向下排列。*小結(jié)*本小節(jié)認(rèn)識(shí)了超和列表的常見(jiàn)樣式。然后做出來(lái)了一個(gè)簡(jiǎn)易的導(dǎo)航條，讀者可以先去完善它，

50、如果讀者不去做，我后面再做。第五節(jié)：盒模型52 / 120本小節(jié)講解css 中的“盒模型”，即“boxm”，它通常用于在布局的時(shí)候使用，這個(gè)“盒模型”也有人成為“框模型”，其實(shí)原理都一樣。它的大致原理是這樣的，它把一個(gè)HTML 元素分為了這么幾個(gè)部分：邊距、邊框、填充和實(shí)際內(nèi)容，通過(guò)設(shè)置這幾個(gè)內(nèi)容可以設(shè)置它的一些現(xiàn)實(shí)形式。*盒模型*盒模型從內(nèi)向外依次是實(shí)際內(nèi)容（Content）、內(nèi)邊距（Padding）、邊框（Border）、外邊距（Margin），其中通常也說(shuō)內(nèi)邊距為邊距，外邊距為填充。下面是我找的一個(gè)來(lái)解釋這個(gè)盒模型：.這里還是用文字來(lái)描述一下把，Content 是盒子的內(nèi)容，比如需要顯示

51、的文本信息，Padding 是它守衛(wèi)的區(qū)域，但是它的大小會(huì)受到border 的約束，而border 則是這個(gè)邊框，而margin 則是邊框的周?chē)鷧^(qū)域，即該盒子與外界的元素的距離。，53 / 1204.其實(shí)很好理解的，它的盒模型只是說(shuō)法稍顯專(zhuān)業(yè)化，其理解很簡(jiǎn)單。*邊框*上面只是簡(jiǎn)單的講解了一下border，其實(shí)border 有幾個(gè)屬性可以分開(kāi)設(shè)置的，首先是border-style，它指的是邊框的線(xiàn)的繪制方式，可以用none 來(lái)表示無(wú)邊框，可以用dashed 來(lái)定義一個(gè)虛線(xiàn)框，可以用solid 來(lái)定義一個(gè)實(shí)線(xiàn)框，可以用double 來(lái)定義一個(gè)雙線(xiàn)框，還可以定義帶有 3D 樣式的邊框，比如用groo

52、ve 來(lái)定義一個(gè) 3D 溝槽邊界。可以用 border-width 來(lái)定義邊框的大小，可以用 px也可以用em，這些前面都講過(guò)了，還有三個(gè)選項(xiàng)，個(gè)人不建議用。#parwidth:220px; padding:10px; border:5px solid gray; margin:0px;*進(jìn)一步說(shuō)明*因此在計(jì)算一個(gè)元素的寬度和高度的時(shí)候，這里我們以寬度為例，其實(shí)是content 的寬度加上padding 的寬度乘以 2，再加上border 的寬度乘以二，在加上margin 的寬度乘以 2.這些寬度和高度直接用px 來(lái)表示就可以了，唯一比較特殊的就是這個(gè)border，還需要指定它的一些樣式和顏色

53、，它的第一個(gè)參數(shù)是大小，第二個(gè)參數(shù)是風(fēng)格（實(shí)現(xiàn)還是虛線(xiàn)等），第三個(gè)參數(shù)是顏色。代碼演示：54 / 120其實(shí)不光是bordadding 和margin 也是接受一個(gè)到四個(gè)值，用法一樣。下面是它的效果圖：pborder-size:9px ; border-style: solid;border-color: red green blue black;還可以用border-color 來(lái)設(shè)置邊框的顏色 ，單獨(dú)的設(shè)置border-color 是無(wú)意義的，必須在設(shè)置了border-style之后再設(shè)置border-color 才有意義。這些邊界屬性可以接受 1 個(gè)或者四個(gè)值，如果是接受四個(gè)值，則是按照

54、上右下左的順序去實(shí)現(xiàn)，如果是三個(gè)值，則設(shè)置上右下，如果是兩個(gè)值，則上下采用第一個(gè)值，左右采用第二個(gè)值，如果是一個(gè)值，則所有的邊界都采用同一個(gè)值。示例代碼，首先是my.html 代碼：2014 年CSS 教學(xué)夏季版博客園，無(wú)限然后是css 代碼：55 / 120*小結(jié)*本小節(jié)主要講解的是布局這部分，也就是盒模型。希望我能夠表達(dá)的足夠清楚。第六節(jié)：定位，56 / 120這一節(jié)就要講到布局了，其實(shí)布局本身特別簡(jiǎn)單，但是要合理的布好局就不那么簡(jiǎn)單了，就像寫(xiě)文章一樣寫(xiě)一篇文章非常簡(jiǎn)單，但是要寫(xiě)一篇名著就很難了，這需要扎實(shí)的功底和對(duì)文學(xué)的理解，但是，千里之行，始于足下，開(kāi)始吧。*顯示方式*有時(shí)候 會(huì)設(shè)置一

55、個(gè)元素的顯示方式，比如 在做導(dǎo)航條的時(shí)候，就會(huì)使用display：inline 來(lái)使它們成為內(nèi)聯(lián)的樣式。下面先不說(shuō)這個(gè) display，先說(shuō)一下 visibility 屬性把，它可以設(shè)置為hidden，即不顯示，那么該塊區(qū)域就顯示一片空白。有一個(gè)類(lèi)似的方法就是使用display：none，它也是設(shè)置不顯示，但是它的作用卻是讓該元素，后面的元素會(huì)自動(dòng)占據(jù)它的空間。可以使用display：block 使得它的顯示成為一個(gè)塊級(jí)元素，可以理解為強(qiáng)制性的換行，而display：inline則是強(qiáng)制性的使其不換行，向右排列。變更元素的顯示類(lèi)型看該元素如何顯示，看它是什么樣的元素，比如一個(gè)內(nèi)聯(lián)元素設(shè)置為di

56、splay：block 是不允許有它的內(nèi)部嵌套塊元素的。*大小*對(duì)于一個(gè)HTML 元素，可以通過(guò)設(shè)置它的width 屬性和height 屬性來(lái)設(shè)置其大小，也就是其寬度和高度。還有一些其他設(shè)置大小的屬覺(jué)不是很常用，即沒(méi)列舉。*定位*第一種定位方式就是默認(rèn)的方式，它是自上而下，從左到右的一個(gè)模式，也是最簡(jiǎn)單的一種模式。第二種就是固定定位，它的位置相對(duì)于瀏覽器的窗口位置是固定的，即使窗口滾動(dòng)，它也不會(huì)動(dòng)，這種可以用來(lái)做那種條之類(lèi)的，下面做一個(gè)示例，首先是HTML文件中書(shū)寫(xiě)代碼如下：2014 年CSS 教學(xué)夏季版type=text/css博客園，無(wú)限這些意義可以是政治方面的，也可以表達(dá)某種哲理，或某種

57、;寫(xiě)景，要通過(guò)景物描寫(xiě)表現(xiàn)出個(gè)人某種感情或深刻的感悟;詠物，或透露出世間人生的某種樂(lè)趣，或托物言志，表現(xiàn)對(duì)社會(huì)上某種人某種現(xiàn)象的情感。因此，寫(xiě)記敘文總會(huì)有一定的目的，總要表達(dá)一定的和感情，實(shí)際上就是平常所講的“文章的”，是文章的，它像一根紅線(xiàn)貫串章的始終。這些意義可以是政治方面的，也可以表達(dá)某種哲理，或某種;寫(xiě)景，要通過(guò)景物描寫(xiě)表現(xiàn)出個(gè)人某種感情或深刻的感悟;詠物，或透露出世間人生的某種樂(lè)趣，或托物言志，表現(xiàn)對(duì)社會(huì)上某種人某種現(xiàn)象的情感。因此，表達(dá)一定的寫(xiě)記敘文總會(huì)有一定的目的，總要和感情，實(shí)際上就是平常所講的“文章的”，是文章的，它像一根紅線(xiàn)貫串章的始終。57 / 12058 / 1203.

58、下面是它的效果圖：bodywidth:400px; height: 900px;pition: fixed; top:30px;left: 50px;然后就書(shū)寫(xiě)my.css 文件，這里為了看出隨著滾動(dòng)條的滾動(dòng)，該段文字的位置不變的特性，需要給瀏覽器窗口一定的大?。?9 / 1204.上面這種方式對(duì)瀏覽器的兼容不好，在IE8 以下需要描 述!DOCTYPE 才可以，這里的top 指的是它的上面到瀏覽器 的頂部的距離，left 是指它的右端到瀏覽器的右端的距離。*絕對(duì)定位和相對(duì)定位*相對(duì)定位：這里需要清楚相對(duì)“誰(shuí)”的定位，這里的相對(duì)定位是相對(duì)于第式的定位，即默認(rèn)方式的定位，它會(huì)在默認(rèn)方式的基礎(chǔ)上進(jìn)

59、行一些修改，可以設(shè)置left 等屬性，如果設(shè)置left 為-20px，則表示它相對(duì)于原始位置向左移動(dòng)二十個(gè)像素，它也需要在tion 屬性中賦值為 relative。絕對(duì)定位：它需要指定 ition 為absolute，也可以設(shè)置left 和top 或right 等屬性，如果該元素沒(méi)有父元素，則它的位置是相對(duì)整個(gè)瀏覽器窗口來(lái)說(shuō)的。它會(huì)出現(xiàn)在相對(duì)原來(lái)的地方向右 50px 的地方，而它原來(lái)所在的地方為空。下面說(shuō)一下絕對(duì)定位，所謂絕對(duì)定位，即不占用空間，如果原來(lái)這個(gè)地方有HTML 元素，那么就會(huì)，這里需要特別之處的，也是我發(fā)這篇博文的目的，就是想告訴大家，絕對(duì)定位如果被父元素包含，如果父元素沒(méi)有定位屬

60、性，它會(huì)根據(jù)body 進(jìn)行定位，因此，如果它有父元素，必須在父元素中指定定位屬性，如下代碼：60 / 120解讀絕對(duì)定位和相對(duì)定位.fatherition: relative;width:300px;height: 300px;1.demoition: relative;width:50px;height: 50px;left:50px; 6.*進(jìn)一步解釋*我發(fā)現(xiàn)有些童鞋對(duì)此很迷茫，因此我進(jìn)一步解釋一下吧所謂相對(duì)定位，就是設(shè)置為相對(duì)定位的元素會(huì)偏移某個(gè)距離，元素仍然保持原來(lái)的樣式，它會(huì)保留該HTML 元素的空間，比如 看如下代碼：5.效果圖：61 / 120margin: 0 auto;bor