HTML、CSS常用技巧

一、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{
            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>

 

posted @ 2016-08-24 01:15  邸海峰  阅读(1965)  评论(0)  编辑  收藏  举报
doc