css-后台页面管理布局和图标的使用

最新推荐文章于 2024-06-03 14:58:07 发布

73、

最新推荐文章于 2024-06-03 14:58:07 发布

阅读量489

点赞数

分类专栏： # 前端实例

本文链接：https://blog.csdn.net/weixin_40318474/article/details/103608589

版权

前端实例专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1、左侧菜单位置永远不变
让左侧菜单栏和右侧内容都永远固定在页面的某个位置，随着右侧内容的滚动条查看时，左侧的菜单栏永远可见。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            body{
                margin: 0;
            }
            .left{
                float: left;
            }
            .right{
                float:right;
            }
            .pg-header{
                height: 48px;
                background-color: blue;
                color: white;
            }
            .pg-content{
                
            }
            .pg-footer{
                
            }
            .pg-content .menu{
                position: absolute;
                top: 48px;
                left: 0;
                bottom: 0;
                width: 200px;
                background-color: red;
            }
            .pg-content .content{
                position: absolute;
                top: 48px;
                right: 0;
                bottom: 0;
                left: 200px;
                background-color: green;
                overflow: auto; // 不加这个属性就是下面那种布局方式
            }
        </style>
    </head>
    <body>
        <div class="pg-header"></div>
        <div class="pg-content">
            <div class="menu left">a</div>
            <div class="content left">
                <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
                <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
                <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
                <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
                <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
                <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
                <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
                <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
                <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
            </div>
        </div>
        <div class="pg-footer"></div>
    </body>
</html>

2、左侧菜单跟随滚动条的滑动而变化

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            body{
                margin: 0;
            }
            .left{
                float: left;
            }
            .right{
                float:right;
            }
            .pg-header{
                height: 48px;
                background-color: blue;
                color: white;
            }
            .pg-content{
                
            }
            .pg-footer{
                
            }
            .pg-content .menu{
                position: absolute;
                top: 48px;
                left: 0;
                bottom: 0;
                width: 200px;
                background-color: red;
            }
            .pg-content .content{
                position: absolute;
                top: 48px;
                right: 0;
                bottom: 0;
                left: 200px;
                background-color: green;
            }
        </style>
    </head>
    <body>
        <div class="pg-header"></div>
        <div class="pg-content">
            <div class="menu left">a</div>
            <div class="content left">
                <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
                <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
                <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
                <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
                <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
                <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
                <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
                <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
                <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
            </div>
        </div>
        <div class="pg-footer"></div>
    </body>
</html>

3、当鼠标移到右上角头像框的时候会弹出一个下拉框显示一个选项

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            body{
                margin: 0;
            }
            .left{
                float: left;
            }
            .right{
                float:right;
            }
            .pg-header{
                height: 48px;
                background-color: blue;
                color: white;
                line-height: 48px;
            }
            .pg-header .logo{
                width: 200px;
                background-color: cadetblue;
                text-align: center;
            }
            .pg-header .user{
                width: 160px;
                height:48px;
            }
            .pg-header .user:hover{
                background-color: red;
            }
            .pg-header .user .a img{
                height:40px;
                width:40px;
                margin-top:4px;
                border-radius:50%;
            }
            .pg-header .user .b{
                background-color:red;
                position: absolute;
                top: 48px;
                right: 20px;
                z-index: 10;
                width: 160px;
                display: none;
            }
            .pg-header .user:hover .b{
                display: block;
            }
            .pg-header .user .b a{
                display: block;
            }
            .pg-content{
                
            }
            .pg-content .menu{
                position: absolute;
                top: 48px;
                left: 0;
                bottom: 0;
                width: 200px;
                background-color: red;
            }
            .pg-content .content{
                position: absolute;
                top: 48px;
                right: 0;
                bottom: 0;
                left: 200px;
                background-color: green;
                z-index: 9;
            }
            .pg-footer{
                
            }
        </style>
    </head>
    <body>
        <div class="pg-header">
            <div class="logo left">
                xue
            </div>
            <div class="user right" style="position:relative">
                <a class="a" href="#">
                    <img src="2.jpg">
                </a>
                <div class="b">
                    <a>我的资料</a>
                    <a>注销</a>
                </div>
            </div>
        </div>
        <div class="pg-content">
            <div class="menu left">a</div>
            <div class="content left">
                <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
                <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
                <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
                <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
                <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
                <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
                <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
                <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
                <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
            </div>
        </div>
        <div class="pg-footer"></div>
    </body>
</html>

4、网页图标的使用

下载网址：http://www.fontawesome.com.cn

把下载的整体放在程序目录里面
在这里插入图片描述

head头导入

<link rel="stylesheet" href="font-awesomw-4.7.0/css/font-awesome.min.css">

在上面网址查看图标，输入对应的代码即可。

73、

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css-后台页面管理布局和图标的使用

1、左侧菜单位置永远不变让左侧菜单栏和右侧内容都永远固定在页面的某个位置，随着右侧内容的滚动条查看时，左侧的菜单栏永远可见。<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title&...
复制链接

扫一扫

专栏目录