前端速成：双月Java之旅（week2）_day2

最新推荐文章于 2024-09-16 06:30:00 发布

若凡໌້ᮨ

最新推荐文章于 2024-09-16 06:30:00 发布

阅读量89

点赞数

本文链接：https://blog.csdn.net/weixin_53673193/article/details/125769990

版权

纯HTML编辑内容已经基本学完了。现在开始对所学内容进行运用，选择案例进行实践操作。

根据现有思路，在没有学习CSS的条件下，网页布局主要靠表格标签<table>的嵌套来实现。如上图，将网页整体布局成一个3行2列的表格。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>统一身份认证平台</title>
	</head>
	<body>
		<table width="100%" bgcolor=lightgrey>
			<tr>
				<td><img src="../img/head.png"></td>
				<td>
					<table border="1px">
						<tr><td><img src="../img/eng.png"><a href=""><font size="3">English</font></a></td></tr>
					</table>
				</td>
			</tr><tr>
				<td><img src="../img/main.png"></td>
				<td></td>
			</tr><tr align="center">
				<td colspan="2">Copyright(C)**大学版权所有<br>ICP备案号：粤ICP备 ********号</td>
				
			</tr>
		</table>
	</body>
</html>

以上是第一部分简要拆分制作表格，代码和运行结果如图。

接着是对输入信息界面做表格，然后嵌套加入原有表格。

对于局部需要做一个六行两列的表格。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>统一身份认证平台</title>
	</head>
	<body><form action="">
		<table width="100%" bgcolor=lightgrey>
			<tr>
				<td><img src="../img/head.png"></td>
				<td>
					<table border="1px">
						<tr><td><img src="../img/eng.png"><a href=""><font size="3">English</font></a></td></tr>
					</table>
				</td>
			</tr><tr>
				<td ><img src="../img/main.png" width="80%"></td>
				<td>
					<table width="100%" bgcolor="aliceblue">
						<tr>
							<td width="50%">账号登录</td>
							<td bgcolor="darkgray">其他登录方式</td>
						</tr><tr>
							<td colspan="2" width="100%">
								<input type="text" /><br />
								<input type="password" />
							</td>
							
						</tr><tr>
							<td>登录说明</td>
							<td>忘记密码</td>
						</tr><tr align="center" bgcolor="green">
							<td colspan="2" width="80%"><input type="submit" value="立即登录"></td>
						
						</tr><tr align="center">
							<td colspan="2"><img src="../img/wechat.png"></td>
							
						</tr><tr align="center">
							<td colspan="2"><img src="../img/code.png"></td>
							
						</tr>
					</table>
				</td>
			</tr><tr align="center">
				<td colspan="2">Copyright(C)**大学版权所有<br>ICP备案号：粤ICP备 ********号</td>
				
			</tr>
		</table></form>
	</body>
</html>