HTML、CSS常用技巧

一、HTML

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

    HTML、CSS常用技巧

（一）、头部标签

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{
            width: 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 {
    border: 2px solid red;
    /*边框2像素，实体，红色*/
}
#i2{
    border: 2px dotted red;
    /*边框2像素，小虚线，红色*/
}
#i3{
    border: 2px 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="width: 500px;height: 500px;border: 1px solid red">
        <div style="width: 20%;background-color: green;float: left">dadada</div>
        <div style="width: 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;width: 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;width: 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;
            width: 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;
            width: 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>

 

相关文章：

猜你喜欢
相关资源
相似解决方案
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode