大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元售后保障童叟无欺

一.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&nbsp;
							<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&nbsp;
							<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

发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/193087.html原文链接：https://javaforall.cn

【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛

【官方授权正版激活】： 官方授权正版激活支持Jetbrains家族下所有IDE 使用个人JB账号...