1、css简介
  层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
  CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。
2、导入css
导入css有3种方式:
1.元素内嵌
  行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势,不推荐使用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p style="background-color: aqua">前端CSS基础</p>
</body>
</html>

效果:

wKiom1neHuOxVqdiAAADco22Q5M235.png

2.页面嵌入
    嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>前端CSS</title>
    <!--在头部指定好CSS样式然后,在标签里使用class="样式名应用"-->
    <style>
        .css_test{
            background-color: darkorchid;
        }
    </style>
</head>
<body>
    <div>
        <p class="css_test">
            <!--这里应用指定好的CSS样式名即可-->
           前端之CSS学习
        </p>
    </div>
</body>
</html>

效果:

wKioL1neHV6xX_hsAAADOK6SdyU343.png

3.外部引用
  也是将一个.css文件引入到HTML文件中

# css定义,文件名称color.css
.page_color{
    /*设置背景颜色及宽带*/
    background-color: darkorchid;
    width: 300px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>前端CSS</title>
    <!--这里通过link导入样式,有点类似与python导入模块中的import *-->
    <link rel="stylesheet" href="color.css">
</head>
<body>
    <div>
        <p class=page_color>
            <!--这里直接应用指定好的CSS样式名即可-->
            前端CSS基础
        </p>
    </div>
</body>
</html>

效果:

wKioL1neHRfSWCq6AAADSCeMsVQ866.png

注意:
  导入式会在整个网页装载完后再装载CSS文件,因此这就导致了一个问题,如果网页比较大则会儿出现先显示无样式的页面,
闪烁一下之后,再出现网页的样式。这是导入式固有的一个缺陷。使用链接式时与导入式不同的是它会以网页文件主体装载前装载CSS文件,
因此显示出来的网页从一开始就是带样式的效果的,它不会象导入式那样先显示无样式的网页,然后再显示有样式的网页,这是链接式的优点。此外行内的样式等级最高
4.优先级
标签>页面嵌入>外部引用
3、css选择器(常用)

wKioL1nEo1HCvTEDAACiY6Qs45U693.png

标签选择器:
    div { background-color:red; }
    <div > </div>
class选择器:
    .bd { background-color:red; }
    <div class='bd'> </div>
id选择器:
    #idselect { background-color:red; }
    <div id='idselect' > </div>
关联选择器:
    #idselect p{ background-color:red; }
    <div id='idselect' > <p> </p> </div>
组合选择器:
    input,div,p{ background-color:red; }
属性选择器:
    input[type='text']{ width:100px; height:200px; }
    .c1[xiao='a']{color:red;}<br>    <div class='c1' xiao='a'>自定义属性选择器</div>    <br>
伪元素选择器:
    a:link{background-color:red;}    # 鼠标没有碰过的样式
    a:hover{background-color:red;}   # 鼠标放上去的样式
    a:active{background-color:red;}  # 选择链接时的样式
    a:visited{background-color:red;} # 已经访问过的链接的样式

案例:

<style>
    /*标签选择器,找到所有的标签应用以下样式*/
    div{
        color: green;
    }
    /*id选择器,找到标签id等于i1的标签,应用以下样式*/
    #i1{
        font-size: 56px;
        /* color: green; */
    }
    /*class选择器,找到class=c1的所有标签,应用一下样式*/
    .c1{
        background-color: red;
    }
    /*层级选择器,找到 class=c2 下的div下的p下的class=c3标签,应用以下样式*/
    /*.c2 div p a{*/
        /**/
    /*}*/
    .c2 div p .c3{
        background-color: red;
    }
    /*组合选择器,找到class=c4,class=c5,class=c6,的标签,应用以下样式*/
    .c4,.c5,.c6{
        background-color: aqua;
    }
</style>

CSS选择器案例

1.id应用

"#",这个调用CSS样式的方法,就是在头部<style>#name{....}</style>     # name意思就是所有id为name的都会使用这个css样式

<head>
    <meta charset="UTF-8">
    <title>前端CSS</title>
    <style>        #name{
            background-color: red;
        }
    </style>
</head>
<body>
    <div>
        <p id="name">
            <!--这里不需要指定,只要id=name的就会自动应用头部指定的CSS样式-->
            前端CSS
        </p>
        <p id="name">
            前端HTML
        </p>
    </div>
</body>

效果:


ID选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>前端CSS</title>
    <style>
        /*ID选择器*/        #i1{
            background-color:red;
        }
     </style>
</head>
<body>

/* 为所有id为i1的ID应用样式,注意咱们是为了测试,在实际的生产中ID不能相同 */
<a id="i1"> id 选择器 </a> <a id="i1"> id 选择器 </a> <a id="i2"> 如果ID不同,那么将不会应用样式 </a>
</body>
</html>

效果:

2.标签应用

为指定标签统一设置格式:在头部<style>p{....}</style>  这里的p是标签的名称,也可以是div这样就会给所有的div设置格式

<head>
    <meta charset="UTF-8">
    <title>前端CSS</title>
    <style>
        p{
            background-color: lightskyblue;
            width: 100px;
            height:20px;
        }
    </style>
</head>
<body>
    <div>
        <p>
            <!--这里不需要指定,只要id=name的就会自动应用头部指定的CSS样式-->
            前端CSS
        </p>
        <p>
            前端HTML
        </p>
    </div>
</body>

效果:

标签选择器

为类型标签设置样式例如:<div>、<a>、等标签设置一个样式,代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>前端CSS</title>
     <style>
        /*标签选择器,如果启用标签选择器所有指定的标签讲默认使用此样式*/
        div{
            font-size: 19px;
        }    </style>
</head>
<body>
    <div>
        font size test 19
    </div>
</body>
</html>

效果:

3.类选择器

class选择器,id是可以相同的,代码如下:

<head>
    <meta charset="UTF-8">
    <title>前端CSS</title>
    <!--在头部指定好CSS样式然后,在标签里使用class="样式名应用"-->
    <style>
        /*类选择器标签*/
        .cls{
            background-color:blue;
            font-size: 15px;
        }    </style>
</head>
<body>
    <!--任何类型的标签都可以调用类选择器-->
    <div class="cls">        class test div    </div>
    <a class="cls">        class test a    </a>
    <span class="cls">        class test span    </span>
</body>

效果:

注:以上三种选择器,建议使用第三种

4.关联选择器

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>CSS学习</title>

    <style>
        /*为一个标签应用了,类选择器,下的li标签设置样式*/
        .container li{
            background-color: pink;
        }
    </style></head><body>
    <!--下面的div应用了container类选择器,那么他下面的所有的li标签将应用上面设置的样式-->
    <div class="container">
        <div style="height: 20px;background-color: red;">
            test        </div>
        <ul>
            <li>
                li1            </li>
            <li>
                li2            </li>
            <li>
                li3            </li>
        </ul>
    </div></body></html>

效果图:

关联选择器应用场景:为某标签下面的标签设置指定的样式:

# 下面的代码就是为应用了这个类选择器的标签下面的所有li标签设置样式

        .container li{
            background-color: pink;
        }

# 问:如果在上面的代码基础上为li标签下的a标签设置样式怎么办呢?在li后面再加个a即可!

        .container li a {
            background-color: pink;
        }

案例:

<!DOCTYPE html><html lang="en"><head>
   <style>
        /*关联选择器:为应用了container下面的子元素下应用了l类选择器下面的应用了p类选择器设置样式*/
        .container .l .p {
            background-color: pink;
        }
    </style></head><body>

    <div class="container">
        <div class="l">
            test                <div>
                    <ul>
                        <!--这里需要注意,他们只要是有包换关系就行,不一定非得挨着-->
                        <li class="p">
                            hello shuaige                        </li>
                    </ul>
                </div>

        </div>

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

效果图:


5.组合选择器

有这么一个场景,看下面的关联组合器,cc1和cc2都要使用相同的样式怎么办?重写一遍?

.container .a .cc1 {
    background-color: pink;
}
.container .a .cc2 {
    background-color: pink;
}

