O_Web练习册

Web开发
  • 具体代码可以打开后F12直接看或查看下方Code源码。

HCJ练习（HTML/CSS/JS）

123P
45P
67P
8P

frame

frame

divFrame

divFrame

多级菜单

多级菜单

图片轮播

图片轮播

颜色16进制显示器

颜色16进制显示器

Code

HCJ练习（HTML/CSS/JS）

  • 123P

    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 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="refresh" content="6;URL=123P.html" />
    <!--自动跳转，以秒为单位-->
    <meta name="keywords" content="练习，前三章" />
    <!--name为关键词，多个用逗号隔开-->
    <title>H_C_J前三章练习</title>
    <link rel="alternate" href="/atom.xml" title="Meng之境Ze" type="application/atom+xml">
    </head>

    <body bgcolor="#66CC33" text="#660000" alink="#009933" link="#996666" vlink="#CC9966" topmargin="10" leftmargin="20">
    <!--最后两项为上边距和左边距-->

    <center><!--自动居中-->
    <h1 align="center">一级标题</h1>
    <h2>二级标题</h2>

    <font size="3" color="#336699">1到7为绝对大小，有正负号的为相对大小</font><br /><br />

    <b><strong>粗体</strong></b><br /><br />
    <i><em><cite>斜体</cite></em></i><br /><br />
    上标<sup>上标</sup><br /><br />
    下标<sub>下标</sub><br /><br />
    <big>大字号</big><br /><br />
    <small><small>小字号嵌套</small></small><br /><br />
    <u>下划线</u><br />

    <p>第一段<p>第二段</p></p><!--可以不用最后一个/p-->
    <p>插入&copy;和&nbsp;空格</p>
    </center>

    <hr width="1000" size="10" color="#FF0000" align="left"/>
    </body>
    </html>

  • 45P

    需要资源 45P.jpg 及 PianoNight.mp3 。

    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
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>图像多媒体</title>
    <link rel="alternate" href="/atom.xml" title="Meng之境Ze" type="application/atom+xml">
    </head>

    <body>

    啊啊啊啊啊啊fhkadhkahdfhdfhskdjfhksahfklfhalk<br />
    <img src="45P.jpg" alt="提示文字,顶部对齐" width="192" height="120" border="5" vspace="3" hspace="6" align="top" />
    啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦<br />
    <img src="45P.jpg" alt="无边框,底部对齐" width="192" height="120" align="bottom" />
    了了了了了了了了了了了了了了<br />
    <a href="#"><img src="45P.jpg" alt="无边框,中线对齐" width="192" height="120" align="middle" /></a>图像超链接哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈<br />

    <img src="45P.jpg" alt="原画" border="0" usemap="#Map" />
    <map name="Map" id="Map">
      <area shape="rect" coords="285,322,540,498" href="#" />
    </map><!--热区链接-->

    <!--滚动-->
    <marquee direction="right" behavior="alternate" scrollamount="30" scrolldelay="200" width="400" height="50" bgcolor="#00FF00" hspace="200" vspace="100">滚动文字</marquee>

    <!--背景音乐
    <bgsound src="PianoNight.mp3"/>
    -->
    <!--插入多媒体-->
    <embed src="PianoNight.mp3" width="100%" autostart="true" loop="true">此处需要flash插件</embed>
    </body>
    </html>

  • 67P

    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
    73
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>列表表格</title>
    <link rel="alternate" href="/atom.xml" title="Meng之境Ze" type="application/atom+xml">
    </head>

    <body>
    有序列表<br />
    <ol type="I" start="2">
    <li>周一</li>
    <li>周二</li>
    <li>周三</li>
    </ol>
    无序列表<br />
    <ul type="square">
    <li>周一</li>
    <li>周二</li>
    <li>周三</li>
    </ul>
    目录列表<br />
    <dir>
    <li>周一</li>
    <li>周二</li>
    <li>周三</li>
    </dir>
    定义列表<br />
    <dl>
    <dt>标题</dt>
    <dd>定义描述</dd>
    </dl>
    菜单列表<br />
    <menu>
    <li>周一</li>
    <li>周二</li>
    <li>周三</li>
    </menu>

    <table border="4" bordercolor="#00FF00" bordercolordark="#9900FF" bordercolorlight="#CCFF00" bgcolor="#660000" background="45P.jpg"
    width="400" height="400">
    <caption>标题，表格</caption>
    <thead align="right" bgcolor="#CC6699">
    <td>One</td>
    <td>Two</td>
    <td>Tree</td>
    </thead>
    <tbody>
    <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    </tr>
    <tr bordercolor="#FF66FF" bgcolor="#3300FF">
    <td bordercolor="#6666FF" bordercolordark="#0000FF" bordercolorlight="#666666">4</td>
    <td>5</td>
    <td>6</td>
    </tr>
    <tr>
    <td colspan="2">7</td>
    <td>9</td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
    <td>表尾</td>
    </tr>
    </tfoot>
    </table>


    </body>
    </html>

  • 8P

    需要资源 8P1.jpg 及 8P2.jpg 。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>8P</title>
    <frameset rows="30%,*">
    <frame src="8P1.jpg" />
    <frame src="8P2.jpg" />
    </frameset>
    <link rel="alternate" href="/atom.xml" title="Meng之境Ze" type="application/atom+xml">
    </head>

    <body>

    </body>
    </html>

