WEB前端-HTML-CSS-后台管理页面布局小例

本文介绍了后台管理页面的简单布局,包括上层标签、左侧菜单和中部内容显示块。重点讲解如何通过CSS的absolute定位和overflow属性,实现头部和侧边栏固定不动,中部内容区域滚动的效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

作为一个后台管理页面,不必太过复杂,一般只需要三部分:
1、上层标签块;
2、左侧菜单块;
3、中部内容显示块;

今天简要给大家分享一个布局中的一个小case;
需求:要求上层标签块、左侧菜单快固定不动,滚动条只对中部显示块作用;

其实很简单,就是利用absolute的底部定位 ”bottom:0“配合overflow:auto来实现的。
代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin:0 auto;
            background-color:greenyellow;
        }
        .pa-header{
            height:48px;
            background-color:blue;

        }
        .pa_body .body-menu{
            position:absolute;
            top:48px;
            
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值