利用框架frameset标签将多个页面合成在同一个网页上的简单应用

制作一个静态网站的基本页面，页面布局如下图所示。
在这里插入图片描述
在页面的A部分显示“Login”和“Register”链接，单击“Login”，在C部分显示如图2-20所示。

单击“Register”，在C部分显示如图2-21所示。

在页面的B部分显示一个链接，即作者的个人简介。单击该链接，能够在右边出现作者的个人简介。
1.首先构建布局
在这里插入图片描述
构建框架代码：
https://blog.csdn.net/Austin_/article/details/101313099
2.构建Login.html代码：

<body>
		<form>
			<table bgcolor="skyblue">
				<caption>
					<strong>Please Log In</strong>
				</caption>
				<tr>
					<td align="right">Login:</td>
					<td>
					<input type="text"/>	
					</td>
				</tr>
				<tr>
					<td>Password:</td>
					<td>
					<input type="password" />				
					</td>
				</tr>
				<tr>
					<td></td>
					<td ><input type="button" value="OK"/><input type="button" value="Forget Password" /></td>
				</tr>
			</table>
		</form>
	</body>

运行结果：
在这里插入图片描述
注意对齐的处理方法
3.Register.html代码：

	<body>
		<form action="#">
			<table bgcolor="skyblue">
				<caption>
				<strong>New Member</strong>
				</caption>
				<tr>
					<td>ID</td>
					<td><input type="number" /></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 value="A">A</option>
						<option value="B">B</option>
						<option value="C" selected="selected">C</option>
					    </select>
					</td>
				</tr>
				<tr>
					<td>Country</td>
					<td><input type="text"</td>
				</tr>
				<tr>
					<td>Email Address</td>
					<td><input type="email"</td>
				</tr>
				<tr>
					<td>Select Interest</td>
					<td>
						<input type="checkbox">Technology
						<input type="checkbox">Enterprise
						<input type="checkbox">Research
						<input type="checkbox">Government
						<input type="checkbox">People
						<input type="checkbox">Life Style
						<input type="checkbox">Opinon
						
					</td>
				</tr>
				<tr>
					<td>Question</td>
					<td>
						<select>
							<option value="A">是这样么？</option>
						    <option value="B">不是这样</option>
						    <option value="C" selected="selected">是这样吧</option>
						</select>
					</td>
				</tr>
				<tr>
					<td>Answer</td>
					<td>
						<input type="text" />
					</td>
				</tr>
				<tr>
					<td></td>
					<td><input type="submit" value="Submit Information" /><input type="reset" value="Reset Form" /></td>
				</tr>
			</table>
		</form>
	</body>

运行结果：
在这里插入图片描述
treemenu.html的主要内容：

<body>
		treemenu.html<br/>(Section B)<br />
		<a href="introduction.html">作者的个人简介</a>
	</body>

运行结果：
在这里插入图片描述
introduction.html的主要内容：

<body>
		i am a student here!<br />
		i am learning Java web now.
	</body>

整个页面的布局基本就这样.

Austin_

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

私信关注

利用框架frameset标签将多个页面合成在同一个网页上的简单应用

猜你喜欢