温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

HTML页面布局

发布时间:2020-07-16 01:00:51 来源:网络 阅读:181 作者:bigbeatwu 栏目:web开发

1.table布局:通过table元素将页面空间划分成若干个单元格,将文字或图片等元素放入单元格中,隐藏表格边框,实现布局。也叫传统布局,主要用于广告邮件的页面,不是主流。

(1)按照设计图的尺寸设置表格的宽高以及单元格的宽高

(2)将表格border,cellpadding,cellspacing全设置为0,表格的边框和间距就不占页面空间,它只起到划分空间的作用。

(3)针对局部复杂的布局,可以在单元格里面嵌套表格,嵌套表格划分局部的空间。

(4)单元格中的元素或者嵌套的表格用align和valign设置对齐方式

(5)通过属性或者CSS样式设置单元格中元素的样式

<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>

HTML页面布局

2.HTML+CSS布局(DIV+CSS):主要通过CSS样式设置来布局文字或图片等元素,需要用到CSS盒子模型,盒子类型,CSS浮动,CSS定位,CSS背景图定位等知识来布局,主流布局。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI