一.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");
//把随机数赋值给span
span.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/s/1lHo47ggLYneaufyzvmQTZA
提取码：jpc2
四.总结
在学完HTML之后对超文本标记语言有了一定运用，这次的制作结合了HTML，CSS，JS等知识，这个项目首先是需要把制作内容分解，这个因人而异，我是把它分成三大部分。第一是整个背景图，第二是div，第三是table。划分好了之后给每个属性定义值或者样式即可。其他的细节比如文字可以用span来设置文字属性。
整个项目的重点是验证码这块内容，它可以通过js代码实现，首先获取四位随机数，然后使用getElementId创建span对象，再把验证码赋值给span(使用span.innerHTML)。
其他页面地址：lzmandzcc
更多推荐
HTML制作简单的页面
发布评论