frame

  • frame.html

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Frame</title>

    <frameset cols="120,*">
    <frame name="list" src="list.html">
    <frame name="content" src="1.html">
    </frameset>

    </head>

    <body>
    </body>
    </html>

  • list.html

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>list</title>
    </head>

    <body style="text-align:center">
    <a href="1.html" target="content">1</a>
    <a href="2.html" target="content">2</a>
    <a href="3.html" target="content">3</a>
    </body>
    </html>

  • 1.html

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
      
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>11</title>
    </head>

    <body style="font-size:120px;text-align:center">
    11
    </body>
    </html>

  • 12.html

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
      
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>11111</title>
    </head>

    <body>
    11111111111111111111
    </body>
    </html>

  • 2.html

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>22</title>
    </head>

    <body style="font-size:120px;text-align:center">
    22
    </body>
    </html>

  • 23.html

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
      
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>2</title>
    </head>

    <body>
    22222222222
    </body>
    </html>

  • 3.html

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>33</title>
    </head>

    <body style="font-size:120px;text-align:center">
    33
    </body>
    </html>

divFrame

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
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>divFrame</title>

<style type="text/css">
.titA{line-height:30px;width:100px;text-align:center;background:#990000;float:left}
.titB{line-height:30px;width:100px;text-align:center;background:#FF99CC;float:left}
.titC{line-height:30px;width:100px;text-align:center;background:#CCCC33;float:left}
.titD{line-height:30px;width:100px;text-align:center;background:#CC6699;float:left}
.conA{height:330px;width:500px;margin:0 auto;text-align:center;background:#990000;clear:both;display:block}
.conB{height:330px;width:500px;margin:0 auto;text-align:center;background:#FF99CC;clear:both;display:none}
.conC{height:330px;width:500px;margin:0 auto;text-align:center;background:#CCCC33;clear:both;display:none}
.conD{height:330px;width:500px;margin:0 auto;text-align:center;background:#CC6699;clear:both;display:none}
.changeDiv{line-height:30px;width:500px;margin:0 auto;}
.changeDiv div{float:left;width:auto;background:#66FFCC;}
</style>

<script language="javascript">
var w=1;
function changeDiv(t){
var ine=document.getElementById("q"+t);
var inee=document.getElementById("q"+w);
if(t!=w)
{
ine.style.display="block";
inee.style.display="none";
}
w=t;
}
</script>
</head>


<body>
<div style="line-height:30px;width:500px;margin:0 auto">
<div class="titA" onmousedown="changeDiv(1)">title_A</div>
<div class="titB" onmousedown="changeDiv(2)">title_B</div>
<div class="titC" onmousedown="changeDiv(3)">title_C</div>
<div class="titD" onmousedown="changeDiv(4)">title_D</div>
</div>
<div class="conA" id="q1">content_A</div>
<div class="conB" id="q2">content_B</div>
<div class="conC" id="q3">content_C</div>
<div class="conD" id="q4">content_C</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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>MenuLevels</title>
    <link rel="stylesheet" type="text/css" href="menulevels.css" />
</head>

<body>
<div class="menuDiv">
    <ul>
        <li><a href="#">一级菜单A</a></li>
        <li>
            <a href="#">一级菜单B</a>
            <ul>
                <li><a href="#">二级菜单B1</a></li>
            </ul>
        </li>
        <li>
            <a href="#">一级菜单C</a>
            <ul>
                <li><a href="#">二级菜单C1</a></li>
                <li>
                    <a href="#">二级菜单C2</a>
                    <ul>
                        <li><a href="#">三级菜单</a></li>
                        <li><a href="#">三级菜单</a></li>
                        <li><a href="#">三级菜单</a></li>
                    </ul>
                </li>
                <li><a href="#">二级菜单D3</a></li>
            </ul>
        </li>
        <li>
            <a href="#">一级菜单D</a>
            <ul>
                <li><a href="#">二级菜单D1</a></li>
                <li><a href="#">二级菜单D2</a></li>
            </ul>
        </li>
    </ul>
</div>
</body>
</html>
  • menulevels.css
    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
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    /* 使菜单居中 */
    body {
        text-align:center; 
    }

    .menuDiv { 
        border: thin solid black; 
        display:inline-block;
    }

    /* 去掉a标签的下划线 */
    .menuDiv a {
        text-decoration: none;
    }

    /* 设置ul和li的样式 */
    .menuDiv ul , .menuDiv li {
        list-style: none;   /* 不显示圆点(列表样式) */
        padding: 0; /* 去除列表默认的边距(上下左) */
        float: left;    /* 水平排放 */
        margin: 0;  /* ul和li的上下贴边 */
    }

    /* 设置二三级菜单绝对定位，并隐藏 */
    .menuDiv>ul>li ul , .menuDiv>ul>li>ul>li ul {
        position: absolute; /* 不会把其他元素挤歪 */
        display: none;
    }

    /* 设置二三级菜单的li的样式 */
    .menuDiv>ul>li>ul>li {
        float: none;    /* 列表纵排显示 */
        border: thin solid black;
        border-top: 0px;
        background-color: red;
    }
    .menuDiv>ul>li>ul>li>ul>li {
        /*border: thin solid black;*/
        border-top: 0;
        position: relative;
        left: 86px;
        top: -20px;
        background-color: yellow;
    }

    /* 鼠标放在一二级菜单上，显示二三级菜单 */
    .menuDiv>ul>li:hover>ul , .menuDiv>ul>li>ul>li:hover>ul {
        display: block;
    }

    /* 在菜单中，鼠标放上去的样式 */
    .menuDiv>ul>li>a:hover , .menuDiv>ul>li>ul>li>a:hover , .menuDiv>ul>li>ul>li>ul>li>a:hover {
        color: #f0f;
        background-color: #bcf;
    }

    /* 一级菜单 
    .menuDiv > ul > li > a {
        width: 120px;
        line-height: 40px;
        color: black;
        background-color: #cfe;
        text-align: center;
        border-left: 1px solid #bbf;
        display: block;
    }*/

    /* 二级菜单 
    .menuDiv > ul > li > ul > li > a {
        width: 120px;
        line-height: 36px;
        color: #456;
        background-color: #eff;
        text-align: center;
        border: 1px solid #ccc;
        border-top: none;
        display: block;
    }*/

    /* 在二级菜单中，第一个设置顶边框 
    .menuDiv > ul > li > ul > li:first-child > a {
        border-top: 1px solid #ccc;
    }*/

图片轮播

需要资源 1.png 2.png 3.png animation.png 。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>PicTurn</title>
    <link rel="stylesheet" type="text/css" href="picturn.css" />
</head>

<body>
    <div class="container">
        <div class="photo">
            <img src="1.png" />
            <img src="2.png" />
            <img src="3.png" />
        </div>
    </div>
    <div>
        <img src="animation.png" />
    </div>
</body>
</html>

  • picturn.css
    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
    body {
        text-align: center;
    }

    .container {
        width: 400px;
        height: 300px;
        overflow: hidden;
        border: thin solid black; 
        display:inline-block;
    }

    .photo {
        width: 1200px;  /* 一张图片400px，共三张 */
    /*****************************************/
        animation: switch 8s ease-out infinite;
    /*****************************************/
    }

    .photo>img {
        float: left;
        width: 400px;
        height: 300px;
    }

    @keyframes switch {
        0%, 20% {
            margin-left: 0;
        }
        27%, 47% {
            margin-left: -400px;
        }
        54%, 74% {
            margin-left: -800px;
        }
        80%, 100% {
            margin-left: 0px;
        }
    }

颜色16进制显示器

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
<!DOCTYPE html>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″/>
<meta name="robots" content="all">
<meta name="author" content="MengZe">
<title>颜色16进制显示器</title>
<style>
    .divClass{
        width:216px;
        height:160px;
        border:2px solid black;
        text-align:center;
    }
    .href{
        width:216px;
        text-align:center;
    }
</style>
</head>

<body>
<div id = "divShow" class = "divClass"></div>
<input type = "text" id = "colorInput" value = "#000000">
<button onClick = "change()">Change</button>
<div class = "href">
<a href = "http://www.atool.org/colorpicker.php">在线颜色选择器</a><br>
<a href = "http://www.atool.org/">ATOOL在线工具</a>
</div>


<script type = "text/javascript">
function change(){
    var divColor = document.getElementById("colorInput").value;
    var dDiv = document.getElementById("divShow");
    dDiv.style.background = divColor;
    //dDiv.innerHTML = divColor;
}
</script>
</body>
</html>