前端学习日志-3

CSS-内容概括

position
background
text-align
margin
padding
font-size
z-index
over-flow
:hover
opacity
float
clear:both
line-height
border
color
display

页面布局(主站布局+后台管理布局)实例:

主站布局:应分三部分,顶-主体-底

        <div class=“header”>顶</div>

        <div class=“content”>主体</div>

        <div class=“footer”>底</div>

后台管理布局:

position:

        fixed         永远固定在窗口的某个位置,不受滚轮滚动影响

        relative       相对定位,单个使用时无意义

        absolute      定位在指定位置,是绝对位置,受滚轮滚动影响

------------编程实例

        EG--fixed--要求:左侧菜单需要跟随滚轮滚动变化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin:0 auto;
        }
        .pg-header{
            height:48px;
            background-color:#2459a2;
            color:white;
        }
        .pg-content .menu{
            position:fixed;
            top:48px;
            left:0px;
            bottom:50px;
            width:200px;
            background-color:#dddddd;
        }
        .pg-content .content{
            position:fixed;
            top:48px;
            right:0px;
            bottom:0px;
            left:200px;
            background-color:purple;
            overflow:auto;
        }
        .left{
            float:left;
        }
        .right{
            float:right;
        }
    </style>
</head>
<body>
    <div class="pg-header"></div>
    <div class="pg-content">
        <div class="menu left">左侧管理菜单</div>
        <div class="content left">
            <p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p>
            <p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p>
            <p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p>
            <p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p>
            <p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p>
            <p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p>
            <p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p>
            <p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p>
            <p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p>
        </div>
    </div>

</body>
</html>

        EG--absolute--要求:左侧菜单需要跟随滚轮滚动变化(应用更多)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin:0 auto;
        }
        .pg-header{
            height:48px;
            background-color:#2459a2;
            color:white;
        }
        .pg-content .menu{
            position:absolute;
            top:48px;
            left:0px;
            bottom:50px;
            width:200px;
            background-color:#dddddd;
        }
        .pg-content .content{
            position:absolute;
            top:48px;
            right:0px;
            bottom:0px;
            left:200px;
            background-color:purple;
            overflow:auto;
        }
        .left{
            float:left;
        }
        .right{
            float:right;
        }
    </style>
</head>
<body>
    <div class="pg-header"></div>
    <div class="pg-content">
        <div class="menu left">左侧管理菜单</div>
        <div class="content left">
            <div style="position:fixed;bottom:0px;right:0px;width:50px;height:50px;">返回顶部</div>
            <p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p>
            <p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p>
            <p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p>
            <p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p>
            <p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p>
            <p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p>
            <p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p>
            <p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p>
            <p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p>
        </div>
    </div>

</body>
</html>

        EG--完整的主页及后台管理编写模板

<!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"/>
    <style>
        body{
            margin:0 auto;
        }
        .pg-header{
            height:48px;
            background-color:#2459a2;
            color:white;
            line-height:48px;
        }
        .pg-header .logo{
            width:200px;
            background-color:cadetblue;
            text-align:center;
            font-size:32px;
        }
        .pg-header .user{
            color:white;
            height:48px;
            margin-right:160px;
            padding:0px 20px;
        }
        .pg-header .user:hover{
            background-color:cadetblue;
        }
        .pg-header .user .a img{
            width:40px;height:40px;margin-top:4px;border-radius:50%;
        }
        .pg-header .user .b{
            z-index:10;
            width:160px;
           position:absolute;
           top:47px;
           right:-70px;
           display:none;
        }
        .pg-header .user:hover .b{
            display:block;
            background-color:white;
        }
        .pg-header .user .b a{
            display:block;
            color:black;
        }
        .pg-header .icons{
            padding:0px 8px;
        }
        .pg-header .icons:hover{
            background-color:#204982;
        }
        .pg-header .c a{
            color:red;
            padding:1px 2px;
            background-color:red;
            border-radius:50%;
            color:white;
            font-size:8px;
            position:relative;
            top:10px;
            right:4px;
        }
        .pg-content .menu{
            position:absolute;
            top:48px;
            left:0px;
            bottom:50px;
            width:200px;
            background-color:#dddddd;
        }
        .pg-content .content{
            position:absolute;
            top:48px;
            right:0px;
            bottom:0px;
            left:200px;
            background-color:purple;
            overflow:auto;
            z-index:9;
        }
        .left{
            float:left;
        }
        .right{
            float:right;
        }
    </style>
</head>
<body>
    <div class="pg-header">
        <div class="logo left">TIM</div>

        <div class="user right" style="position:relative;">
            <a class="a" href="www.baidu.com">
                <img src="11.jpg">
            </a>
            <div class="b">
                <a href="">我的资料</a>
                <a href="">注销</a>
            </div>
        </div>

        <div class="c icons right">
            <i class="fa fa-bell" aria-hidden="true"></i>
            <a>1</a>
        </div>
        <div class="c icons right">
            <i class="fa fa-envelope" aria-hidden="true"></i>
            <a >2</a>
        </div>
    </div>
    <div class="pg-content">
        <div class="menu left">左侧管理菜单</div>
        <div class="content left">
            <div style="position:fixed;bottom:0px;right:0px;width:50px;height:50px;">返回顶部</div>
            <p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p>
            <p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p>
            <p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p>
            <p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p>
            <p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p>
            <p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p>
            <p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p>
            <p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p>
            <p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p>
        </div>
    </div>

</body>
</html>

        效果:

前端学习日志-3

 

知识点:

        先定外height,再定内width,内部标签超出外height,再通过设定内height拉回标签!!!

        内外属性作用于标签,标签本身也可以设置属性,这则涉及优先级原则!

上一篇:CSRobot gen:mysql,pg-c#类型映射


下一篇:【雕爷学编程】Arduino动手做(97)---10段LED光柱模块