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

HCJ练习（HTML/CSS/JS）

123P
45P
67P
8P

frame

frame

divFrame

divFrame

多级菜单

多级菜单

图片轮播

图片轮播

颜色16进制显示器

颜色16进制显示器

Code

HCJ练习（HTML/CSS/JS）

  • 123P

    <!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 。
    <!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

    <!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 。
    <!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

    <!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

    <!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

    
<!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

    
<!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

    <!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

    
<!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

    <!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

    <!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>

    多级菜单

    <!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

    /* 使菜单居中 */
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 。
    <!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

    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进制显示器

    <!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>

评论已关闭

Loading...
Fullscreen Image