作HTML靜態頁面時遇到的問題總結

1.

若是所示，問題:「首頁」和「閒置」文字部分位於table中部

解決方法：須要取消vertical-align:middle屬性，將其設置爲vertical-align:top,並將文本的高度改成整個table的高度

改正後最終的實現效果爲：

明顯能夠看到"首頁"和"閒置"文字到了table頂部。

2.padding-left：距離左邊界

float :left向左浮動

font-size ：設置字體大小

font-weight：字體粗細設置

設置圖片爲原型代碼寫爲：<td ><img src="image/wff.jpg" style="width:60px;height:60px; margin-left:20px; border-radius:30px" /></td>

3.

實現：table中文字和圖片的對齊

如圖所示，整個圖片是用div嵌套table來完成的，table內部又包含文字和圖片兩部分，讓圖片和文字左對齊的方式是將圖片的行數設置爲兩行，文字部分則設置vertical-align:bottom便可，代碼以下所示：

4.盒子模型的各部分組成

區分padding-left和margin-left的區別簡單的說padding是內邊距，margin是外邊距

總結：第一次接觸靜態頁面，其中遇到了不少問題，還須要不斷摸索，不斷學習！