第三章表格布局与表单交互习题

迷茫.404

已于 2024-09-28 21:01:50 修改

阅读量211

点赞数 7

文章标签：交互

于 2024-09-28 21:01:10 首次发布

本文链接：https://blog.csdn.net/2402_87184304/article/details/142570403

版权

1.采用表格布局完成“CASIO计算器"外观设计，其中表格的每个单元格均需要设计边框

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>CASIO计算器</title>
	</head>
	<body>
		<table width="300px" height="250px" border="3" align="center" bordercolor="white" bgcolor="#808080">
			<tr>
				<td colspan="4" align="left">
					<img src="img/a.bmp"/>
				</td>
			</tr>
			<tr >
				<td colspan="4" bgcolor="white" height="30"></td>
			</tr>

		<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>
	</body>
</html>

显示效果

2.编写程序实现“登录页面”。

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>登录页面</title>
		<style type="text/css">
			fieldset{
				width: 400px;
				height: 180px;
				
			}
		</style>
	</head>
	<body>
		<form>
			<fieldset>
				<legend align="center">登录界面</legend>
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				用户名:<input type="text" name="user">
				<br />
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				密&nbsp;&nbsp;&nbsp;&nbsp;码:<input type="password" name="paw"/>
				<br />
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				类&nbsp;&nbsp;&nbsp;&nbsp;型：<input type="radio" name="a" value="管理员"/>管理员
				<input type="radio" name="a" value="普通用户"/>普通用户
				<br />
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<input type="checkbox" name="b" value="记住密码"/>记住密码
				<input type="checkbox" name="b" value="自动登录"/>自动登录
				<br />
				&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;
				<input type="submit" name="c" value="提交"/>
				&nbsp;&nbsp;&nbsp;&nbsp;<input type="reset" name="d" value="重置"/>
			</fieldset>
		</form>
	</body>
</html>