Skip to content

特效

改变字体大小的样式特效

  • 效果

  • 源代码

    改变字体大小
     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
    <STYLE type="text/css">
  /*设置无下划线的超连接样式*/
  A {
    color: blue;
    text-decoration: none;
  }
  /*鼠标在超链接上悬停时变为颜色*/
  A:hover {
    color: red;
  }
</STYLE>

<A href="#" onMouseOver="this.style.fontSize='24px'" 
  onMouseOut="this.style.fontSize='14px'">免费注册</A>
源代码
2、样式特效的实现思路/字号.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
53
54
55
56
57
58
59
<HTML>

<HEAD>
  <META http-equiv="Content-Type" content="text/html; charset=utf-8">
  <TITLE>改变细边框的颜色</TITLE>

  <STYLE type="text/css">
    /*设置无下划线的超连接样式*/
    A {
      color: blue;
      text-decoration: none;
    }
    /*鼠标在超链接上悬停时变为颜色*/
    A:hover {
      color: red;
    }
    /*设置细边框样式*/
    .boxBorder {
      border-width: 1px;
      border-style: solid;
    }

    /*设置图片按钮样式*/
    .picButton {
      background-image: url(images/back1.jpg);
      color: #0000FF;
      border: 0 px;
      margin: 0px;
      padding: 0px;
      height: 23px;
      width: 82px;
      font-size: 14px;
    }
  </STYLE>
</HEAD>

<BODY>
  <FORM action="" method="post">
    <TABLE border=0 align="center">
      <TR align=left>
        <TD width="60">会员名:</TD>
        <TD width="145"><INPUT class=boxBorder id=txtName size=15 name=txtName> </TD>
      </TR>
      <TR align=left>
        <TD>密&nbsp;&nbsp;码:</TD>
        <TD><INPUT class=boxBorder id=txtPass type=password size=15 name=txtPass> </TD>
      </TR>
      <TR>
        <TD height="30" colSpan=2 align=center><INPUT name=Button type="button" class="picButton" value=" 登   录 "></TD>
      </TR>
      <TR>
        <TD align=right colSpan=2><A href="#" onMouseOver="this.style.fontSize='24px'"
            onMouseOut="this.style.fontSize='14px'">免费注册</A></TD>
      </TR>
    </TABLE>
  </FORM>
</BODY>

</HTML>

高亮框

  • 原始

    1
2
    <INPUT class=boxBorder id=txtName size=15 name=txtName>
<INPUT class=boxBorder id=txtPass type=password size=15 name=txtPass>

    源代码 
     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
    <HTML>

<HEAD>
  <META http-equiv="Content-Type" content="text/html; charset=utf-8">
  <TITLE>改变细边框的颜色</TITLE>
  <STYLE type="text/css">
    /*设置无下划线的超连接样式*/
    A {
      color: blue;
      text-decoration: none;
    }

    A:hover {
      /*鼠标在超链接上悬停时变为颜色*/
      color: red;
    }

    /*设置细边框样式*/
    .boxBorder {
      border-width: 1px;
      border-style: solid;
    }

    /*设置图片按钮样式*/
    .picButton {
      background-image: url(images/back1.jpg);
      color: #0000FF;
      border: 0 px;
      margin: 0px;
      padding: 0px;
      height: 23px;
      width: 82px;
      font-size: 14px;
    }
  </STYLE>
</HEAD>

<BODY>
  <FORM action="" method="post">
    <TABLE border=0 align="center">
      <TR align=left>
        <TD width="60">会员名:</TD>
        <TD width="145"><INPUT class=boxBorder id=txtName size=15 name=txtName
            onMouseOver="this.style.borderColor='red'" onMouseOut="this.style.borderColor=''"> </TD>
      </TR>
      <TR align=left>
        <TD>密&nbsp;&nbsp;码:</TD>
        <TD><INPUT class=boxBorder id=txtPass type=password size=15 name=txtPass
            onMouseOver="this.style.borderColor='red'" onMouseOut="this.style.borderColor=''"> </TD>
      </TR>
      <TR>
        <TD height="30" colSpan=2 align=center><INPUT name=Button type="button" class="picButton" value=" 登   录 "></TD>
      </TR>
      <TR>
        <TD align=right colSpan=2><A href="#" onMouseOver="this.style.fontSize='24px'"
            onMouseOut="this.style.fontSize='14px'">免费注册</A></TD>
      </TR>
    </TABLE>
  </FORM>
