css后台页面布局效果

已于 2022-05-12 22:17:32 修改
阅读量795 收藏 7
点赞数
分类专栏： 前端学习 文章标签： css html css3
于 2022-05-08 22:06:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_16992475/article/details/124655749
版权

CSS浮动+定位

在这里插入图片描述在这里插入图片描述

参考:实现左边div固定宽度，右边div自适应撑满剩下的宽度的布局方式：https://www.cnblogs.com/yzhihao/p/6513022.html

下面使用的关键就是使用overflow:hidden开启右侧内容区的BFC，使得左边的浮动元素无法盖住右侧内容区，并且可以使得它们在同一行。而且当左边浮动元素宽度减小时，右侧内容区宽度将会自动撑大剩余宽度。
还有的话，就是高度需要层层设置成父元素高度的100%，不然高度就不能撑满了。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .clearfix::before,
        .clearfix::after {
            content: "";
            display: table;
            clear: both;
        }

        /*
		 *  STYLE 5
		 */

        #style-5::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
            background-color: #F5F5F5;
        }

        #style-5::-webkit-scrollbar {
            width: 10px;
            background-color: #F5F5F5;
        }

        #style-5::-webkit-scrollbar-thumb {
            background-color: #0ae;

            background-image: -webkit-gradient(linear, 0 0, 0 100%,
                    color-stop(.5, rgba(255, 255, 255, .2)),
                    color-stop(.5, transparent), to(transparent));
        }

        #style-6::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0,0, 0.3);
            background-color: #F5F5F5;
        }

        #style-6::-webkit-scrollbar {
            width: 10px;
            background-color: #F5F5F5;
        }

        #style-6::-webkit-scrollbar-thumb {
            background-color: #F90;
            background-image: -webkit-linear-gradient(45deg,
                    rgba(255, 255, 255, .2) 25%,
                    transparent 25%,
                    transparent 50%,
                    rgba(255, 255, 255, .2) 50%,
                    rgba(255, 255, 255, .2) 75%,
                    transparent 75%,
                    transparent)
        }

        html,
        body,
        .container {
            height: 100%;
        }

        body {
            margin: 0;
        }

        .left {
            float: left;
            width: 200px;
            height: 500px;
            height: 100%;
            background-color: pink;
            transition: all 0.5s;
            margin-right: 20px;
            overflow: auto;
        }
        
		.left:hover {
		            width: 50px;
        }

        .left-menu {
            height: 1200px;
            background-color: cyan;
        }

        .menu-item {
            height: 50px;
            background-color: rgb(78, 191, 101);
            margin: 10px;
        }

        .content-outer {
            overflow: hidden;
            background-color: #bfa;
            height: 100%;
            overflow: auto;
        }

        .content-wrapper {
            padding: 20px;
        }

        .content1 {
            height: 500px;
            background-color: rgb(177, 228, 119);
            margin-bottom: 10px;

        }
    </style>
</head>

<body>
    <div class="container">
        <div class="left" id="style-5">
            <div class="left-menu clearfix">
                <div class="menu-item">1</div>
                <div class="menu-item">2</div>
                <div class="menu-item">3</div>
                <div class="menu-item">4</div>
                <div class="menu-item">5</div>
                <div class="menu-item">6</div>
                <div class="menu-item">7</div>
                <div class="menu-item">8</div>
                <div class="menu-item">9</div>
                <div class="menu-item">10</div>
                <div class="menu-item">11</div>
                <div class="menu-item">12</div>
                <div class="menu-item">13</div>
                <div class="menu-item">14</div>
                <div class="menu-item">15</div>
                <div class="menu-item">16</div>
                <div class="menu-item">17</div>
                <div class="menu-item">18</div>
            </div>
        </div>
        <div class="content-outer" id="style-6">
            <div class="content-wrapper">
                <div class="content1">
                    123aaavvv
                </div>
                <div class="content1">
                    123aaavvv
                </div>
            </div>
        </div>
        <!-- </div> -->
</body>

</html>

在这里插入图片描述
再加一个头部和尾部，内容区可滚动。
主要时用到了calc这个函数和100vh这个可视区高度css如何让页面填满剩余高度与宽度
https://blog.csdn.net/makewithyou/article/details/122710998

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .clearfix::before,
        .clearfix::after {
            content: "";
            display: table;
            clear: both;
        }

        /*
            *  STYLE 5
            */

        #style-5::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
            background-color: #F5F5F5;
        }

        #style-5::-webkit-scrollbar {
            width: 10px;
            background-color: #F5F5F5;
        }

        #style-5::-webkit-scrollbar-thumb {
            background-color: #0ae;

            background-image: -webkit-gradient(linear, 0, 0, 0 100%)color-stop(.5, rgba(255, 255, 255, .2)),
                color-stop(.5, transparent), to(transparent);
        }

        #style-6::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
            background-color: #F5F5F5;
        }

        #style-6::-webkit-scrollbar {
            width: 10px;
            background-color: #F5F5F5;
        }

        #style-6::-webkit-scrollbar-thumb {
            background-color: #F90;
            background-image: -webkit-linear-gradient(45deg,
                    rgba(255, 255, 255, .2) 25%,
                    transparent 25%,
                    transparent 50%,
                    rgba(255, 255, 255, .2) 50%,
                    rgba(255, 255, 255, .2) 75%,
                    transparent 75%,
                    transparent)
        }

        html,
        body,
        .container {
            height: 100%;
        }

        body {
            margin: 0;
        }
        .head {
            text-align: center;
            line-height: 50px;
        }
        .left {
            float: left;
            width: 200px;
            height: 500px;
            height: 100%;
            background-color: pink;
            transition: all 0.5s;
            margin-right: 20px;
            overflow: auto;
        }

        .left-menu {
            height: 1200px;
            background-color: cyan;
        }

        .menu-item {
            height: 50px;
            background-color: rgb(78, 191, 101);
            margin: 10px;
        }

        .content-outer {
            position: relative;
            overflow: hidden;
            background-color: #bfa;
            overflow: hidden;
            /* height: 100%; */
            height: calc(100vh - 50px);
        }

        .content-wrapper {
            /* padding: 20px; */
            /* height: 800px; */
            overflow-y: scroll;
            margin-bottom: 10px;
            /* position: absolute; */
            width: 100%;
            height: calc(100vh - 50px - 40px - 10px);

            /* bottom: 40px; */
        }

        .foot {
            bottom: 0;
            width: 100%;
            position: absolute;
            height: 40px;
            background-color: pink;
            text-align: center;
            line-height: 40px;
        }

        .content1 {
            height: 500px;
            background-color: rgb(177, 228, 119);
            margin-bottom: 10px;

        }

        .left:hover {
            width: 50px;
        }

        .head {
            height: 50px;
        }

        body {
            overflow: hidden;
        }

        
    </style>
</head>

<body>
    <div class="head">我是head</div>
    <div class="container">
        <div class="left" id="style-5">
            <div class="left-menu clearfix">
                <div class="menu-item">1</div>
                <div class="menu-item">2</div>
                <div class="menu-item">3</div>
                <div class="menu-item">4</div>
                <div class="menu-item">5</div>
                <div class="menu-item">6</div>
                <div class="menu-item">7</div>
                <div class="menu-item">8</div>
                <div class="menu-item">9</div>
                <div class="menu-item">10</div>
                <div class="menu-item">11</div>
                <div class="menu-item">12</div>
                <div class="menu-item">13</div>
                <div class="menu-item">14</div>
                <div class="menu-item">15</div>
                <div class="menu-item">16</div>
                <div class="menu-item">17</div>
                <div class="menu-item">18</div>
            </div>
        </div>
        <div class="content-outer" >

            <div class="content-wrapper" id="style-6">
                <div class="content1">
                    123aaavvv
                </div>
                <div class="content1">
                    123aaavvv
                </div>
            </div>

            <div class="foot">我是foot</div>

        </div>
    </div>
</body>

</html>

