節課將網頁的排版框架大致寫好。

這節課就來進行更具體的修改和增加所有元素的細節，完成整個網頁的編寫。

下載所有必須的圖片文件

按照上節課的方法，用調試工具分析代碼之后，可以下載好必須的圖片文件。

關于當中專題的圖片，這里只下載了3個，更多的圖和文字留給大家自己去完成。

主體排版調整

給table加上邊框線的目的是為了方便在開發編寫完成之前能夠隨時觀察排版的情況，方便進行調整。

在排版樣式基本調整到位之后，就可以刪除table的邊框了。

來給下面2行的左右分別增加內邊距為140px和120px。

修改css代碼如下：

刷新頁面：

可以看到，下面2行的左右留白出現了，同時第2行和第3行之間有間距，第3行的左右2個td之間也有間距。

雖然第3行的2個td的寬度比例不對，但是先不著急，下面按照次序一個一個元素來調整。

實現最上面一排按鈕和鏈接

最上面一排左邊4個元素，右邊4個元素，當中留白，因此一共9個td。

將左邊4個td和右邊4個td的寬度固定，剩余當中的一個td不設置，那么瀏覽器窗口變化的時候，就不影響到左右的8個td的寬度。

僅僅影響到當中留白的那個td。這是經常使用的一種適應不同瀏覽器在不同屏幕上不同寬度的一種方法。

修改css代碼，增加tda1到tda9的樣式。

刷新頁面：

可以看到，基本的按鈕位置已經到位，可以不需要table的邊框了。

刪除掉table的邊框樣式，同時針對最上面一排的整個table的樣式table2增加一個下邊框的樣式，做出一條灰色的分割線出來。

修改css代碼如下：

刷新頁面：

接下來，逐步添加圖片或者按鈕。

第一步，添加第一個圖片，logo圖片。然后增加后面的2個icon圖標，這里icon圖標要用到一個新的技術，就是css3的content屬性。

并且通過自定義字體文件，來顯示圖標類型的文字。具體內容這里不深入講解，大家只要了解，通過引入自定義字體文件的方式就可以將字體文件里面的特殊符號圖標形狀的文字顯示在網頁上。它看起來是一個圖標，但其本質是一個文字。這是這個文字做成圖標樣子了。比如很多網頁中出現的各種箭頭圖標，很多都是文字。

修改css代碼如下：

修改html代碼如下：

刷新頁面：

可以看到，前面3個圖標都模仿編寫完成了。

接下來模仿搜索框部分。

搜索框可以用外面套一個div，div的背景色是灰色，然后邊角做成圓角的。

當中放一個input標簽可以用于輸入,input標簽是一個新的標簽，具體的作用就是讓用戶可以輸入文本的。

后面的課程中會詳細講解的，這里不深入講解。

然后右邊放一個類似前面的圖標用i標簽并設置content自定義文字編碼來實現。

修改css代碼如下：

修改html代碼如下：

刷新頁面：

接下來，修改右側的4個圖標和按鈕。

第1個很簡單，也是一個文字圖標，和前面的下載圖標一樣。

第2個是一個文字a鏈接，樣式為灰色文字。

第3個也是一個文字a鏈接，注意邊框為圓角邊框，顏色為紅色。

第4個也是一個文字a鏈接，底色為紅色，邊框為圓角，里面包含一個i標簽和文字，其中i標簽也是一個羽毛筆的圖標文字。

修改css代碼如下：

修改html代碼如下：

刷新頁面：

可以看到，通過分析原始網頁的相關CSS樣式的值，然后模仿寫到自己的css文件里面，就能很方便的將網頁元素模仿編寫出同樣類似的效果。當然，模仿后和原來的不是百分之百一樣的，這很難做到，因為畢竟每個網頁的排版布局是不一樣的實現方式。只要掌握了這個方法，通過學習不同的網頁的實現方式，很快就能掌握如何編寫出自己的網站效果了。