解决方法代码如下:

.container .a .cc1,.container .a .cc2  {
    background-color: pink;
}

上面cc1后面的“逗号”就是或的关系,如果路径都是相同的话可以进行改良代码如下:

.container .a .cc1,.cc2  {
    background-color: pink;
}

这里组合的时候他是按照第一个出现的逗号来进行处理的,看下面的代码:

/*组合选择器*/
.container b ,.a .cc1,.cc2  {
    background-color: pink;
}
/*组合选择器分解,上面的分解完成之后谁来应用:background-color: pink;这个样式呢?*/
.container b
.container b .a .cc1
.container b .cc2
 ......这里需要注意,“逗号”是或的关系,一般这个不常用,常用的是上面的方法

6.属性选择器

写表单验证的时候最常用,举个例子来说看下面的代码:

我要在这么input下找到type为text的标签并且给他设置样式,在上面咱们知道了组合标签,但是组合选择器最小单元是标签,他不能定位到type属性

 <div>
        <input type="text" />
        <input type="password" />
        <input type="file" />
        <input type="checkbox"/>
        <input type="button"/>
        <input type="reset"/>
    </div>

怎么做呢?在组合选择器后面加个[type=“text”]即可

    <style>
        /*input和[之间不能有空格]*/
        .con input[type="text"] {
            border:3px solid red;
        }
    </style>
<!DOCTYPE html><html lang="en"><head>
    <style>
        /*input和[之间不能有空格]*/
        .con input[type="text"] {
            border:3px solid red;
        }
    </style></head><body>
    <div>
        <input type="text" />
        <input type="password" />
        <input type="file" />
        <input type="checkbox"/>
        <input type="button"/>
        <input type="reset"/>
    </div></body></html>

效果图:

需求又来了,我想找到input标签为type为text并且name为“lianxi”的那个input标签

    <div class="con">
        <input type="text" />
        <input type="text" name="lianxi"/>
        <input type="password" />
        <input type="file" />
        <input type="checkbox"/>
        <input type="button"/>
        <input type="reset"/>
    </div>

解决方法:在增加一个属性就行了(注意中括号之间没有空格不会报错但是没有效果),代码如下:

    <style>
        /*input和[之间不能有空格]*/
        .con input[type="text"][name="shuaige"] {
            border:3px solid red;
        }
    </style>

效果:


属性标签经常用,要记住

也可以使用自定义属性来定义,并且所有的标签都可以使用自定义属性:

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>shuaige</title>
    <style>
        /*input和[之间不能有空格]*/
        .con input[type="text"][alex="shuaige"] {
            border:3px solid red;
        }
    </style></head><body>
    <div class="con">
        <input type="text" />
        <input type="text" alex="shuaige" />
        <input type="password" />
        <input type="file" />
        <input type="checkbox"/>
        <input type="button"/>
        <input type="reset"/>
    </div></body></html>

更多选择器
4、css常用的属性 
1.颜色属性:

color:green
color:#ff6600
color:#f60
color:rgb(255,255,255)      # 红(R)、绿(G)、蓝(B) 每个的取值范围0~255
color:rgba(255,255,255,1)   # RGBA是代表Red(红色) Green(绿色) Blue(蓝色)和 Alpha的(色彩空间)透明度

2.字体属性:      

font-size:14px/50%/larger
font-family:微软雅黑,serif
font-weight:normal(默认值)/bold(粗)/bolder(更粗)/lighter(更细)
                   100、200、300~900,400 = normal,而 700 = bold

简写方式:<br>    font: 20px  '微软雅黑'
3.背景属性:  

background-image:url(图片路径)
background-repeat:no-repeat(不重复)/repeat(重复平铺满)/repeat-x(向Y轴重复)/repeat-y(向Y轴重复)
background-position: right top(20px 20px);(横向:left center right)(纵向:top center bottom)
简写方式:
    background:背景颜色 url(图像) 重复 位置
    background:#f60 url(images/bg,jpg) no-repeat top center