</BODY>

</HTML>

  • 高亮

    1
2
3
4
5
6
    <INPUT class=boxBorder id=txtName size=15 name=txtName 
  onMouseOver="this.style.borderColor='red'" 
  onMouseOut="this.style.borderColor=''">
<INPUT class=boxBorder id=txtPass type=password size=15 name=txtPass 
  onMouseOver="this.style.borderColor='red'" 
  onMouseOut="this.style.borderColor=''">

    源代码
    课堂练习1/边框颜色.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
53
54
55
56
57
58
59
60
61
62
    <HTML>

<HEAD>
  <META http-equiv="Content-Type" content="text/html; charset=utf-8">
  <TITLE>改变细边框的颜色</TITLE>
  <STYLE type="text/css">
    /*设置无下划线的超连接样式*/
    A {
      color: blue;
      text-decoration: none;
    }

    A:hover {
      /*鼠标在超链接上悬停时变为颜色*/
      color: red;
    }

    /*设置细边框样式*/
    .boxBorder {
      border-width: 1px;
      border-style: solid;
    }

    /*设置图片按钮样式*/
    .picButton {
      background-image: url(images/back1.jpg);
      color: #0000FF;
      border: 0 px;
      margin: 0px;
      padding: 0px;
      height: 23px;
      width: 82px;
      font-size: 14px;
    }
  </STYLE>
</HEAD>

<BODY>
  <FORM action="" method="post">
    <TABLE border=0 align="center">
      <TR align=left>
        <TD width="60">会员名:</TD>
        <TD width="145"><INPUT class=boxBorder id=txtName size=15 name=txtName
            onMouseOver="this.style.borderColor='red'" onMouseOut="this.style.borderColor=''"> </TD>
      </TR>
      <TR align=left>
        <TD>密&nbsp;&nbsp;码:</TD>
        <TD><INPUT class=boxBorder id=txtPass type=password size=15 name=txtPass
            onMouseOver="this.style.borderColor='red'" onMouseOut="this.style.borderColor=''"> </TD>
      </TR>
      <TR>
        <TD height="30" colSpan=2 align=center><INPUT name=Button type="button" class="picButton" value=" 登   录 "></TD>
      </TR>
      <TR>
        <TD align=right colSpan=2><A href="#" onMouseOver="this.style.fontSize='24px'"
            onMouseOut="this.style.fontSize='14px'">免费注册</A></TD>
      </TR>
    </TABLE>
  </FORM>
</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
    <STYLE type="text/css">
  .mouseOverStyle {
    background-image: url(images/back2.jpg);
    color: #CC0099;
    border: 0px;
    margin: 0px;
    padding: 0px;
    height: 23px;
    width: 82px;
    font-size: 14px;
  }

  .mouseOutStyle {
    background-image: url(images/back1.jpg);
    color: #0000FF;
    border: 0px;
    margin: 0px;
    padding: 0px;
    height: 23px;
    width: 82px;
    font-size: 14px;
  }
</STYLE>
</HEAD>

<INPUT name=Button type="button" class="mouseOutStyle" value=" 登   录 "
  onMouseOver="this.className='mouseOverStyle'" 
  onMouseOut="this.className='mouseOutStyle'">
源代码
3、制作改变按钮背景图片的特效/按钮的图片背景.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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<HTML>

