CSS-三栏布局新手上路

最新推荐文章于 2024-04-15 19:17:28 发布

RedOorange

最新推荐文章于 2024-04-15 19:17:28 发布

阅读量428

点赞数

分类专栏： CSS 文章标签： html 前端

本文链接：https://blog.csdn.net/m0_59069134/article/details/126762260

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在这之前你需要掌握的:

aside标签代表左右导航栏,article代表中间正文区域.hearder和footer代表上下栏.

margin: 0 0 0 0; 分别距离上下左右内容多少.

使用%描述页面长宽时,布局会随着页面的改变改变.

使用绝对值px,会导致在不同设备上,展示的网页会有所差异.

三栏布局例:

<body>
    <header>
        <h3>头部区域</h3>
    </header>
    <div>
        <aside class="left"><!-- 则边栏 -->
            <h3>左边导航栏</h3>
        </aside>
        <article class="middle">
            <h3>中间正文区域</h3>
        </article>
        <aside class="right">
            <h3>右侧导航栏</h3>
        </aside>
    </div>
    <footer>
        <h3>底部区域</h3>
    </footer>
</body>

*{
    padding: 0;
    margin: 0;
}

header,footer{
    height: 40px;
    width: 100%;/* 分成100份 */
    background: #ccc;
    text-align: center;
}

div{
    height: 800px;
    border: 1px double darkblue;
}

.left,.right{
    position: absolute;
    height:800px;  /*??px是绝对大小,改变窗口会产生影响*/
    top: 40px;
    background: #ff69b4;
}

.left{
    width: 20%;
    left: 0;
}
.right{
    width: 20%;
    right: 0;
}
.middle{
    height:800px; 
    width: 60%;
    margin: 0 0 20% 20%;
    background: #659;
}

RedOorange

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS-三栏布局新手上路

aside标签代表左右导航栏,article代表中间正文区域.hearder和footer代表上下栏.margin: 0 0 0 0;分别距离上下左右内容多少.使用绝对值px,会导致在不同设备上,展示的网页会有所差异.使用%描述页面长宽时,布局会随着页面的改变改变.
复制链接

扫一扫