代码:

<head>
    <meta charset="UTF-8">
    <title>前端CSS</title>
</head>
<body>
    <div style="background-color: red">
     <!--设置背景颜色-->
        Hello,html
    </div>

    <div style="background-image: url(ico.gif);height: 80px;">
     <!--设置背景图片-->
    </div>
</body>

wKioL1neHhezAFg9AAAHsxHy7CU783.png

div是块级别的标签,我们的图片仅仅是一个小的图片,但是现在是平铺,所以看下面的代码:

效果:

wKioL1neHkXDWE11AAAF42LIv8g491.png


4.文本属性:      

text-align: center;   # 横向排列
line-height: 200px;   # 文本行高 通俗的讲,文字高度加上文字上下的空白区域的高度 50%:基于字体大小的百分比
text-indent: 150px;   # 首行缩进,
letter-spacing: 10px; # 字符间距
word-spacing: 20px;   # 单词间距

5.边框属性:

border-style: none   # 无边框
              solid  # 直线边框
              dashed # 虚线边框
              dotted # 点状边框
              double # 双线边框
              inherit # 继承
              groove # 凸槽边框
              ridge  # 垄状边框、inset inset边框、outset outset边框 依赖于border-color属性
border-width:px  固定值的边框
              medium 中等边框
              thick 粗边框
              thin 细边框
              inherit继承       
 
border-color:red
              #ff0000
              rgb(255,255,0)
              rgba(255,255,0,0.1)
<br>border-radius: px 倒角
简写方式:
      border:2px #f60 solid

代码:

<!--border:有3个参数:线的粗细、线的样式(实线、点、虚线等)、线的颜色-->
<!--第一种:线的粗细为1像素,实线、红色-->
<div style="border:1px solid red;height:10px" ></div>

<!--第二种:线的粗细为1像素,点、蓝色-->
<div style="border:1px dotted blue;height:10px" ></div>

<!--第三种:线的粗细为1像素、虚线、紫色-->
<div style="border:1px dashed purple;height:10px" ></div>

# 边框可以单独的设置一边的边框、上、下、左、右
<!--在左边设置边框,3px、实线、红色-->
<div style="border-left: 3px solid red">前端CSS</div>

wKioL1neHqzxROaqAAAE-97zKyQ968.png


6.列表属性:

list-style-type:none    无标记。
                disc    默认。标记是实心圆。
                circle  标记是空心圆。
                square  标记是实心方块。
                decimal 标记是数字。
                decimal-leading-zero    0开头的数字标记。(01, 02, 03, 等。)
                lower-roman     小写罗马数字(i, ii, iii, iv, v, 等。)
                upper-roman 大写罗马数字(I, II, III, IV, V, 等。)
                lower-alpha     小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
                upper-alpha     大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
                lower-greek  小写希腊字母(alpha, beta, gamma, 等。)
                lower-latin 小写拉丁字母(a, b, c, d, e, 等。)
                upper-latin 大写拉丁字母(A, B, C, D, E, 等。)
                hebrew    传统的希伯来编号方式
                armenian    传统的亚美尼亚编号方式
                georgian    传统的乔治亚编号方式(an, ban, gan, 等。)
                cjk-ideographic 简单的表意数字
                hiragana    标记是:a, i, u, e, o, ka, ki, 等。(日文片假名)
                katakana    标记是:A, I, U, E, O, KA, KI, 等。(日文片假名)
                hiragana-iroha  标记是:i, ro, ha, ni, ho, he, to, 等。(日文片假名)
                katakana-iroha  标记是:I, RO, HA, NI, HO, HE, TO, 等。(日文片假名)
 
list-style-position:inside  列表项目标记放置在文本以内,且环绕文本根据标记对齐。
                    outside 默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外,且环绕文本不根据标记对齐。
                    inherit 规定应该从父元素继承 list-style-position 属性的值。
 
list-style-image:URL       图像的路径。
                 none      默认。无图形被显示。
                 inherit   规定应该从父元素继承 list-style-image 属性的值。
 
