响应式web开发chapter1/三栏内容

庒

已于 2022-03-03 12:47:47 修改

阅读量563

点赞数

文章标签： html5

于 2022-02-24 16:36:56 首次发布

本文链接：https://blog.csdn.net/weixin_54042448/article/details/123115175

版权

index.html文件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>三栏布局页面</title>
        <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>
    <body>
        <!--头部区域-->
        <header>
            <h4>头部区域</h4>
        </header>
        <!--主体区域-->
        <div class="main"></div>
            <aside class="left">
                <p>左侧边栏</p>
            </aside>
            <aside class="right">
                <p>右侧边栏</p>
            </aside>
            <section class="middle">
                <p>内容区域</p>
            </section>
    </div>
        <!--底部区域-->
            <footer>
                <p>底部区域</p >
            </footer>
    </body>
</html>

style.css文件

html,body,h4,p {
    /*padding是内边距*/
    padding:0;
    margin:0;
    text-align:center;
    font-size:16px;
}
header,footer {
    height:25px;
}
.main {
    border-top:1px solid #ccc;
    border-bottom:1px solid #ccc;
    padding: 0 100px;
}
.left {
    background: #eee;
    width:100px;
    position:absolute;
    left: 0;
}
.middle {
    background: #ddd;
}
.right {
    background: #eee;
    width: 100px;
    position: absolute;
    right: 0;
}
.left,.right,.middle {
    height: 190px;
}

输出结果

庒

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
响应式web开发chapter1/三栏内容

index.html文件<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>三栏布局页面</title> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body>...
复制链接

扫一扫