flex布局

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>


        #style-6::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.0);
            background-color: #F5F5F5;
            border-radius: 6px;
        }

        #style-6::-webkit-scrollbar {
            width: 6px;
            background-color: #F5F5F5;
        }

        #style-6::-webkit-scrollbar-thumb {
            background-color: #F90;
            border-radius: 6px;

            background-image: -webkit-linear-gradient(45deg,
                    rgba(255, 255, 255, .2) 25%,
                    transparent 25%,
                    transparent 50%,
                    rgba(255, 255, 255, .2) 50%,
                    rgba(255, 255, 255, .2) 75%,
                    transparent 75%,
                    transparent)
        }

        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        html,
        body {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        .wrapper {
            background-color: pink;
            width: 100%;
            height: 100%;
            display: flex;
        }

        .wrapper .left {
            width: 220px;
            background-color: rgb(94, 171, 138);
            height: 100%;
            overflow-y: scroll;
            /* margin-right: 10px; */
        }

        .menu-item {
            height: 50px;
            background-color: cyan;
            margin: 10px;
        }

        .wrapper .right {
            width: 200px;
            background-color: rgb(102, 158, 184);
            height: 100%;
            flex-grow: 1;
            display: flex;
            flex-flow: column nowrap;
        }

        .head {
            min-width: 1000px;
            height: 75px;
            background-color: rgb(215, 156, 156);
            flex-shrink: 0;
        }

        .head .head-item {
            width: 700px;
            height: 20px;
            background-color: cyan;
        }

        .content-wrapper {
            margin-top: 10px;
            margin-left: 10px;
            padding: 10px;
            background-color: rgb(163, 199, 141);
            flex-grow: 1;
            overflow-y: scroll;
            overflow-x: hidden;
        }


        .content1 {
            height: 50px;
            background-color: pink;
            margin-bottom: 10px;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <div class="left" id="style-6">
            <div class="menu-item"></div>
            <div class="menu-item"></div>
            <div class="menu-item"></div>
            <div class="menu-item"></div>
            <div class="menu-item"></div>
            <div class="menu-item"></div>
            <div class="menu-item"></div>
            <div class="menu-item"></div>
            <div class="menu-item"></div>
            <div class="menu-item"></div>
            <div class="menu-item"></div>
            <div class="menu-item"></div>
            <div class="menu-item"></div>
            <div class="menu-item"></div>
        </div>
        <div class="right">
            <div class="head">
                <div class="head-item"></div>
            </div>
            <div class="content-wrapper" id="style-6">
                <div class="content1"></div>
                <div class="content1"></div>
                <div class="content1"></div>
                <div class="content1"></div>
                <div class="content1"></div>
                <div class="content1"></div>
                <div class="content1"></div>
                <div class="content1"></div>
                <div class="content1"></div>
                <div class="content1"></div>
                <div class="content1"></div>
                <div class="content1"></div>
                <div class="content1"></div>
                <div class="content1"></div>
                <div class="content1"></div>
                <div class="content1"></div>
                <div class="content1"></div>
                <div class="content1"></div>
            </div>
        </div>
    </div>
</body>

</html>
ps酷教程
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Web之后台管理页面布局
中國颜值半壁江山的博客
09-28 1369
1、页面布局 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .pg-header{ background-color: #1E84E7; } </style> </head> &
【html网页设计】HTML+CSS+JavaScript通用的后台管理系统ui框架模板
最新发布
12-18 3341
👨‍🎓学生HTML静态网页基础水平制作👩‍🎓，页面排版干净简洁。使用HTML+CSS页面布局设计,web大学生网页设计作业源码，这是一个不错的旅游网页制作，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用, 这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【学习资料/简历模板/面试资料/ 网站设计与制作】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例】 一、👨‍🎓
简易后台效果
HAI6545的博客
01-14 284
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>管.
html+css一个后台静态页面布局设计
08-08
自己做html和css练习时做的一个后台管理系统的静态网页（无后台和js），做的比较注意一些细节，把很多细微的东西也做了，但是算不上完整，仅供各位学习参考！
CSS网页布局
微风洋洋的博客
02-10 7390
介绍一下CSS网页布局这个核心知识，大家一定要重视！
css后台页面布局技巧
weixin_34409822的博客
06-27 155
目标： 实现左边侧边栏固定，右边内容区自适应 侧边栏内容较少时背景100%高度展示 侧边栏内容较多时可以滚动，且不让显示滚动条(显示太丑) 内容区较少时不出现滚动条，较多时可以滚动 code: &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&a
一个后台静态页面布局设计【html+css】
06-24
一个后台静态页面布局设计【html+css】 自己做html和css练习时做的一个后台管理系统的静态网页（无后台和js），做的比较注意一些细节，把很多细微的东西也做了，但是算不上完整，仅供各位学习参考！
css3后台管理面板特效代码
03-20
这个特效代码充分利用了CSS3的新特性，为后台管理界面提供了丰富的视觉效果和交互体验。CSS3，全称Cascading Style Sheets Level 3，是样式表语言的最新版本，它极大地扩展了对网页元素的控制能力，使得设计师可以...
网页后台html+css模板
05-04
网页后台模板是构建网站后台管理界面的基础，它们通常由HTML（超文本标记语言）和CSS（层叠样式表）组成，用于定义页面的结构和样式。这些模板为开发者提供了快速构建用户界面的框架，节省了从零开始设计的时间。本...
CSS3后台管理垂直导航代码
07-24
垂直导航菜单是后台管理界面中常见的布局方式，它将页面的主要操作项按层级排列，便于用户快速找到所需的功能。此款导航代码的垂直布局优化了空间利用，使导航栏在有限的空间内展示更多的链接，同时保持清晰的视觉...
后台登陆页面 html css都有
03-05
就是几款后台登陆页面 有些有主界面。
HTML5+CSS3 漂亮后台管理系统登录界面
06-16
使用HTML+css3写的漂亮后台管理系统登录界面，界面非常美观，分格好看。拿来作为系统的登录界面非常合适
CSS+DIV后台管理布局
06-03
用CSS实现的三个后台管理页面。。。。。。。。
css+ div 实现框架布局
热门推荐
zhanglinlang的专栏
01-18 1万+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn" lang="zh-cn"> <head> <meta htt
CSS典型全屏后台布局
qq_46012527的博客
10-16 1045
CSS典型全屏后台布局，左侧固定右侧可滑动 (1)是典型的左侧菜单固定，右侧高度可变动的布局 (2)运用到flex布局，以及css中calc函数定位宽度 (3)后续right-in里的宽度可以写成auto来自适应页面的高度 <div class="parent" id="parent" style="background-color: lightgrey;"> <div class="top" style="background-color: lightblue;"&
后台系统主要布局，css实现
anxiong2025的博客
11-16 560
很多后台管理系统主页面布局都类似下面这种，只有内容部分可以滚动，左侧和上面固定。 实现代码： <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>一个布局</title> </head> <style>...
基于纯HTML5+CSS3的一个后台或者前台布局
qq_40204129的博客
02-01 2229
前言：本实例基于纯html和css3，不需要任何插件，可以作为新手参考！ 第一部分 1.0 主要实现了：点击菜单改变颜色、下拉选择菜单、div选项卡、div相对布局等 话不多说，先上图： 图一： 图二： 1.1 代码部分 1.11 HTML部分（Index.html） &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; ...
美的css一级系统,[css]后台管理系统布局
weixin_42502775的博客
08-03 1666
知识点:绝对定位+overflowhidden整体思路三大块pg-header---需要固定 (height:48px)pg-contentmenu 右侧菜单-需要固定(width:200px; top:48;left:0; bottom:0;)content---当内容较多时候需要有滚动条(top:48;left:200px;right:0; bottom:0; overflow: auto;)...
原生html+css实现后台管理系统布局
09-12
综上所述，使用原生HTML和CSS实现后台管理系统布局的关键是确定整体布局结构，并通过设置CSS样式来实现各个元素的定位和样式效果。同时，可以考虑使用外部CSS文件和媒体查询来实现多页面布局和响应式设计。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值