HTML、CSS常用技巧

最新推荐文章于 2024-07-26 11:41:15 发布
最新推荐文章于 2024-07-26 11:41:15 发布
阅读量163 收藏
点赞数
文章标签： javascript java python ViewUI
原文链接：http://www.cnblogs.com/phennry/p/5801392.html
版权

一、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
#i 1  {
     border :  2px  solid  red ;
     /*边框2像素，实体，红色*/
}
#i 2 {
     border :  2px  dotted  red ;
     /*边框2像素，小虚线，红色*/
}
#i 3 {
     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
h 1 {
   padding-top : 10px ;
   padding-right : 0.25em ;
   padding-bottom : 2 ex;
   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 >

 

转载于:https://www.cnblogs.com/phennry/p/5801392.html

die8252
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS常用特效
Lee的博客
07-17 1万+
本文是笔者写CSS时常用的套路。不论效果再怎么华丽，万变不离其宗。 1、交错动画 有时候，我们需要给多个元素添加同一个动画，播放后，不难发现它们会一起运动，一起结束，这样就会显得很平淡无奇。那么如何将动画变得稍微有趣一点呢？很简单，既然它们都是同一时刻开始运动的，那么让它们不在同一时刻运动不就可以了吗。如何让它们不在同一时刻运动呢？注意到CSS动画有延迟（delay）这一属性。举个栗子，比如有十个元素播放十个动画，将第二个元素的动画播放时间设定为比第一个元素晚0.5秒（也就是将延迟设为0.5秒），其
CSS常用技巧之CSS书写技巧和CSS HACK技巧
01-19
不同的浏览器对CSS的解析结果是不同的，因此会导致相同的CSS输出的页面效果不同，这就需要CSS Hack来解决浏览器局部的兼容性问题。而这个针对不同的浏览器写不同的CSS 代码的过程，就叫CSS Hack。 CSS Hack常见的有...
html,css,js常用技巧
天才中年英俊的博客
08-14 146
页面定时刷新功能实现 有三种方法： 1，在html中设置： <title>xxxxx</title>之後加入下面这一行即可！ 定时刷新：<META HTTP-EQUIV="Refresh" content="10"> 10代表刷新间隔,单位为秒 2.jsp <% response.setHeader("refresh","1"); %> 每一秒...
收藏了一些CSS常用的技巧
liubaoshan
06-23 125
一、使用css缩写 　　使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。 　　具体内容请浏览：CSS常用缩写语法 二、明确定义单位，除非值为0。 　　忘记定义尺寸的单位是CSS新手普遍的错误。在HTML中你可以只写width="100"，但是在CSS中，你必须给一个准确的单位，比如：width:100px width:100em。只有两个例外情况可以不定义单位：0值。除此以外...
html/css技巧总结
dh0536的博客
07-06 83
.e-select .on{display:none} on为e-select的子元素，（之间有空格）.e-select.on{display:block} 只有两种属性同时存在时才会起作用（之间无空格）可以与addcss等配合 new array()[] []表示数组new object(){} {}表示对象 转载于:https://www.cnblogs.com/...
前端必看的8个HTML+CSS技巧
热门推荐
三钻 - 之前端到全栈之路
04-06 4万+
CSS是一个很独特的语言。看起来非常简单，但是某种特殊效果看似简单，实现起来就颇有难度。
前端必会的 HTML+CSS 常用技巧 之 虚线的实现方式
ZhuangWei的博客
08-02 1万+
前端必会的 HTML+CSS 常用技巧 之 虚线的实现方式
前端必会的 HTML+CSS 常用技巧 之 移动端 1px 边框
ZhuangWei的博客
08-03 820
前端必会的 HTML+CSS 常用技巧 之 移动端 1px 边框
css常用技巧
暂定
12-08 178
推一篇 阮一峰的css技巧，里面包含了很多常用的，实用，有些忘记了可以查： CSS使用技巧 http://www.ruanyifeng.com/blog/2010/03/css_cookbook.html
HTML5+CSS3
m0_54840061的博客
03-17 1697
1.网页指的是超文本标记语言，不是编程语言，而是一种标记语言。标记语言是一套标记标签所谓超文本，有两层含义：（1）超出了文本限制，可以是图片，音频、视频等（2）它可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本）2.浏览器有IE、火狐、谷歌、Fafari、Opera等**浏览器内核（渲染引擎）：**负责读取网页内容，整理讯息，计算网页的显示方式并显示页面3.Web标准Web标准是由W3C组织和其他标准化组织制定的一系列标准的集合。
20个CSS常用技巧
weixin_43825475的博客
03-31 1400
一 问题描述 对于每一个开始学习一个新东西的人来说都希望知道一些关于这个东西的小技巧，尤其对于学习一个新的事物的人来说都希望知道一些快捷方式，尤其是对于刚刚开始学习的新手来说，希望知道一些小技巧，这样就能够更快的掌握这个新的实物，下面我给大家介绍对于新手来说的20个CSS实用小技巧。 二 问题分析 为了能够更好的掌握CSS这一个模块，我们需要掌握更多关于它的知识，不仅仅是掌握它的全部必要的知识，掌...
CSS常用技巧十则
09-27
以上五点只是CSS众多技巧中的一部分，熟练掌握这些技巧能帮助开发者创建更加优雅、兼容性更强的网页布局。在实际开发中，还需要了解浮动（`float`）、定位（`position`）、响应式设计（Responsive Design）等更多...
CSS常用优化技巧
09-25
### CSS常用优化技巧详解 #### 一、使用CSS缩写 使用CSS缩写不仅可以帮助减少CSS文件的大小，还能让代码更容易阅读。虽然具体的CSS缩写规则不在本文详细阐述范围内，但简要介绍一些常见的CSS缩写方法是有益的。 1...
【React 】开发环境搭建详细指南
lph159的博客
07-24 1115
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
已解决：vue-office/excel 多个sheet点击切换，滚动条高度不重置，表格视图位置不正确
weixin_42289080的博客
07-26 162
解决 @vue-office/excel 多个sheet切换，内容以及滚动条展示不正确的问题
vue el-select的下拉树形结构 带检索功能
最新发布
Jokerxiuka的博客
07-26 126
【代码】vue el-select的下拉树形结构。
Vue3可媲美Element Plus Tree组件实战之移除节点
felix_alone2012的博客
07-25 587
《Element Plus Tree - 自定义节点内容》示例中介绍了移除节点的用法，个人觉得作为提供给用户API，应该遵循迪米特法则，把功能实现的细节封装在组件内部，而提供给用户最简单的操作方式，同时在此基础上支持用户的扩展。因此，在API使用的人性化方便，个人觉得element plus做的并不优秀。为此，我们自定义tree组件时对用户API可以设计的更人性化些。
Angular由一个bug说起之八：实践中遇到的一个数据颗粒度的问题
KenkoTech的博客
07-24 687
之所以使用这种比较直接的方式是因为项目中的数据类型已经确定，而且对数字的处理逻辑没有统一在一个文件中。这是大型项目经常遇到的问题，起到相同作用的代码因为一些小的差别而分别写在管理各自功能的文件里。文件存入数据库，这样我们就可以统一维护一个表，不管是前端来处理数据还是后端来处理都能遵守相同的规则。针对这篇文章提到的数字缩写的问题，可以有两种处理方案。来展示数据的功能，这些数据根据不同的类型和单位会为其加上前缀、后缀或者省略小数。
爬虫基本原理入门
RHeng的博客
07-25 1037
爬虫（Web Crawler），又称为网络爬虫或网页蜘蛛，是一种按照一定的规则，自动地抓取万维网信息的程序或者脚本。它们可以模拟浏览器行为，遍历网页并抓取网页中的信息，如文本、图片、链接等。接下来，我们会尝试使用Python等编程语言，结合相关库和工具，动手编写自己的爬虫程序，探索更多关于爬虫技术的奥秘。
HTML5 CSS3开发优势与实战技巧
“HTML5+CSS3页面制作分享，讲解了HTML5和CSS3在移动互联网应用中的优势，以及它们带来的新特性和功能，包括跨平台、语义化、性能优化等，并介绍了Webview中常用的CSS3属性和HTML5属性。” 在当前的网页设计和开发...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值