html to create a simple cloud sucking cat web page

What I do is cloud sucking cat web page, which is mainly divided into the realization of login interface, registration interface, personal information page and main interface.
The following is the login interface made by using the form:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Login interface</title>
</head>
<body>
<form>
	<p>
	User name
	<input type="text">
	</p>
	<p>
	Password&nbsp;&nbsp;&nbsp;
	<input type="password"><a href="http://www.taobao.com" target="_blank">Forget password</a>
	</p>
	<p>
	Gender&nbsp;&nbsp;&nbsp;
	<input name="Gender" type="radio" >male
	<input name="Gender" type="radio" >female
	</p>
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" value="Sign in" ><input type="reset" value="Reset" >&nbsp;&nbsp;<a href="http://www.taobao.com" target="_blank">register</a>
	</p>
</form>	
</body>
</html>

The effect picture is as follows:

Then the following is the registration interface:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>form</title>
</head>

<body>
<form>
	<p>
	User name
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text">
	</p>
	<p>
	Input password&nbsp;&nbsp;&nbsp;
	<input type="password">
	</p>
	<p>
	Confirm password&nbsp;&nbsp;&nbsp;
	<input type="password">
	</p>
	<p>
date of birth:
	<input type="text">year
	<select value="bmon">
	<option value="">Select month</option>
	<option value="1">1month</option>
	<option value="2">2month</option>
	<option value="3">3month</option>
	<option value="4">4month</option>
	<option value="5">5month</option>
	<option value="6">6month</option>
	<option value="7">7month</option>
	<option value="8">8month</option>
	<option value="9">9month</option>
	<option value="10">10month</option>
	<option value="11">11month</option>
	<option value="12">12month</option>
	</select>
	</p>
	<p>
Fill in email:<input type="email">
	</p>

	<p>
Lucky points:
	<input type="number" value="1" max="15" min="10" step="1">
	</p>
		<p>
	Gender&nbsp;&nbsp;&nbsp;
	<input name="Gender" type="radio" >male
	<input name="Gender" type="radio" >female
	</p>
	<p>
	hobby&nbsp;&nbsp;&nbsp;
	<input type="checkbox" name="hobby" >Basketball
	<input type="checkbox" name="hobby" >Code
	<input type="checkbox" name="hobby" >Sucking the cat
	<input type="checkbox" name="hobby" >woman
	</p>
</form>	
</body>
</html>

The effect is as follows:

The following is the main interface:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Cloud sucking cat</title>
</head>
<body>
	<h2>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Cloud sucking cat&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;More</h2>
<hr/>
	<p>
search
	<input type="search">
	<input type="button" value="Submission" ><input type="reset" value="Reset" >
	</p>
<ul>
	<li>
	<img src="C:\004.jpg" alt="Short cat" title="Take me if you like">
	<p>Recommended activities, original music T List</p>
	</li>
	<li>
	<img src="C:\005.jpg" alt="Short cat" title="Take me if you like">
	<p>Recommended programs:< TATmusic>Laughter and attack</p>
	</li>	
	<li>
	<img src="C:\003.jpg" alt="Short cat" title="Take me if you like">
	<p>Recommended song list: continue to love Zhang Guorong</p>
	</li>
</ul>
</body>
</html>
	<p>
Upload file:
	<input type="file">
	</p>
Real-time hotspot
<ul>
	<li><a href="http://www.taobao.com" target="_blank">1Us men's basketball team Olympic list	553ten thousand</a></li>
	<li><a href="http://www.taobao.com" target="_blank">2Express company returns to work	384ten thousand</a></li>
	<li><a href="http://www.taobao.com" target="_blank">3The little woman pulled out	380ten thousand</a></li>
	<li><a href="http://www.taobao.com" target="_blank">4The forest wolf26Score three points	370ten thousand</a></li>
<li><a href="http://www.taobao.com" target="_blank">5Female forensic medicine of Datang	249ten thousand</a></li>
<li><a href="http://www.taobao.com" target="_blank">6Phuket speedboat collision	207ten thousand</a></li>
<li><a href="http://www.taobao.com" target="_blank">7Wang Yibo's back cover is new	206ten thousand</a></li>
<li><a href="http://www.taobao.com" target="_blank">8Hanyang fangcang hospital opens new	203ten thousand</a></li>
<li><a href="http://www.taobao.com" target="_blank">9Alibaba suing merchants	132ten thousand</a></li>
<li><a href="http://www.taobao.com" target="_blank">10Return to work epidemic prevention code	117ten thousand</a></li>
<li><a href="http://www.taobao.com" target="_blank">11Parasite wins best script	99ten thousand</a></li>
<li><a href="http://www.taobao.com" target="_blank">12Air China adjusts China US routes	94ten thousand</a></li>
<li><a href="http://www.taobao.com" target="_blank">13Iran satellite launch failure	90ten thousand</a></li>
<li><a href="http://www.taobao.com" target="_blank">14Tan songyun makes a statement	89ten thousand</a></li>
<li><a href="http://www.taobao.com" target="_blank">15Statement of studio Yang Zi	84ten thousand</a></li>
	</ul>

The renderings are as follows:


Here's personal information:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>form</title>
</head>

<body>
<table border="2">
<tr>
	<td colspan="2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Personal information</td>
</tr>	
<tr>
	<th>User name</th>
	<th>Mouse</th>
</tr>
<tr>
	<th>Birthday</th>
	<th>00/01/02</th>
</tr>
<tr>
	<th>Gender</th>
	<th>male</th>
</tr>
<tr>
	<th>hobby</th>
	<th>female</th>
</tr>
<tr>
	<th>Lucky number</th>
	<th>2</th>
</tr>
<tr>
	<th>mailbox</th>
	<th>123456</th>
</tr>
</table>
</body>
</html>

The renderings are as follows:

Pictures and related resources are easy to climb down with reptiles.

Published 19 original articles, won praise 6, visited 5852
Private letter follow

Posted on Wed, 12 Feb 2020 08:37:16 -0800 by Smee