简写方式:
    list-style:square inside url('/i/arrow.jpg');

7.dispaly属性:      

display:none    # 隐藏属性
        block   # 变块级元素
        inline  # 变内联元素
        inline-block # 内联元素默认不能设置长宽,块级可以,这个让内联元素可以设置height width

代码:

<!--display 为none将隐藏标签-->
<div style="display: none;">前端CSS</div>

<!--display 为inline会将块级别标签调为内联标签-->
<div style="background-color:red;display:inline">前端JavaScript</div>

<!--display 为block会将内联标签调为块级别标签-->
<a style="background-color:red;display:block">前端HTML</a>

效果:

wKioL1neHvbRtfLsAAAEPGoVki4648.png

8.cursor属性:

鼠标停放时显示的效果

cursor:pointer  # 鼠标变小手
       help      
       move

代码:

<div style="cursor:pointer">停放在这里显示小手(pointer)</div>

    <div style="cursor:help">停放在这里显示问号(help)</div>

    <div style="cursor:wait">停放在这里显示转圈(wait)</div>

    <div style="cursor:move">停放在这里显示移动(move)</div>
    
    <div style="cursor:crosshair">停放在这里显示定位(crosshair)</div>

9.opacity属性:

opacity:0.4  # 0-1之间的小数,颜色透明度

10.z-index属性:  

z-index:10  # 设置优先级,一般用在模态对话框

11.margin,pading边距属性:

margin: 10px    # 外边距(本身不会增加),与边框的距离
padding: 10px   # 内边距(本身会增加) 遵循上右下左,元素之间的距离

12.float属性  

float:left/right
clear:both
<body>
    <div style="width: 500px;border:2px solid red;">
        <div style="width:20%;float: left;background-color: aqua;">a</div>
        <div style="width:80%;float: left;background-color: beige;">b</div>
        <div style="clear:both"></div>
    </div>
</body>

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>前端CSS</title>
    <style>
        .float-left{
            width:20%;
            background-color:red;
            height: 500px;
            float: left;
            /*这里长和宽,可以用百分比或者直接指定像素来指定*/
        }
        .float-right{
            width: 80%;
            background-color:blue;
            height: 500px;
            float:left;
            /*这里长和宽,可以用百分比或者直接指定像素来指定*/
        }
    </style>
</head>
<body>
    <div class="float-left"></div>
    <div class="float-right"></div>
</body>
</html>

效果:

wKioL1neH2KhyTI7AAANfWMcbcg265.png

 注:这里需要注意,有一种情况,如果不给父div设置高度,并且设置了float之后,子的float可能会覆盖父div的颜色怎么办?在父的div内加一条:

<div style="clear:both;"></div>

13.position属性

position: fixed      # 固定浏览器窗口,网页返回顶部的按钮
          absolute   # 固定窗口
          relative   # 一般用于和absolute配合使用,相对于absolute
    <div style="height:2000px;">
        <div style="position: fixed;bottom: 0px;right: 0px;background-color: red;">111111</div>
    </div>
    <div style="height: 500px;width: 400px;border: 2px solid red;position: relative;">
        <div style="height: 200px;background-color: red;">
            <div style="position:absolute;bottom: 0px;right: 0px;">111</div>
        </div>
    </div>

模态对话框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模态对话框</title>
    <style>
        .hide {
            display: none;
        }
        .modal{
            width:400px;
            height:300px;
            background-color: #dddddd;
            position: fixed;
            top:50%;
            left:50%;
            margin-top:-150px;
            margin-left:-200px;
            z-index: 10;
        }
        .shadow {
            position: fixed;
            top:0px;
            left:0px;
            right:0px;
            bottom:0px;
            /*background-color: black;*/
            /*opacity: 0.6;*/
            background-color: rgba(0,0,0,.6);
            z-index: 9;
        }
    </style>
</head>
<body>
    <input type="button" value="添加"/>

    <div class="shadow"></div>
    <div class="modal">
        <input type="text"/>
        <input type="text"/>
        <input type="text"/>
        <input type="text"/>
    </div>
    <div style="height: 2000px;"></div>
