一.HTML页面制作代码部分
<html><head><meta charset="utf-8"><title>Music Login Form</title><!--css代码声明--><style type="text/css">//div的设置#showdiv{width: 450px;height: 530px;border: solid 2px grey;border-radius: 10px;/*margin: auto;*/margin-top: 20px;margin-left: 350px;}//表格的设置table{margin: auto;color: white;font-family: "Consolas";margin-top: 20px;}//特殊文字的设置span{font-size: 13px;}//验证码设置#codeSpan{font-size: 20px;}//添加背景图body{background: url(img/backgroud.jpg);background-repeat: no-repeat;background-size: cover;}//设置行高tr{height: 35px;}//设置text属性框input[type=text]{border-radius: 10px;}//设置password属性框input[type=password]{border-radius: 10px;}//设置标题样式h3{color: white;font-family: "Brush Script MT";font-size: 30px;}</style><!--js代码声明--><script type="text/javascript">function creatCode(){//获得四位随机数var code=Math.floor(Math.random()*9000+1000);//获取span对象var span=document.getElementById("codeSpan");//把随机数赋值给spanspan.innerHTML=code;}</script></head><body onload="creatCode()"><h3 align="center"><span style="color: orange;font-size: 30px;">M</span>usic<span style="color: orange;font-size: 30px;">L</span>ogin<span style="color: orange;font-size: 30px;">F</span>orm</h3><div id="showdiv"><form action="#"><table><tr ><td width="50px">Usename：</td><td width="300px"><input type="text" name="uname" id="uname" value="" /><span id="" style="color: red">*Within ten words</span></td></tr><tr ><td>Password：</td><td ><input type="password" name="pwd" id="pwd" value="" /></td></tr><tr ><td>Confirm：</td><td ><input type="password" name="confirm" id="confirm" value="" /></td></tr><tr ><td>Tel：</td><td > <input type="text" name="num" id="num" value="" /></td></tr><tr ><td>E-Mail：</td><td ><input type="text" name="mail" id="mail" value="" /></td></tr><tr><td>Gender：</td><td >F<input type="radio" name="sex" id="" value="1" checked="checked"/>M<input type="radio" name="sex" id="" value="0" /></td></tr><tr><td>Native Place：</td><td ><select name="address"><option value="0">--Choices--</option><option value="1">北京</option><option value="2">上海</option><option value="3">广州</option><option value="4">深圳</option><option value="5">香港</option><option value="5">南昌</option><option value="6">赣州</option><option value="7">瑞金</option><option value="8">西安</option></select></td></tr><tr ><td>Hobby：</td><td ><input type="checkbox" name="" id="" value="" />Game <input type="checkbox" name="" id="" value="" />Guitar<input type="checkbox" name="" id="" value="" />basketball<br /><input type="checkbox" name="" id="" value="" />Music<input type="checkbox" name="" id="" value="" />Movie <input type="checkbox" name="" id="" value="" />Running</td></tr><tr ><td>Self-introduction：</td><td ><textarea name="intro" rows="5" cols="30"></textarea></td></tr><tr > <td>Identtifying code：</td><td ><input type="text" name="code" id="code" value="" /><span id="codeSpan" onclick="creatCode()" style="background: url(img/code.jpg.gif);color: black;"></span></td></tr><tr ><td colspan="2" align="center"><input type="checkbox" name="agree" id="" value="1" /><b>Do you agree the company agreement?</b></td></tr><tr ><td colspan="2" align="center"><input type="submit" name="" id="" value="Register" /></td></tr></table></form></div></body>
</html>
二.页面效果
三.制作过程中的材料
链接：https://pan.baidu.com/s/1lHo47ggLYneaufyzvmQTZA
提取码：jpc2
四.总结
在学完HTML之后对超文本标记语言有了一定运用，这次的制作结合了HTML，CSS，JS等知识，这个项目首先是需要把制作内容分解，这个因人而异，我是把它分成三大部分。第一是整个背景图，第二是div，第三是table。划分好了之后给每个属性定义值或者样式即可。其他的细节比如文字可以用span来设置文字属性。
整个项目的重点是验证码这块内容，它可以通过js代码实现，首先获取四位随机数，然后使用getElementId创建span对象，再把验证码赋值给span(使用span.innerHTML)。
其他页面地址：lzmandzcc.com
