HTML頁面佈局

時間 2020-01-18

標籤 html 頁面佈局欄目 HTML 简体版

原文原文鏈接

1.table佈局：經過table元素將頁面空間劃分紅若干個單元格，將文字或圖片等元素放入單元格中，隱藏表格邊框，實現佈局。也叫傳統佈局，主要用於廣告郵件的頁面，不是主流。ide

（1）按照設計圖的尺寸設置表格的寬高以及單元格的寬高佈局

（2）將表格border，cellpadding，cellspacing全設置爲0，表格的邊框和間距就不佔頁面空間，它只起到劃分空間的做用。spa

（3）針對局部複雜的佈局，能夠在單元格里面嵌套表格，嵌套表格劃分局部的空間。設計

（4）單元格中的元素或者嵌套的表格用align和valign設置對齊方式code

（5）經過屬性或者CSS樣式設置單元格中元素的樣式blog

<body topmargin="0">圖片

<table width="800" height="800" border="1" cellpadding="0" cellspacing="0" align="center">
    <tr>
        <td width="260" valign="top" bgcolor="#F2F2F2">

            <table width="200" border="0" align="center">

                <tr><td height="100"></td></tr>
                <tr>
                    <td align="center"><img src="image/路飛1.jpg" alt="證件照"></td>
                </tr>
                <tr>
                    <td align="right">小小雄</td>
                </tr>
                <tr>
                    <td align="right">13621553248</td>
                </tr>
                <tr>
                    <td align="right">126421@qq.com</td>
                </tr>
            </table>
        </td>
        <td width="30"></td>
        <td width="480" valign="top">

            <table width="480" border="0" cellpadding="0" cellspacing="0" >
                <tr>
                    <td height="80"></td>
                </tr>
                <tr>
                    <td align="right"><img src="image/簡歷圖標.jpg" alt="標題"></td>
                </tr>

            </table >
            <br />
                <hr />
            <table width="480" height="200" border="0" cellpadding="0" cellspacing="0">
                <tr>
                    <td colspan="2"><b>我的基本狀況</b></td>

                </tr>
                <tr>
                    <td><b>姓名：</b>小熊熊</td>
                    <td><b>性別：</b>男</td>
                </tr>
                <tr>
                    <td><b>籍貫：</b>撒哈拉</td>
                    <td><b>民族：</b>亞特蘭蒂斯</td>
                </tr>
                <tr>
                    <td><b>電話：</b>13597894221</td>
                    <td><b>地址：</b>大荒漠</td>
                </tr>
                <tr>
                    <td><b>身高：</b>200cm</td>
                    <td><b>體重：</b>100kg</td>
                </tr>
                <tr>
                    <td><b>愛好：</b>打獵</td>
                    <td><b>個性：</b>調皮</td>
                </tr>
            </table>

            <br />

            <table width="480" height="100" border="0" cellpadding="0" cellspacing="0">
                <tr>
                    <td><b>教育基本狀況</b></td>
                </tr>
                <tr>
                    <td>2000-2010：騎射劍</td>
                </tr>
                <tr>
                    <td>2011-2018：琴書畫</td>
                </tr>
            </table>

            <br />

            <table width="480" height="100" border="0" cellpadding="0" cellspacing="0">
                <tr>
                    <td><b>所獲證書</b></td>
                </tr>
                <tr>
                    <td>2005年黃金騎士</td>
                </tr>
                <tr>
                    <td>2016詩仙</td>
                </tr>
            </table>
        </td>
        <td width="30"></td>
    </tr>
</table>

</body>ci