</body>
</html>

注意:
1、css文档从上到下执行,以最后一个为准

a {
    font-size: 10px;
}
b {
    font-size: 40px;
}
<p class = "a b"> ddd </p>

2、有几个特殊的块级元素只能包含内联元素,不能包含块级元素。如h1,h2,h3,h4,h5,h6,p,dt 切记
3、父div里面的子div都float,
  方法1、在最后加一个div然后添上属性 clear:both
  方法2、定义一个通用属性,

clearfix:afte{
    content: '111';
    display: block;
    clear: both;
    /* visibility 隐藏内容但占高度*/
    visibility: hidden;
    height: 0;
    /*display: none;隐藏内容也不占高度*/
}

一些案例:

带图像input

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>带图像的登录</title>
    <style>
        .icon-name{
            background-image: url(i_name.jpg);
            height:16px;
            width:200px;
            display: inline-block;
            background-repeat:no-repeat;
        }
    </style>
</head>
<body>
    <div style="width:200px;position: relative;">
        <input style="width:180px;padding-right: 20px;" type="text"/>
        <span class="icon-name" style="position: absolute;top:5px;right: -186px;"></span>
    </div>
</body>
</html>

伪类选择器运用清除浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类选择器运用清除浮动</title>
    <style>
        .c1:after {
            content:'aaa';
        }
        .c2:before {
            content:'666';
        }
        .clearfix:after{
            content:'.';
            clear:both;
            display: block;
            visibility: hidden;
            height:0;
        }
        .left{
            float:left;
        }
    </style>
</head>
<body>
    <div class="c1">ddd</div>
    <div class="c2">888</div>

    <div style="background-color: red;" class="clearfix">
        <div class="left" style="height:100px;background-color: green">1</div>
        <div class="left">2</div>
    </div>

</body>
</html>

小尖角

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小尖角</title>
    <style>
        .icon {
            display: inline-block;
            border-top:15px solid red;
            /*border-right:15px solid green;*/
            /*border-bottom:15px solid yellow;*/
            /*border-left:15px solid pink;*/
            border-right:15px solid transparent;
            border-bottom:15px solid transparent;
            border-left:15px solid transparent;
        }
    </style>
</head>
<body>
    <div class="icon"></div>
</body>
</html>

后台布局一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后台布局一</title>
    <style>
        * {
            margin:0;
        }
        .pg-header {
            height:48px;
            background-color: #2459a2;
        }
        .pg-body .body-menu{
            position: absolute;
            top:48px;
            left:0;
            bottom:0;
            width:200px;
            background:red;
        }
        .pg-body .body-content{
            position: absolute;
            top:48px;
            left:210px;
            /*bottom:0;*/
            right:0;
            background:green;
        }
    </style>
</head>
<body>
    <div class="pg-header"></div>
    <div class="pg-body">
        <div class="body-menu"></div>
        <div class="body-content">
            asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>
            asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>
            asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>
            asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>
            asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>
            asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>
            asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>
            asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>
            asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>
            asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>
            asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>
        </div>
    </div>
    <div class="pg-heaher"></div>
</body>
</html>

后台布局二

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后台布局二</title>
    <style>
        * {
            margin:0;
        }
        .pg-header {
            height:48px;
            background-color: #2459a2;
        }
        .pg-body .body-menu{
            position: absolute;
            top:48px;
            left:0;
            bottom:0;
            width:200px;
            background:red;
        }
        .pg-body .body-content{
            position: absolute;
            top:48px;
            left:210px;
            bottom:0;
            right:0;
            background:green;
            overflow: auto;
        }
    </style>
</head>
<body>
    <div class="pg-header"></div>
    <div class="pg-body">
        <div class="body-menu"></div>
        <div class="body-content">
            asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>
            asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>
            asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>
            asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>
            asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>
            asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>
            asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>
            asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>
            asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>
            asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>
            asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>
        </div>
    </div>
    <div class="pg-heaher"></div>
</body>
</html>