静态网站简单制作

制作一个简单的静态网站

总体框架:

<html>
<frameset rows="20%,80%">
	<frame src="top.html" noresize scrolling="no" name="top"></frame>
	<frameset cols="30%,70%">
		<frame src="treemenu.html" noresize scrolling="no" name="treemenu"></frame>
		<frame src="main.html" noresize scrolling="yes" name="main"></frame>
	</frameset>
</frameset>
</html>

结果展示:
在这里插入图片描述
top.html


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		top.html<br/>
			<a href="login.html" target="main">Login</a>,<br />
			<a href="register.html" target="main">Register</a><br/>
	</body>
</html>

treemeenu.html


<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
treemenu.html
<a href="introduction.html" target="main">作者的个人简介</a>

	
</html>

main.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		main.html (Section C)
	</body>
</html>

introducation.html


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		(作者的个人简介)
		<form>
	<table>
		<input type="button" value="sing a song">
        <input type="button" value="dancing">
        <input type="button" value="writing">
        <input type="button" value="eating ">
	</table>
	</form>
	</body>
</html>

结果展示:
在这里插入图片描述
login.html

<html>
<body bgcolor="#00FFFF">
	<form>
		<table>
			<caption>
				<Strong>Please Log In</Strong>
			</caption>
			<tr>
				<td align="right">Login:</td>
				<td><input type="text" name="loginInput" style="width:180px">
				</td>
			</tr>
			<tr>
				<td >Password:</td>
				<td><input type="password" name="passwordInput"
					style="width:180px">
				</td>
			</tr>
			<tr>
				<td></td>
				<td><input type="button" value="OK"> <input
					type="button" value="Forget Password"></td>
			</tr>
		</table>
	</form>
</body>
</html>

结果展示:
在这里插入图片描述
register.html

<html>
<body bgcolor="#DEE2E9">
	<form action="">
		<table>
			<caption>
				<strong>New Number</strong>
			</caption>
			<tr>
				<td>ID</td>
				<td><input type="text">
				</td>
			</tr>
			<tr>
				<td>Password</td>
				<td><input type="password">
				</td>
			</tr>
			<tr>
				<td>Re-Password</td>
				<td><input type="password">
				</td>
			</tr>
			<tr>
				<td>First Name</td>
				<td><input type="text">
				</td>
			</tr>
			<tr>
				<td>Last Name</td>
				<td><input type="text">
				</td>
			</tr>
			<tr>
				<td>Address</td>
				<td><input type="text">
				</td>
			</tr>
			<tr>
				<td>City</td>
				<td><input type="text">
				</td>
			</tr>
			<tr>
				<td>State</td>
				<td><select>
						<option>(select State)</option>
				</select></td>
			</tr>
			<tr>
				<td>Country</td>
				<td><input type="text">
				</td>
			</tr>
			<tr>
				<td>Email Address</td>
				<td><input type="text">
				</td>
			</tr>
			<tr>
				<td>Select Interest</td>
				<td><input type="checkbox">Technology <br/>
					<input type="checkbox">Enterprise <br/><input type="checkbox">Research<br/>
					<input type="checkbox">Government <br/><input type="checkbox">People<br/>
					<input type="checkbox">Life Style <br/><input type="checkbox">Opinion<br/>
				</td>
			</tr>
			<tr>
				<td>Question</td>
				<td><select>
						<option>(select Question)</option>
				</select></td>
			</tr>
			<tr>
				<td>Answer</td>
				<td><input type="text">
				</td>
			</tr>
			<tr>
				<td></td>
				<td><input type="button" value="Submit Information"> <input
					type="button" value="Reset Form"></td>
			</tr>
		</table>
	</form>
</body>
</html>

结果展示:
在这里插入图片描述

发布了101 篇原创文章 · 获赞 47 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/TONGZONGE/article/details/102665963