HTML+CSS 后台管理页面布局及fontawesome中的图标应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css"/>  <!--rel="stylesheet" 关联到样式表单-->
    <style>
        body{      /*标签选择器*/
            margin:0;
        }
        .left{
            float:left;
        }
        .right{
            float:right;
        }
        .pg-head{
            height:40px;
            background-color:blue;
            color:white;
            line-height:40px;

        }
        .pg-head .logo{   /*关联选择器*/
            width:20%;
            background-color:deepskyblue;
            text-align:center;

        }
        .pg-head .icons{
            padding:0 20px;
        }
        .pg-head .icons:hover{
            background-color:darkslateblue;
        }
        .pg-head .user{
            margin-right:60px;
            padding:0 20px;

            /*background-color:plum;*/
            /*text-align:center;*/
            height:40px;



        }
        .pg-head .user:hover{   /*hover含义鼠标放在user上会有括号内性质的改变*/
            background-color:darkslateblue;
        }
        .pg-head .user .a img{
            height:30px;
            width:30px;
            margin-top:5px;
            border-radius:50%;
        }
        .pg-head .user .b{
            position:absolute;
            top:40px;
            right:20px;
            background-color:white;
            color:black;
            z-index:20;
            width:100px;
            display:none;

        }
        .pg-head .user:hover .b{   /*user中的hover,下的b*/
            display:block;
        }
        .pg-head .user .b a{
            display:block;
        }
        .pg-content .Menu{
            position:absolute;
            top:40px;
            left:0;
            bottom:0;
            width:20%;   /*有疑问*/
            background-color:red;

        }
        .pg-content .Content{
            position:absolute;
            top:40px;
            right:0;
            bottom:0;
            /*left:200px;*/
            width:80%;   /*有疑问*/
            background-color:yellow;
            overflow:auto;   /*修改overflow属性实现两种页面布局的切换*/
            z-index:9;

        }
    </style>
</head>
<body>
    <div class="pg-head ">
        <div class="logo left">CSDN博客</div>
        <div class="user right" style="position:relative;">   <!--.right顺序越早，右飘越右-->
            <a class="a" href="#">
                <img  src="11.jpg">   <!--border-radius设置图片边框为圆形，也可以设置具体的像素值-->
            </a>
            <div class="b" >
                <a>我的博客</a>
                <a>退出</a>
            </div>
        </div>
        <div class="icons right">
           <i class="fa fa-bell-o" aria-hidden="true"></i>   <!--font-awesome-4.7.0中图标的使用-->
        </div>
        <div class="icons right">
           <i class="fa fa-commenting-o" aria-hidden="true"></i>
            <span style="
                border-radius:50%;   /*方框变圆形 boder-radius像素值由小到大表示方框到圆形的转换*/
                display:inline-block;
                padding:6px;
                line-height:1px;
                background-color:red;">6</span>
        </div>

    </div>
    <div class="pg-content">
        <div class="Menu left"></div>
        <div class="Content right">
            <div style="position:absolute;bottom:0;right:0;width:50px;height:50px;">返回顶部</div>
            <!--<div style="position:absolute;bottom:0;right:0;width:50px;height:50px;">返回顶部</div>-->
            <p>内容1</p><p>内容1</p><p>内容1</p><p>内容1</p><p>内容1</p>
            <p>内容1</p><p>内容1</p><p>内容1</p><p>内容1</p><p>内容1</p>
            <p>内容1</p><p>内容1</p><p>内容1</p><p>内容1</p><p>内容1</p>
            <p>内容1</p><p>内容1</p><p>内容1</p><p>内容1</p><p>内容1</p>
            <p>内容1</p><p>内容1</p><p>内容1</p><p>内容1</p><p>内容1</p>
            <p>内容1</p><p>内容1</p><p>内容1</p><p>内容1</p><p>内容1</p>
            <p>内容1</p><p>内容1</p><p>内容1</p><p>内容1</p><p>内容1</p>
            <p>内容1</p><p>内容1</p><p>内容1</p><p>内容1</p><p>内容1</p>
            <p>内容1</p><p>内容1</p><p>内容1</p><p>内容1</p><p>内容1</p>
            <p>内容1</p><p>内容1</p><p>内容1</p><p>内容1</p><p>内容1</p>
            <p>内容1</p><p>内容1</p><p>内容1</p><p>内容1</p><p>内容1</p>
            <p>内容1</p><p>内容1</p><p>内容1</p><p>内容1</p><p>内容1</p>
            <p>内容1</p><p>内容1</p><p>内容1</p><p>内容1</p><p>内容1</p>
            <p>内容1</p><p>内容1</p><p>内容1</p><p>内容1</p><p>内容1</p>
            <p>内容1</p><p>内容1</p><p>内容1</p><p>内容1</p><p>内容1</p>
            <p>内容1</p><p>内容1</p><p>内容1</p><p>内容1</p><p>内容1</p>
            <p>内容1</p><p>内容1</p><p>内容1</p><p>内容1</p><p>内容1</p>
            <p>内容1</p><p>内容1</p><p>内容1</p><p>内容1</p><p>内容1</p>
            <p>内容1</p><p>内容1</p><p>内容1</p><p>内容1</p><p>内容1</p>
            <p>内容1</p><p>内容1</p><p>内容1</p><p>内容1</p><p>内容1</p>
            <p>内容1</p><p>内容1</p><p>内容1</p><p>内容1</p><p>内容1</p>
            <p>内容1</p><p>内容1</p><p>内容1</p><p>内容1</p><p>内容1</p>
            <p>内容1</p><p>内容1</p><p>内容1</p><p>内容1</p><p>内容1</p>
            <p>内容1</p><p>内容1</p><p>内容1</p><p>内容1</p><p>内容1</p>
            <p>内容1</p><p>内容1</p><p>内容1</p><p>内容1</p><p>内容1</p>
            <p>内容1</p><p>内容1</p><p>内容1</p><p>内容1</p><p>内容1</p>
            <p>内容1</p><p>内容1</p><p>内容1</p><p>内容1</p><p>内容1</p>
            <p>内容1</p><p>内容1</p><p>内容1</p><p>内容1</p><p>内容1</p>
            <p>内容1</p><p>内容1</p><p>内容1</p><p>内容1</p><p>内容1</p>
            <p>内容1</p><p>内容1</p><p>内容1</p><p>内容1</p><p>内容1</p>
            <p>内容1</p><p>内容1</p><p>内容1</p><p>内容1</p><p>内容1</p>
            <p>内容1</p><p>内容1</p><p>内容1</p><p>内容1</p><p>内容1</p>
        </div>
    </div>
    <div class="pg-footer"></div>


</body>
</html>
效果图：
HTML+CSS 后台管理页面布局及fontawesome中的图标应用

猜你喜欢