接下來的實現過程，學哥就不再逐個元素的講解了，直接將修改好的代碼呈現給大家。

大家也可以先不要往下看學哥的實現結果，可以自己先嘗試將網頁剩余的元素全部編寫出來。

實現下面左邊的專題按鈕

修改css代碼如下：

修改html代碼如下：

刷新頁面：

可以看到關于專題這部分已經都做好了。由于專題太多了，而且都是重復的樣式，這里就不做出所有的專題了，做出3個作為代表性的例子就足夠了。

設置下面右邊的td的寬度

現在可以調整下面一行的左右td的寬度了，將右側的td的寬度固定為218px，左側的td不固定寬度。

修改css代碼如下：

刷新頁面：

可以看到右側td的寬度變大了，左側的td的寬度變小了。

如果瀏覽器窗口拉大或者縮小會發生什么情況呢？

如果瀏覽器窗口放大的話，左側td的寬度也會自動變大，是由于將table的寬度設置為100%了。

一個table設置為100%，也就是根據瀏覽器寬度變化而變化，同時一個tr里面的td如果設置了絕對寬度則寬度就不跟隨瀏覽器變化而變化，如果td沒有設置寬度，則這些td會根據內容的比例進行分配寬度。

假如一行里面只有一個td沒有設置寬度，則剩余的寬度都會分配給這個td，那么瀏覽器寬度變化的話就只有這個td會改變寬度。

將瀏覽器窗口拉大一些，效果如下：

可以看到，右側的td的寬度不變，而左側的td的寬度變大了。

同時可以看到最上面一排按鈕，只有當中留白的那個td也變大了。其它按鈕的td并沒有變化。

這個設置table寬度自適應瀏覽器寬度的方法，是一個比較好的控制瀏覽器寬度變化的方法。大家在編寫網頁時候要考慮到瀏覽器寬度的因素。

實現下面左邊的文章標題鏈接

修改css代碼如下：

修改html代碼如下：

刷新頁面：

可以看見第3行的左邊部分，關于文章的內容全部做好了。

主要是css代碼部分增加比較多。

實現下面右邊的大圖標按鈕和作者排行內容

首先將第3行的左右2個td的垂直方向都靠上對齊：

修改css代碼如下：

然后，修改右側的大圖標和作者排行內容。

修改css代碼如下：

修改html代碼如下：

刷新頁面：

可以看到，所有的頁面代表性元素全部樣式都做成了。

多瀏覽器測試和多設備測試

到這里，完成了模仿一個真實的網頁的全部工作，按照這種模式，可以模仿出各種各樣的網頁編碼。

接下來，要將代碼部署到本地服務器上。

然后通過安裝不同的瀏覽器軟件，例如IE瀏覽器，Chrome瀏覽器，Safari瀏覽器，Firefox瀏覽器進行不同瀏覽器的兼容性測試。

保證在不同的瀏覽器上看到的網頁效果大致都一樣，不要出現明顯的不協調或不美觀之處。

然后還要在不同的設備和操作系統上針對不同的瀏覽器做更大范圍的兼容性測試，這樣才能盡最大可能讓我們編寫的網頁程序能夠適應更多的計算機環境，呈現最好的效果。

第2章總結

前面通過15小節的內容，講解了如何編寫靜態內容網站，如何部署到本地服務器，如何運用瀏覽器調試工具來學習和模仿編寫網站，如何將網站程序部署到云服務器，如何購買一個域名并解析到云服務器，完整的通過2個實例演示了整個網站實現的過程。

下面來回顧一下每節課的內容，并說明重點以及自學是需要注意的地方。

第2.1節，主要是講解關于網站的技術原理和要做的大概內容。

第2.2節，主要講一個最最簡單的網頁代碼是什么樣子的，讓大家有一個最直觀的感受，從最簡單的開始，html標簽，head標簽，title標簽，body標簽，和使用文本編輯器。