<HEAD>
  <META http-equiv="Content-Type" content="text/html; charset=utf-8">
  <TITLE>改变文字的背景</TITLE>
  <STYLE type="text/css">
    /*设置无下划线的超连接样式*/
    A {
      color: blue;
      text-decoration: none;
    }

    A:hover {
      /*鼠标在超链接上悬停时变为颜色*/
      color: red;
    }

    .boxBorder {
      border-width: 1px;
      border-style: solid;

    }

    .mouseOverStyle {
      background-image: url(images/back2.jpg);
      color: #CC0099;
      border: 0px;
      margin: 0px;
      padding: 0px;
      height: 23px;
      width: 82px;
      font-size: 14px;
    }

    .mouseOutStyle {
      background-image: url(images/back1.jpg);
      color: #0000FF;
      border: 0px;
      margin: 0px;
      padding: 0px;
      height: 23px;
      width: 82px;
      font-size: 14px;
    }
  </STYLE>
</HEAD>

<BODY>
  <FORM action="" method="post">
    <TABLE border=0 align="center">
      <TR align=left>
        <TD width="60">会员名:</TD>
        <TD width="145"><INPUT class=boxBorder id=txtName size=15 name=txtName
            onMouseOver="this.style.borderColor='red'" onMouseOut="this.style.borderColor=''"> </TD>
      </TR>
      <TR align=left>
        <TD>密&nbsp;&nbsp;码:</TD>
        <TD><INPUT class=boxBorder id=txtPass type=password size=15 name=txtPass
            onMouseOver="this.style.borderColor='red'" onMouseOut="this.style.borderColor=''"> </TD>
      </TR>
      <TR>
        <TD height="30" colSpan=2 align=center><INPUT name=Button type="button" class="mouseOutStyle" value=" 登   录 "
            onMouseOver="this.className='mouseOverStyle'" onMouseOut="this.className='mouseOutStyle'"></TD>
      </TR>
      <TR>
        <TD align=right colSpan=2><A href="#">免费注册</A></TD>
      </TR>
    </TABLE>
  </FORM>
</BODY>

</HTML>

层的显示/隐藏

显示属性display

参数值 描述
block 默认值。按块显示，换行显示. 用该值为对象之后添加新行
none 不显示 ，隐藏对象。与visibility属性的hidden值不同，其不为被隐藏对象保留其物理空间。
inline 按行显示，和其他元素同一行显示。 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<SCRIPT language="javascript">
  function closeMe() {
    document.getElementById("advLayer").style.display = "none";
  }
  function showMe() {
    document.getElementById("advLayer").style.display = "block";
  }
</SCRIPT>

<P>
  <INPUT name="placeButton" type="button" value="关闭层" onClick=" closeMe( )">
  <INPUT name="placeButton2" type="button" value="弹出层" onClick=" showMe( )">
</P>
<DIV id="advLayer"><IMG src="images/advPic.jpg" width="360" height="190"></DIV>
源代码
4、层的显示隐藏特效/弹出、关闭层.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
<HTML>

<HEAD>
  <META http-equiv="Content-Type" content="text/html; charset=utf-8">
  <TITLE>弹出关闭层</TITLE>
  <STYLE type="text/css">
    /*如果去掉定位的样式，将出现内容动态隐藏显示的效果*/
    #advLayer {
      position: absolute;
      left: 62px;
      top: 44px;
      width: 367px;
      height: 194px;
      z-index: 2;
    }
  </STYLE>
  <SCRIPT language="javascript">
    function closeMe() {
      document.getElementById("advLayer").style.display = "none";
    }
    function showMe() {
      document.getElementById("advLayer").style.display = "block";
    }
  </SCRIPT>
</HEAD>

<BODY>
  <P>
    <INPUT name="placeButton" type="button" value="   关闭层    " onClick=" closeMe( )">
    <INPUT name="placeButton2" type="button" value="    弹出层    " onClick=" showMe( )">
  </P>
  <DIV id="advLayer"><IMG src="images/advPic.jpg" width="360" height="190"></DIV>
  <H4>层下方的内容</H4>
  <H4>层下方的内容</H4>
  <H4>层下方的内容</H4>
  <H4>层下方的内容</H4>
  <H4>如果修改代码：去掉层DIV的样式（即取消层的位置），</H4>
  <H4>将出现内容动态隐藏显示的效果。</H4>
