圣杯布局

最新推荐文章于 2021-10-27 21:01:21 发布

红烧牛肉面-加面

最新推荐文章于 2021-10-27 21:01:21 发布

阅读量201

点赞数

分类专栏： vue 文章标签： html

本文链接：https://blog.csdn.net/qiushirufeng/article/details/107175091

版权

vue 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

圣杯布局主要用到两个属性一个是colspan 和 rowspan 来设置跨列和跨行的设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>圣杯布局</title>
</head>
<!-- 圣杯布局主要用到 两个属性  一个是colspan 和 rowspan 来设置跨列和跨行的设置  -->
<body>
    <div>
        <table width="1000" height="800" border="1" cellspacing="0" >
            <tr>
                <td colspan="3" height="200" bgcolor="gold"> <h1>上面部分</h1></td> </tr>
            <tr> 
                <td width="150" bgcolor="pink"><h1>中左</h1></td>
                <td bgcolor="black"><h1>中中</h1></td>
                <td width="150" bgcolor="blue"><h1>中右</h1></td>
            </tr>
            <tr > 
                <td colspan="3" height="200" bgcolor="red"><h1>下</h1></td>
            </tr>
        </table>
    </div>
</body>
</html>

具体的布局如下在td 中可以用 width 和 height bgcolor直接来设置一些简单的属性