表格布局与表单交互（第三次作业）

榴莲千丞

已于 2024-09-26 12:38:37 修改

阅读量325

点赞数 11

文章标签：交互

于 2024-09-25 21:08:34 首次发布

本文链接：https://blog.csdn.net/H2629896520/article/details/142531859

版权

（题一）效果图如下：

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计算机布局</title>
	</head>
	<body>
		<table width=300px border="2px" align="center" bordercolor="#000000" bgcolor="#ffdd99">
			<tr>
				<td height="30px" font-weight: bold> &nbsp;<img src="../img/CASIO.bmp">
					<tr>
					<td height="60px" bgcolor="#ffffff"></td>
					</tr>
					<tr>
						<td height="120px">
					<table width=300px border="2px" cellspacing="20px">
						<tr align="center">
							<td>1</td>
							<td>2</td>
							<td>3</td>
							<td>+</td>
						</tr>
							<tr  align="center">
								<td>4</td>
								<td>5</td>
								<td>6</td>
								<td>-</td>
							</tr>
						<tr align="center">
							<td>7</td>
							<td>8</td>
							<td>9</td>
							<td>*</td>
						</tr>
							<tr align="center">
								<td>0</td>
								<td>=</td>
								<td>CE</td>
								<td>/</td>
						</tr>
					</table>
						</td>
				</tr>
			</tr>
		</table>
	</body>
</html>

（题二）效果图如下：

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<style type="text/css">
		fieldset{
			width: 250px;
		}
		<meta charset="utf-8">
		<title>登入界面</title>
		</style>
	</head>
	<body>
		<fieldset>
			<legend align="center">登入页面</legend>
			<table>
				<tr>
			<td align="center">用户名：</td>
			<td><input type="text" name="usuer" type="text"/></td>
				</tr>
				<tr>
			<td align="center">密&nbsp;&nbsp;&nbsp;&nbsp;码：</td>
			<td><input type="password" maxlength="10" size="10" /></td>
				</tr>
				<tr>
			<td align="center">类&nbsp;&nbsp;&nbsp;&nbsp;型：</td>
				<td><input type="radio" name="sex" value="male"/>管理员
				<input type="radio" name="sex" value="female"/>普通用户</td>
				</tr>
				<tr>
			<td align="center"></td>
				<td><input type="checkbox" name="a1" value="sing"/>记住密码
				<input type ="checkbox" name="a2" value="dance"/>主动登入</td>
			</tr>
			<tr>
				<td colspan="2" align="center">
				<input type="submit" value="提交"/>
				<input type ="reset" name="reset"/></td>
			</tr>
			</table>
			</fieldset>
	</body>
</html>