zoukankan      html  css  js  c++  java
  • doc

    一、HTML

    在介绍HTML之前,我们先看一下HTML的文档树结构,主要包括哪些:

        

    (一)、头部标签

    1,Doctype

          Doctype告诉浏览器使用什么样的HTML或XHTML规范来解析HTML文档。

    有和无的区别:

    •     BackCompat:标准兼容模式未开启(怪异模式、混杂模式);

    •     CSS1Compat:标准兼容模式已开启(严格模式)。

        这个属性会被浏览器识别并使用,但是如果你的页面没有DOCTYPE的声明,那么compatMode默认就是BackCompat,这也就是恶魔的开始,浏览器按照自己的方式解析渲染页面,那么,在不同的浏览器就会显示不同的样式; 

        如果你的页面添加了那么就等同于开启了标准模式,浏览器会老老实实按照W3C的标准解析渲染页面,这样一来,你的页面在所有的浏览器显示的就都是一样的了。

    有,用什么?

        Doctype告诉浏览器使用什么样的HTML或XHTML规范来解析HTML文档,dtd文件则包含了标记、attributes、properties、约束规则,在这里推荐使用<!DOCTYPE html>。

    更多规则请参考:https://hsivonen.fi/doctype/

    2、Meta(metadata infomation)

    提供有关页面的元信息,例:页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词。

    • 页面编码(告诉浏览器是什么编码)

    1
    2

    <meta http-equiv="content-type" content="text/html;charset=utf-8">

    <meta charset="utf-8">

    • 刷新和跳转

    1
    2
    3
    4
    meta http-equiv=“Refresh” Content=“30″> 
    <!--页面30秒刷新一次-->
    meta http-equiv=”Refresh“ Content=”5; Url=http://www.autohome.com.cn“ />    
    <!--5秒后自动跳转到后面地址-->
    • 关键词

    1
    meta name="keywords" content="python,java,C++,语言">

    3、Title(页面头部信息)

    4、Link

    • CSS

    1
    2
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <!--引入外部样式-->
    • icon

    1
    2
    <link rel="shortcut icon" href="image/test.ico">
    <!--导入图片-->

    5、Style(在页面中写样式)

    1
    2
    3
    4
    5
    <style type="text/css">
       .hide{
           display: none;
       }
    </style>

    6、Script

    • 引进文件

    1
    script type="text/javascript" src="http://www.googletagservices.com/tag/js/gpt.js"> </script >
    • 写JS代码(一般写在body的最底部)

    1
    2
    3
    <script type="text/javascript">
          .......
    </script>

    (二)、常用标签

    标签一般分为两种:块级标签和行内标签。

    • 块级标签:a标签、span标签、select标签等;

    • 行内标签:div标签、h标签、p标签等。

    1、p标签、br标签

    • p标签:表示段落,默认段落之间是有间隔的;

    • br标签:换行

    1
    2
    <p>hello,world!!</p><br/>
    <p>hello,world!!</p>

    2、a标签

    •  target属性,_back表示在新的页面打开;

    •  锚点

     
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <body>
        <a href="http://www.baidu.com">本页面直接跳转</a><br/>
        <a href="http://www.baidu.com" target="_blank">开启新页面</a><br/>
        <!--加target生成新页面-->
      
        <!--寻找页面中id=i1的标签,将其标签放置在页面顶部-->
        <a href="#i1" style="color: green";>第一章</a><br/>
        <a href="#i2" style="color: fuchsia";>第二章</a><br/>
      
        <!--id没有一个标签的id属性值不允许重复,id属性可以不写-->
        <div id="i1" style="height: 500px";>第一章内容</div>
        <div id="i2" style="height: 500px";>第二章内容</div>
    </body>

    3、HTML标题

    标题(Heading)是通过<h1>--<h6>等标签进行定义的,<h1>定义最大的标题,<h6>定义最小的标题。

    1
    2
    3
    4
    <h1>1,br换行为自闭合标签</h1>
    <p>asdf<br />ghjkl</p>
    <h1>2,a标签</h1>
    <h2>属性:</h2>

    4、select标签

        这里有一个知识点,就是在标签上加默认值:

    • selected="selected"(下拉框默认值)

    • checked="checked"(复选框默认值)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    <p>城市:
        <select>
            <option>上海</option>
            <option>北京</option>
            <option>河北</option>
            <option>山东</option>
        </select>
    <!--显示几条信息,size设置显示的条数-->
        <!--<select multiple size="10">-->
        <select multiple>
            <option>上海</option>
            <option>北京</option>
            <option>河北</option>
            <option>广州</option>
            <option>山西</option>
            <option>河南</option>
        </select>
    <!--创建组-->
        <select>
            <optgroup label="南方">
                <option>上海</option>
                <option>广州</option>
            </optgroup>
            <optgroup label="北方">
                <option>北京</option>
                <option>河北</option>
            </optgroup>
        </select>
    </p>

    6、input标签

    input标签的类型有:

    •  text

    • password

    • redio

    • checkbox

    • file

    • button(普通按钮)

    • submmit(提交当前表单)

    • reset(清空内容)

    textarea:备注框

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Form</title>
    </head>
    <!--<body>传文件的时候要添加enctype="multipart/form-data-->
        <form action="http://192.168.11.88:8000/index/" method="get" enctype="multipart/form-data">
            <div style="border: 1px solid chartreuse;">
                <p>用户名:<input type="text" name="user"/></p>
                <p>密码:<input type="password" name="pwd"/></p>
                <!--<p>邮箱:<input type="email"/></p>-->
                <!--email支持IE9以上的版本,不兼容低版本-->
                <p>性别(单选框):
                    <!--要想互斥的话,需添加属性name并将值设置成相同-->
                    <br/>男<input type="radio" name="ee" value="1"/>
                    <br/>女<input type="radio" name="ee" value="2"/>
                </p>
                <p>爱好(多选框):
                    <br/>篮球<input type="checkbox" value="1"/>
                    <br/>足球<input type="checkbox" value="2"/>
                    <br/>乒乓球<input type="checkbox" value="3"/>
                    <br/>橄榄球<input type="checkbox" value="4"/>
                </p>
                <p>城市:
                    <select name="city">
                        <option value="1">上海</option>
                        <option value="2">北京</option>
                        <option value="3">河北</option>
                        <option value="4">山东</option>
                    </select>
                <!--显示几条信息,size设置显示的条数-->
                    <!--<select multiple size="10">-->
                    <select multiple>
                        <option>上海</option>
                        <option>北京</option>
                        <option>河北</option>
                        <option>广州</option>
                    </select>
                <!--创建组-->
                    <select>
                        <optgroup label="南方">
                            <option>上海</option>
                            <option>广州</option>
                        </optgroup>
                        <optgroup label="北方">
                            <option>北京</option>
                            <option>河北</option>
                        </optgroup>
                    </select>
                </p>
                <p>上传文件: <input type="file" /></p>
                <p>备注: <textarea name="extra"></textarea></p>
                <input type="submit" value="提交"/>
                <input type="button" value="普通按钮"/>
                <input type="reset" value="重新设置"/>
            </div>
        </form>
    </body>
    </html>

    7、ul ol dl

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            body{
                margin: 0;
            }
            ul{
                margin: 0;
                list-style-type: none;
            }
            ul li{
                float: left;
                padding: 0 8px 0 8px;
                color: white;
                cursor: pointer;
            }
            /*当鼠标移动到li标签上时,自动应用以下样式*/
            ul li:hover{
                background-color: blueviolet;
            }
            .pg-header{
                height: 44px;
                background-color: #2459a2;
                line-height: 44px;
            }
            .w{
                 980px;
                margin: 0 auto;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div class="pg-header">
            <div class="w">
                <ul>
                    <li>菜单一</li>
                    <li>菜单二</li>
                    <li>菜单三</li>
                    <li>菜单三</li>
                    <li>菜单三</li>
                    <li>菜单三</li>
                    <li>菜单三</li>
                    <li>菜单三</li>
                </ul>
            </div>
        </div>
        <div class="pg-body"></div>
        <div class="pg-footer"></div>
    </body>
    </html>

    8、table

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Table</title>
    </head>
    <body>
        <table border="5">
            <!--border 表格外边框宽度-->
            <thead>
                 <tr>
                     <!--colspan是列合并-->
                    <th colspan="2">ID</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <!--<th>性别</th>-->
                </tr>
            </thead>
            <tbody>
                <tr>
                    <!--rowspan是行合并-->
                    <td rowspan="2">1</td>
                    <td>张小凡</td>
                    <td>18</td>
                    <td>男</td>
                </tr>
                 <tr>
                    <td>2</td>
                    <td>田灵儿</td>
                    <td>18</td>
                    <td>女</td>
                </tr>
            </tbody>
        </table>
     
    </body>
    </html>

    9、fieldset (会在相关表单元素周围绘制边框)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <body>
     
    <form>
     <fieldset>
      <legend>Personalia:</legend>
      Name: <input type="text"><br>
      Email: <input type="text"><br>
      Date of birth: <input type="text">
     </fieldset>
    </form>
     
    </body>
    </html>

    更多标签使用方法请参考:

        http://www.runoob.com/html/html-tutorial.html

       http://www.w3school.com.cn/h.asp

    二、CSS样式

        CSS是英文Casscading Style Sheets的缩写,称为层叠样式表,用于对页面进行美化。

    存在方式有三种:元素内联、页面嵌入和外部引入,比较三种方式的优缺点。

    • 在标签中直接使用 style='xxx;'

    • 在页面中嵌入<style type="text/css"></style>块

    • 引入外CSS文件

    (一)、CSS选择器

    • 标签选择器

    • class选择器

    • id选择器

    • 层级选择器

    • 组合选择器

    • 属性选择器

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>CSS</title>
        <!--link引入样式-->
        <!--<link rel="stylesheet" href="common.css" />-->
        <style>
            div{
                /*标签选择器*/
                color: chartreuse;
            }
            #i1{
                /*id选择器*/
                font-size: 56px;
                color: green;
            }
            .c1{
                /*class选择器*/
                background-color: green;
            }
            .c2 div p .c3{
                /*层级选择器*/
                background-color: red;
            }
            .c4,.c5,.c6{
                /*组合选择器,找到class=c4,class=c5,class=c6的标签*/
                background-color: red;
            }
        </style>
    </head>
    <body>
        <!--组合选择器-->
        <div class="c4">1</div>
        <div class="c5">1</div>
        <div class="c6">1</div>
     
        <div class="c2">
            <div></div>
            <div>
                <p>
                    <span>oo</span>
                    <!--层级选择器,只适用这一级-->
                    <a class="c3">uu</a>
                </p>
            </div>
        </div>
        <!--这一层的c3格式不会受上面的影响-->
        <div class="c3">sdfsdf</div>
     
        <!--class选择器-->
        <span class="c1">1</span>
        <div class="c1">2</div>
        <a class="c1">3</a>
     
        <!--id选择器-->
        <a id="i1">baidu</a>
     
        <!--标签选择器-->
        <div>99</div>
        <div>99</div>
        <div>99</div>
        <div>
            <div>asdf</div>
        </div>
     
    </body>
    </html>

    属性选择器:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            /*<属性标签/>*/
            .c1[jack='a']{
                color: red;
            }
        </style>
    </head>
    <body>
        <input value="123">
        <textarea>123</textarea>
        <select>
            <option>上海</option>
            <option selected="selected">广州</option>
            <option>北京</option>
        </select>
        男:<input type="radio" name="g1" value="1"/>
        女:<input type="radio" name="g1" checked="checked" value="2"/>
     
        <input type="checkbox" name="c1" value="1" checked="checked"/>
        <input type="checkbox" name="c1" value="2"/>
        <input type="checkbox" name="c1" value="3" checked="checked"/>
        </select>
     
    <!--<属性标签>-->
        <div>
            <div class="c1" jack="a">1</div>
            <div class="c1" jack="a">2</div>
            <div class="c1">3</div>
        </div>
     
    </body>
    </html>

    (二)、CSS常用属性

    1、background属性:

    • background-color:设置背景色;

    1
    2
    3
    4
    5
    /*背景色定义的三种方式*/
    /*background-color: #FF69B4;*/
    /*background-color: rgb(25,180,10);*/
    /*background-color: red;*/
    font-size: 32px;
    • background-image:设置body元素的背景图像;

    • color:blue !important:优先级最高;

    • background-repeat:

           no-repeat:background-image不会重复;

                repeat-x:只在水平位置会重复背景图像;

           repeat-y:只在垂直位置会重复背景图像;

    • background-position:如何定位background-image;

    background-position的属性:

    描述
    left top
    left center
    left bottom
    right top
    right center
    right bottom
    center top
    center center
    center bottom
    如果仅指定一个关键字,其他值将会是"center"
    x% y% 第一个值是水平位置,第二个值是垂直。左上角是0%0%。右下角是100%100%。如果仅指定了一个值,其他值将是50%。 。默认值为:0%0%
    xpos ypos 第一个值是水平位置,第二个值是垂直。左上角是0。单位可以是像素(0px0px)或任何其他 CSS单位。如果仅指定了一个值,其他值将是50%。你可以混合使用%和positions
    inherit 指定background-position属性设置应该从父元素继承

    2、border属性

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    #i1 {
        border2px solid red;
        /*边框2像素,实体,红色*/
    }
    #i2{
        border2px dotted red;
        /*边框2像素,小虚线,红色*/
    }
    #i3{
        border2px dashed red;
        /*边框2像素,大虚线,红色*/
    }

    3、margin属性

         围绕在元素边框的空白区域是外边距。设置外边距会在元素创建额外的"空白"。设置外边距最简单的方法就是使用margin属性,这个属性接收任何长度单位、百分数甚至负值。

    margin属性

    属性描述
    margin 简写属性。在一个声明中设置所有外边距属性。
    margin-bottom 设置元素的下外边距。
    margin-left 设置元素的左外边距。
    margin-right 设置元素的右外边距。
    margin-top

    设置元素的上外边距。

    1
    2
    3
    4
    5
    6
    7
    line-height: 30px;
    /*行居中*/
    background: #F1F1F1;
    margin: 0;
    /*没有外边距,直接在页面顶部*/
    margin: 0 auto;
    /*居中*/

    4、padding属性

       元素的内边距在边框和内容区之间,控制该区域最简单的属性就是padding属性。CSS padding属性定义元素的内边距,padding属性接受长度值或百分比值,但不允许使用负值。

     内边距属性

    属性描述
    padding 简写属性。作用是在一个声明中设置元素的所内边距属性。
    padding-bottom 设置元素的下内边距。
    padding-left 设置元素的左内边距。
    padding-right 设置元素的右内边距。
    padding-top 设置元素的上内边距。
    1
    2
    3
    4
    5
    6
    h1 {
      padding-top: 10px;
      padding-right: 0.25em;
      padding-bottom: 2ex;
      padding-left: 20%;
    }

    5、display属性

    display属性规定元素应该生成的框的类型。下面主要说我们最常用的几种:

    • display:none     此元素不会被显示;

    • display:block    此元素将显示为块级元素,此元素前后会带有换行符;

    • display:inline    默认,此元素会被显示为内联元素,元素前后没有换行符;

    • display:inline-block    行内块元素。

    6、cursor属性

    cursor属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状。

    CSS提供的cursor值:

    • pointer  :小手指;

    • help:箭头加问号;

    • wait:转圈圈;

    • move:移动光标;

    • crosshair:十字光标。

    通过pointer属性我们可以​伪造超链接:

    1
    <span style="cursor:pointer;color:blue;">pointer</span>

    7、float属性

    float属性指定一个元素是否应该浮动。

    CSS提供的float的属性值:

    • left:元素向左浮动;

    • right:元素向右浮动;

    • none:默认值,元素不浮动,并会显示在其文本中出现的位置;

    • inherit:规定应该从父元素继承float属性值。

    在这我们在补充说明一个属性:

         clear属性:指定段落的左侧或右侧不允许浮动的元素。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div style=" 500px;height: 500px;border: 1px solid red">
            <div style=" 20%;background-color: green;float: left">dadada</div>
            <div style=" 80%;background-color: coral;float: right">tatata</div>
            <div style="clear: both;"></div>
        </div>
    </body>
    </html>

    8、position定位属性

    position属性指定一个元素(静态的、相对的、绝对或固定)的定位方法的类型。

    position的属性值:

    • absolute:生成绝对定位的元素;

    • fixed:生成绝对定位的元素,相对于浏览器窗口进行定位;

    • relative:生成相对定位的元素,相对于其正常位置经行定位。

    • z-index:指定一个元素的堆叠顺序。

    两种返回顶部的定义方法,一般absolute和relative一起使用:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    第一种:
    <div style="height:1000px;background-color: #ddd;"></div>
    <div style="position: fixed;right: 200px;bottom: 100px;">返回顶部</div>
     
    第二种:
    <div style="height: 500px; 500px;border: 2px solid green;position: relative">
        <div style="position: absolute;right: 0px;bottom: 0px;color: brown">返回顶部</div>
        <div style="background-color: green;height: 100px; 500px"></div>
    </div>

    9、透明度设置

    设置图像透明度的两种方式:

    • opcity:0.6;

    • background:rgba(0,0,0,.6);

    10、hover选择器

         hover在鼠标移动到链接上时添加的特殊样式,hover选择器可用于所有元素,不仅是链接。

    提示:link选择器设置了未访问的页面链接样式,:visited选择器设置访问过的页面链接的样式,:active选择器设置当你点击链接时的样式。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>mytest</title>
    <style>
    a.ex1:hover,a.ex1:active {color:red;}
    a.ex2:hover,a.ex2:active {font-size:150%;}
    a.ex3:hover,a.ex3:active {background:red;}
    a.ex4:hover,a.ex4:active {font-family:monospace;}
    a.ex5:visited,a.ex5:link {text-decoration:none;}
    a.ex5:hover,a.ex5:active {text-decoration:underline;}
    </style>
    </head>
     
    <body>
    <p>将鼠标移至链接上查看其样式改变.</p>
     
    <p><a class="ex1" href="/css/">This link changes color</a></p>
    <p><a class="ex2" href="/css/">This link changes font-size</a></p>
    <p><a class="ex3" href="/css/">This link changes background-color</a></p>
    <p><a class="ex4" href="/css/">This link changes font-family</a></p>
    <p><a class="ex5" href="/css/">This link changes text-decoration</a></p>
    </body>
     
    </html>

    11、before、after选择器

    • before:向选定的元素之前插入内容;

    • after:向选定的元素之后插入内容

    12、font字体选择器

    • font-style:规定字体样式;

    • font-variant:规定字体异体;

    • font-weight:规定字体粗细;

    • font-size/line-height:规定字体尺寸和行高;

    • ​font-family:规定字体系列。

    三、实例

    1、清除浮动

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>清除浮动</title>
        <style>
            .clearfix:after{
                content: '.';
                clear: both;
                display: block;
                visibility: hidden;    (元素是否可见,hidden为不可见)
                height: 0;
            }
            .left{
                float: left;
            }
     
        </style>
    </head>
    <body>
        <div style="background-color: #00CC00" class="clearfix">
            <div class="left" style="height: 100px;background-color: red">1</div>
            <div class="left">2</div>
     
        </div>
    </body>
    </html>

    2、使用Font awesome插件渲染出小尖角

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>使用插件</title>
        <!--<link rel="stylesheet" href="plugins/Font-Awesome-master/css/font-awesome.css"/>-->
        <style>
            .icon{
                display: inline-block;
                border-top:20px solid red;
                border-right: 20px solid green;
                border-bottom: 20px solid transparent;
                border-left:20px solid transparent ;
            }
        </style>
    </head>
    <body>
        <!--<i class="fa fa-bug" aria-hidden="true"></i>-->
        <div class="icon"></div>
        <a href="Dy15/plugins/Font-Awesome-master/css/font-awesome.css">
    </body>
    </html>

    插件地址:http://fontawesome.io/

    3、常用的两种滚动条

    第一种:页面整体滚动

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            body{
                margin: 0;
            }
            .pg-header{
                height:48px;
                background-color: #012a62;
            }
            .pg-body .body-menu{
                position: absolute;
                top: 48px;
                left: 0;
                bottom: 0;
                 200px;
                /*bottom: 0;*/
                background-color: #e67e4a;
            }
            .pg-body .body-content{
                position: absolute;
                top: 48px;
                left: 220px;
                right: 0;
                background-color: green;
            }
        </style>
    </head>
    <body>
        <div class="pg-header"></div>
        <div class="pg-body">
           <div class="body-menu"></div>
           <div class="body-content">
               sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>
               sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>
               sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>
               sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>
               sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>
               sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>
               sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>
               sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>
               sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>
     
           </div>
        </div>
    </body>
    </html>

     第二种:页面内部分内容滚动

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            body{
                margin: 0;
            }
            .pg-header{
                height:48px;
                background-color: #012a62;
            }
            .pg-body .body-menu{
                position: absolute;
                top: 48px;
                left: 0;
                bottom: 0;
                 200px;
                background-color: #e67e4a;
            }
            .pg-body .body-content{
                position: absolute;
                top: 48px;
                left: 220px;
                right: 0;
                bottom: 0;
                background-color: green;
                overflow: auto;
                /*<overflow添加滚动条>*/
            }
        </style>
    </head>
    <body>
        <div class="pg-header"></div>
        <div class="pg-body">
           <div class="body-menu"></div>
           <div class="body-content">
               sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>
               sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>
               sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>
               sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>
               sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>
               sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>
               sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>
               sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>
               sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>
     
           </div>
        </div>
    </body>
    </html>
  • 相关阅读:
    迅为4412开发板实验Menuconfig_Kconfig(上)
    迅为IMX6ULL开发板Linux 4G通信实验
    迅为IMX6ULL开发板Linux RS232/485驱动实验(下)
    迅为4412开发板实验_Makefile编译(下)
    迅为IMX6Q开发板QtE5.7编译(上)
    迅为干货 | iTOP-4418/6818移植mt6620热点
    UDT源码剖析(十一)之SendQueue And RecvQueue
    UDT源码剖析(九)之CCC
    UDT源码剖析(十)之Channel
    UDT源码剖析(八)之Cache
  • 原文地址:https://www.cnblogs.com/phennry/p/5801392.html
Copyright © 2011-2022 走看看