頁面佈局一

先分析作題思路

1、佈局

1.由於剛剛學到表格佈局，因此首先把頁面劃分爲幾個部分

2.通過觀察，發現這個表格能夠分爲6行，先把table和tr弄好

三、把每一行的元素寫上

（1）第一行 能夠分爲兩列

第一列：一張圖片

第二列：一行超連接（我用p包含），自動換行後，一個輸入框，一個普通按鈕

（2）第二行 是一個單元格

先是一個<hr/>標籤

下面一行裏面6個超連接，在一行，我本身的思路總習慣用p標籤包着

（3）第三行  是一張圖片

（4）第四行  在td裏面再加一個table 他分爲3列（不直接設爲3列的緣由，是由於合併單元格有難度，第一行我已經設置成2列，能夠本身腦補一下合併時候的怪異）

4.1 第一個單元格：有一個標題和圖片

4.2 第二個單元格：明顯看出標題和文字（文字每一個我都用p的話，間距太大，因此就用了換行，由於還沒學到ul li列表）

下面的文字都是超連接，由於要設置超連接中漢字和時間的距離，因此加了span

4.3 第三個單元格：明顯 標題下面是一個table 4行2列  而後寫上對應的內容

（5）第5行

在標題以後，有一個table,5個單元格內容基本類似  都是一個圖片  換行，一個標題，一段文字。

（6）第6行

一個單元格，裏面兩段文字

二 樣式

（1）  合併單元格  只有第一行是兩列，其他的都是一列，須要在第2,3,4,5,6列寫上

（2）  設置第一行第二個td的內容右排列

（3）  設置hr的顏色和寬度

（4）設置第二行p標籤寬度，高度，背景顏色 （記得給p標籤加上class）

（5）p標籤裏面 超連接的大小，顏色，下劃線 設置超連接之間的間距

（6）設置超連接字體加粗

（7）設置第一個超連接左邊的距離 ，用到結構僞類選擇器

（8）第四行中，設置標題中文字和圖片之間的距離（PS測量獲得的）

（9）我發現全部內容擠在一塊兒，是由於沒給table加寬度，默認內容撐開寬度，另外默認表格爲垂直居中對齊，因爲這3列高度不一樣，因此居中後也是對不齊的，因此讓他們向上對齊

在讓全部列垂直居上對齊時，我選擇的子類選擇器，只選擇子輩的td讓他們垂直居上對齊

（10） 設置超連接中新聞和時間之間的距離，我給時間用span包起來用了margin-left。

（11）設置第三列，文字大小 顏色 給表格加了 class  tab2

(12)設置第三列表格之間的距離

（13）修飾完以後，發現和原圖有出入標題和圖片應該再向右邊一點點，我採用的辦法是，給每一個td加寬，而後水平居中對齊

（14）這時候標題也居中了，把他拉回來

（15） 圖片和超連接之間的距離

（16）  設置項目設置的大小

 

（17）  設置h4的字體大小

 

（18）  設置p的文字顏色和大小

（19）爲了設置單元格之間的空白，給單元格設置寬度

（20）設置項目設置和表格距離左邊的margin

(21)設置最後一單元格，高度，背景顏色，內容居中，字體大小

而後就完成了