HTML页面布局-使用div示例

发布于:2024-06-23 ⋅ 阅读:(108) ⋅ 点赞:(0)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <!--
            text-align:center  文字水平居中
            line-height:200px;  文字垂直居中,行高设置跟高度一样,文字就会在当前div中水平居中
            margin:0 auto  在页面水平居中
      -->

    <div style="width:500px; height: 200px;
                text-align: center; line-height:200px;
                background: orange; margin: 0 auto ">页面顶部</div>

    <div style="width:500px; height: 1000px;
                text-align:center;line-height:1000px;
                background:pink;margin:0 auto">页面中间</div>

    <div style="width:500px; height: 200px;
                text-align:center;line-height:200px;
                background:orange;margin:0 auto">页面底部</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <!--
            text-align:center  文字水平居中
            line-height:200px;  文字垂直居中,行高设置跟高度一样,文字就会在当前div中水平居中
            margin:0 auto  在页面水平居中
      -->

    <div style="width:500px; height: 200px;
                text-align: center; line-height:200px;
                background: orange; margin: 0 auto ">页面顶部</div>

    <div style="width:500px; height: 1000px;
                text-align:center;line-height:1000px;
                background:pink;margin:0 auto">页面中间</div>

    <div style="width:500px; height: 200px;
                text-align:center;line-height:200px;
                background:orange;margin:0 auto">页面底部</div>
</body>
</html>

 

 


网站公告

今日签到

点亮在社区的每一天
去签到