html的布局demo

最新推荐文章于 2023-01-14 08:37:49 发布

weixin_30446197

最新推荐文章于 2023-01-14 08:37:49 发布

阅读量69

点赞数

原文链接：http://www.cnblogs.com/adouwt/p/6971941.html

版权

header section footer 都是水平，垂直居中，文本内容居中

section的高度是根据文本内容自适应的，footer会一直在最下面

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        body,p{
            margin: 0;
        }
        p {
            width: 1000px;
            margin: 0 auto;/**容器水平居中**/
            text-align: center;/**容器里面文本居中**/
            background-color: red;
        }
        header, footer{
            min-height: 60px;
            line-height: 60px;
            background-color: #ddd;
        }
        section {
            position: relative;
            height: calc(100vh - 120px);/**100vh 视口的高度- 头的高度和尾的高度*/
            background-color: #005aa0;    
            display:flex; 
            align-items:center;
        }
        
    </style>
</head>
<body>
    <header>
        <p>文字介绍2</p>
    </header>
    <section>
        <p>主题内容的文字介绍</p>
    </section>
    <footer>
        <p>底部文字介绍</p>
    </footer>
</body>
</html>

转载于:https://www.cnblogs.com/adouwt/p/6971941.html

weixin_30446197

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html的布局demo

header section footer 都是水平，垂直居中，文本内容居中section的高度是根据文本内容自适应的，footer会一直在最下面<!DOCTYPE html><html><head> <title></title> <style type="text/css">...
复制链接

扫一扫