</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
<STYLE type="text/css">
  <!--
  #advLayer {
    position: absolute;
    left: 5px;
    top: 101px;
    width: 100px;
    height: 224px;
    z-index: 1;
  }

  #closeLayer {
    position: absolute;
    left: 70px;
    top: 329px;
    width: 35px;
    height: 22px;
    z-index: 2;
  }
  -->
</STYLE>
<SCRIPT language="javascript">
  function closeMe() {
    document.getElementById("closeLayer").style.display = "none";
    document.getElementById("advLayer").style.display = "none";
  }
</SCRIPT>

<DIV id="advLayer"><IMG src="images/adv.jpg" width="110"></DIV>
<DIV id="closeLayer" onClick="closeMe( )"><IMG src="images/closePic.jpg" width="42" height="14"></DIV>

源代码
4、层的显示隐藏特效/广告层.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
<HTML>

<HEAD>
  <META http-equiv="Content-Type" content="text/html; charset=utf-8">
  <TITLE>层的显示和隐藏</TITLE>
  <STYLE type="text/css">
    <!--
    #advLayer {
      position: absolute;
      left: 5px;
      top: 101px;
      width: 100px;
      height: 224px;
      z-index: 1;
    }

    #closeLayer {
      position: absolute;
      left: 70px;
      top: 329px;
      width: 35px;
      height: 22px;
      z-index: 2;
    }
    -->
  </STYLE>
  <SCRIPT language="javascript">
    function closeMe() {
      document.getElementById("closeLayer").style.display = "none";
      document.getElementById("advLayer").style.display = "none";
    }
  </SCRIPT>
</HEAD>

<BODY>
  <DIV id="advLayer"><IMG src="images/adv.jpg" width="110"></DIV>
  <DIV id="closeLayer" onClick="closeMe( )"><IMG src="images/closePic.jpg" width="42" height="14"></DIV>
  <TABLE border="0" align="center">
    <TR>
      <TD width="100%" height="100%"><IMG src="images/sohu_back.jpg" width="761" height="616"> </TD>
    </TR>
  </TABLE>
</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
53
54
55
    <HTML>

<HEAD>
  <META http-equiv="Content-Type" content="text/html; charset=utf-8">
  <TITLE>图片的切换效果</TITLE>
  <SCRIPT language="javascript">
    function InitImage() {
      document.getElementById("gameTab2").style.display = "none";
      document.getElementById("game").style.display = "none";
      document.getElementById("mobileTab1").style.display = "none";
    }
    function showGame() {
      document.getElementById("gameTab1").style.display = "none";
      document.getElementById("gameTab2").style.display = "block";

      document.getElementById("game").style.display = "block";
      document.getElementById("mobile").style.display = "none";

      document.getElementById("mobileTab2").style.display = "none";
      document.getElementById("mobileTab1").style.display = "block";
    }
    function showMobile() {
      document.getElementById("gameTab1").style.display = "block";
      document.getElementById("gameTab2").style.display = "none";

      document.getElementById("game").style.display = "none";
      document.getElementById("mobile").style.display = "block";

      document.getElementById("mobileTab2").style.display = "block";
      document.getElementById("mobileTab1").style.display = "none";
    }
  </SCRIPT>
</HEAD>

<BODY onLoad="InitImage( )">
  <TABLE border="0" align="center" cellpadding="0" cellspacing="0">
    <TR>
      <TD><IMG id="gameTab1" src="images/gameTab1.jpg" width="83" height="47" onMouseOver="showGame()">
        <IMG id="gameTab2" src="images/gameTab2.jpg" width="83" height="49">
      </TD>
      <TD><IMG id="mobileTab1" src="images/mobileTab1.jpg" width="81" height="49" onMouseOver="showMobile()">
        <IMG id="mobileTab2" src="images/mobileTab2.jpg" width="82" height="47">
      </TD>
    </TR>
    <TR>
      <TD colspan="2"><IMG id="mobile" src="images/mobile.jpg" width="165" height="171"><IMG id="game"
          src="images/game.jpg" width="164" height="169"></TD>
    </TR>
    <TR>
      <TD colspan="2"><IMG src="images/fly.jpg" width="165" height="43"></TD>
    </TR>
  </TABLE>
</BODY>

</HTML>