第2.3節，從一個網站的設計開始，然后講解了br標簽，b標簽，設置網頁網頁的背景色，關于CSS樣式定義以及顏色定義。

第2.4節，開始學習最重要的一個div標簽，包括設置背景色，文字顏色，文字大小，尺寸單位，文字字體，文字斜體和加粗。

第2.5節，學習基本的CSS樣式之后，學習將CSS樣式和網頁內容進行分離，更方便開發。

第2.6節，網頁顯示中很重要的寬度，高度，內邊距，外邊距，邊框，可以將網頁元素修飾的更美觀大氣。

第2.7節，在學會使用div進行頁面排版布局之后，再學習使用table表格來對網頁進行排版，掌握td的用法，包括設置內邊距和字體，以及邊框。

第2.8節，學習對table表格進行td合并以及設置排版樣式，說明特定元素通過id設置樣式，以及說明元素標簽嵌套關系和順序關系。

第2.9節，學習設置背景圖片，以及img標簽顯示圖片的方法，以及一些HTML和CSS代碼注釋以及縮進的格式。

第2.10節，學習如何讓網頁進行遷移，包括文字鏈接和圖片鏈接，以及類似按鈕的鏈接。

第2.11節，網頁基本編寫完成之后，將網頁部署到本地一個Web服務器，通過局域網可以訪問。

第2.12節，將網站部署到云服務器上，這樣可以通過互聯網訪問網站頁面。

第2.13節，創建好域名之后，將域名解析到云服務器，這樣通過互聯網可以訪問域名就能看到網站頁面了。

第2.14節，學習分析一個已經存在的網站，并進行設計規劃，進行模仿編寫網頁。

第2.15節，一邊分析網頁，一邊開始模仿編寫網頁，一個元素一個元素的編寫，最終完整模仿整個網頁。

通過整個15節課程，一步一步實現2個代表性網站頁面，掌握如果使用HTML加CSS代碼來編寫實現靜態內容網站。

為將來實現動態內容網站打下一個堅實的基礎。

第3章簡介

第2章的內容是很多互聯網編程技術的基礎。同樣的，第3章的內容也是互聯網編程技術的基礎。

第3章開始講解JavaScript編程技術，學習掌握如何通過代碼實現改變網頁顯示元素的技術。

第3章以實現一個連連看網頁游戲作為主線，穿插講解關于JavaScript技術的方方面面，讓大家在第3章結束之后，掌握好使用JavaScript技術進行交互式網頁開發的技能。

往期教程

由于學哥的教程是系列教程，前后關聯極強，請大家查看歷史消息。

text-decoration

text-decoration屬性指定文本將如何裝飾

常用的值有:

●none-默認值,這定義了一個正常的文本

●inherit-從其父元素繼承此屬性

●overline-在文本上方繪制水平線

●underline-在文本下方繪制水平線

●line-through-在文本中繪制水平線(替換html<s>標記)

html代碼:

<p class="none">人生只有創造才能前進,只有適應才能生存</p>

<p class="inherit">不必因昨天的眼淚,濕了今天的太陽</p>

<p class="overline">逼著你往前走的,不是前方夢想的微弱光芒,而是身后現實的萬丈深淵</p>

<p class="underline">你真誠地愛自己,才能真誠地愛別人</p>

<p class="line-through">眾人拾柴火焰高</p>

css代碼:

p.none{text-decoration:none;}

p.inherit{text-decoration:inherit;}

p.overline{text-decoration:overline;}

p.underline{text-decoration:underline; }

p.line-through{ text-decoration:line-through; }

效果如下:

你可以將underline,overline或line-through組合起來,以添加多條裝飾線.

text-decoration的另一個值是blink,這可以使文本閃爍.

text-decoration:blink;

這個值是有效的,但是被棄用,大多數瀏覽器忽略它.

二 文本縮進

text-indent屬性指定在文本的第一行開始之前應該留下多少水平空間.屬性值是長度(px,pt,cm,em等),%和inherit

