前端015-布局4-详细版

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css后台布局</title>
    <link rel="stylesheet" href="fontawesome-free-6.2.1-web/css/v5-font-face.min.css">
    <style>
        body{ margin:0}/* 去掉边框，*/
        .page-header{
            height: 90px;
            background-color: #8e908c;
        }
        .page-content .menu{
            position: absolute;
            top: 90px;
            left: 0;
            bottom: 0;
            width: 300px;
            background-color: #e75e15;
        }
        .page-content .content{
            padding-left:20px ;
            position: absolute;
            top: 90px;
            right: 0;
            bottom: 0;
            left: 300px;
            background-color: #a8acad;
            min-width: 780px;/*加上最小宽度，不让浏览器变小时，破坏其布局*/
            overflow: auto;/*出现滚动条*/
        }
        h1{margin:0}/* h1有外边距，要去掉*/
        .head-div{
            width: 300px;
            height: 90px;
            line-height: 90px;
            font-size: 36px;
        }
        .head-message{
            margin: 0 30px;
            width: 90px;
            height: 90px;
            line-height: 90px;
            font-size: 36px;
        }
        .head-div:hover{
            background-color: #a8acad;
            font-size: 50px;
            color: red;
        }
        .user img{
            height: 60px;
            width: 60px;
            margin: 15px 30px;
            border-radius: 50%;/* 图片呈圆形*/
        }
        .page-header .user .more{
            position: absolute;top:90px;right: 30px;z-index: 9;display: none;
        }
        .more{
            height: 160px;
            width: 200px;
            background-color: wheat;
        }
        .user:hover .more{
            display:block;
            color: red;
        }
        .user:hover {
            background-color: #e75e15;
        }
        .text-c{
            text-align: center;
        }
        .f-left{float: left;}
        .f-right{float: right;}
    </style>
</head>
<body>
    <div class="page-header">
        <div class="head-div text-c f-left">LOGO</div>
        <div class="user text-c f-right" style="position: relative">
            <a href="">
                <img src="img.png">
            </a>
            <div  class="more" >
                <div>详细信息</div>
                <div>退出</div>
            </div>
        </div>
        <div class="head-message f-right">
            <a>fsfasfa</a>
            <i class="fa-solid fa-bell"></i>
        </div>
        <div class="head-message f-right">
            <a>ljkljl</a>
            <i class="fa-solid fa-bell"></i>
        </div>
    </div>
    <div class="page-content">
        <div class="menu">
            <h1>菜单一</h1>
            <h1>菜单一</h1>
            <h1>菜单一</h1>
            <h1>菜单一</h1>
            <h1>菜单一</h1>
            <h1>菜单一</h1>
        </div>
        <div class="content">
<!--            //背景颜色加在这个DIV就可以填满了-->
                <h1>后台布局4--absolute+overflow-详细版</h1>
                <h1>主要用第3种布局。</h1>
                <h1>border-radius: 50%;/* 图片呈圆形*/</h1>
                <h1>.user:hover .more{
                        display:block;
                        color: red;
                    }</h1>
                <h1>https://fontawesome.com/download   小图标网站</h1>
                <h1>border-radius: 50%;/* 图片呈圆形*/</h1>
                <h1>border-radius: 50%;/* 图片呈圆形*/</h1>
                <h1>border-radius: 50%;/* 图片呈圆形*/</h1>
                <h1>border-radius: 50%;/* 图片呈圆形*/</h1>
                <h1>border-radius: 50%;/* 图片呈圆形*/</h1>
                <h1>border-radius: 50%;/* 图片呈圆形*/</h1>
                <h1>border-radius: 50%;/* 图片呈圆形*/</h1>
                <h1>border-radius: 50%;/* 图片呈圆形*/</h1>
                <h1>border-radius: 50%;/* 图片呈圆形*/</h1>
                <h1>border-radius: 50%;/* 图片呈圆形*/</h1>
                <h1>border-radius: 50%;/* 图片呈圆形*/</h1>



        </div>
    </div>
    <div class="page-footer"></div>
</body>
</html>