current position:Home>HTML makes simple pages

HTML makes simple pages

2022-01-26 22:55:03 #HashMap#

One .HTML Page making code part

<html>
	<head>
		<meta charset="utf-8">
		<title>Music Login Form</title>
		<!--css Code declaration -->
		<style type="text/css">
		//div Set up 
			#showdiv{
				width: 450px;
				height: 530px;
				border: solid 2px grey;
				border-radius: 10px;
				/*margin: auto;*/
				margin-top: 20px;
				margin-left: 350px;
			}
			// Table settings 
			table{
				margin: auto;
				color: white;
				font-family: "Consolas";
				margin-top: 20px;
			}
			// Setting of special text 
			span{
				font-size: 13px;
			}
			// Verification code setting 
			#codeSpan{
				font-size: 20px;
			}
			// Add background 
			body{
				background: url(img/backgroud.jpg);
				background-repeat: no-repeat;
				background-size: cover;
			}
			// Set row height 
			tr{
				height: 35px;
			}
			// Set up text Property box 
			input[type=text]{
				border-radius: 10px;
			}
			// Set up password Property box 
			input[type=password]{
				border-radius: 10px;
			}
			// Set the title style 
			h3{
				color: white;
				font-family: "Brush Script MT";
				font-size: 30px;
			}
		</style>
		<!--js Code declaration -->
		<script type="text/javascript">
			function creatCode(){
				// Get a four digit random number 
				var code=Math.floor(Math.random()*9000+1000);
				// obtain span object 
				var span=document.getElementById("codeSpan");
				// Assign a random number to 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"> Beijing </option>
								<option value="2"> Shanghai </option>
								<option value="3"> Guangzhou </option>
								<option value="4"> Shenzhen </option>
								<option value="5"> Hong Kong </option>
								<option value="5"> nanchang </option>
								<option value="6"> Ganzhou </option>
								<option value="7"> ruijin </option>
								<option value="8"> Xi'an </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>

Two . Page effects

 Insert picture description here

3、 ... and . Materials in the manufacturing process

link :https://pan.baidu.com/s/1lHo47ggLYneaufyzvmQTZA
Extraction code :jpc2

Four . summary

 At the end of the course HTML After that, I made some use of hypertext markup language , This production combines HTML,CSS,JS Such as knowledge , This project first needs to decompose the production content , This is different from person to person , I divide it into three parts . The first is the whole background picture , The second is div, The third is table. After partitioning, define values or styles for each attribute . Other details such as text can be used span To set text properties .
 The whole project focuses on the content of verification code , It can go through js Code implementation , First, get the four bit random number , And then use getElementId establish span object , Then assign the verification code to span( Use span.innerHTML).

copyright notice
author[#HashMap#],Please bring the original link to reprint, thank you.
https://en.cdmana.com/2022/01/202201262255002783.html

Random recommended