html代碼:

<p class="text-indent">使用<strong>text-indent</strong>讓文本向右縮進了60px.</p>

css代碼:

p.text-indent{text-indent: 60px;}

效果如下:

負值是允許的.如果值為負值,則第一行將向左縮進.

三 text-shadow

text-shadow為文本添加陰影

它有四個值:

●第一個值:定義陰影在x(水平)方向的距離

●第二個值:定義y(垂直)方向的距離

●第三個值:定義陰影的模糊半徑

●地四個值:設置顏色

html代碼:

<p class="text-shadow">實踐是思想的真理</p>

css代碼:

p.text-shadow{color:blue;font-size:30pt;text-shadow:5px 2px 4px grey; }

效果如下:

在上面的例子中.

●5px :x坐標

●2px: y坐標

●4px: 模糊半徑

●grey: 陰影的顏色

要向文本添加多個陰影,請使用逗號來分隔陰影列表

處理陰影時,可以使用任何css支持的顏色樣式

對于x和y偏移,可以使用各種類型的單位(如px,cm,mm,in,pc,pt等)

負值也被支持

下面的一個例子創建一個藍色的陰影,比主文本向上高出2px,向左多1px,并且用0.5em模糊:

html代碼:

<p class="text-shadow1">愛情不過是一場瘋病</p>

css代碼:

p.text-shadow1{ font-size:20pt;text-shadow:rgba(0,0,255,1) -1px -2px 0.5em;}

效果如下:

Internet Explorer9和更早版本不支持text-shadow屬性.

四 text-transform

text-transform屬性可以實現文本的首字母大寫效果

html代碼:

<p class="capitalize">The value capitalize transforms the first character in each word to uppercase;

all other characters remain unaffected. </p>

css代碼:

p.capitalize{text-transform:capitalize;}

效果如下:

使用text-transform可以使文本顯示為全部大寫或全部小寫

屬性值:uppercase(全部大寫) lowercase(全部小寫) none(不會產生任何效果)

五 letter-spacing

letter-spacing屬性指定文本中字符之間的空格.

值可以設置為:

●normal定義了默認樣式,字符之間沒有額外的空間

●length用px,pt,cm,mm等測量單位定義字符之間的額外空間

●inherit繼承其父元素的屬性

html代碼:

<p class="normal">愛是一種甜蜜的痛苦</p>

<p class="positive">人世間,除了生死,哪一件事不是閑事</p>

css代碼:

p.normal{ letter-spacing:normal; }

p.positive{letter-spacing:4px; }

效果如下:

letter-spacing使用負值可以減少字符之間的間距

設置間距后請測試效果,避免影響文本的閱讀性

六 word-spacing

word-spacing屬性指定文本中單詞之間的空格.就像letter-spacing屬性一樣,可以將word-spacing的值設置為normal,length和inherit

當段落需要使用正常的單詞間距展示時,通常會使用normal

要使用word-spacing定義單詞之間的間距,可以使用像px,pt,pc,cm,mm,inches,em,ex這樣的測量值

負值也是允許的

七 white-spacing

white-spacing可以處理元素內的換行符

參數可以是normal,inherit,nowrap等

nowrap會屏蔽該元素中的所有換行符和空格,把整個文本放在一行中

html代碼:

<p class="nowrap">This paragraph has multiple spaces and

a line break,but it will be ignored,as we used the nowrap value.</p>

css代碼:

p.nowrap{ white-space:nowrap; }

效果如下:

注意:white-spacing 和white-space 大家可以測試下有何不同

文本將繼續在同一行,直到遇到一個<br/>標記

white-space也支持其他值:

●pre:文本支持所有的換行和空格

●pre-line:文本支持換行,忽略額外的空格

●pre-wrap:文本將在必要的時候或者行的結尾進行換行

pre-wrap值的行為與pre值相同,只是它增加了額外的換行符以防止文本突破元素的框.