第三章课后练习

会飞的郁金香

于 2024-09-27 14:55:43 发布

阅读量167

点赞数 6

文章标签：前端 html

本文链接：https://blog.csdn.net/2401_87165094/article/details/142580329

版权

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计算机布局</title>
	</head>
	<body>
		<table width="400"border="3"cellpadding="0"cellspacing="0"bgcolor="#FFF348">
					<tr>
						<td width="400"valign="middle"align="left"><img src="img/casio.bmp"/></td>
					</tr>
					<tr>
						<td width="400"valign="middle"align="left"><br/><br/><br/></td>
					</tr>
					<table width="400"border="3"cellpadding="10px"cellspacing="24px"bgcolor="#FFF348">
						<tr>
							<td width="70"align="center"border="1">1</td>
							<td width="70"align="center"border="1">2</td>
							<td width="70"align="center"border="1">3</td>
							<td width="70"align="center"border="1">+</td>
						</tr>
						<tr>
							<td width="70"align="center"border="1">4</td>
							<td width="70"align="center"border="1">5</td>
							<td width="70"align="center"border="1">6</td>
							<td width="70"align="center"border="1">-</td>
						</tr>
						<tr>
							<td width="70"align="center"border="1">7</td>
							<td width="70"align="center"border="1">8</td>
							<td width="70"align="center"border="1">9</td>
							<td width="70"align="center"border="1">*</td>
						</tr>
						<tr>
							<td width="70"align="center"border="1">0</td>
							<td width="70"align="center"border="1">=</td>
							<td width="70"align="center"border="1">CE</td>
							<td width="70"align="center"border="1">/</td>
						</tr>
					</table>
		</table>
	</body>
</html>

2.“登录页面”

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>登录页面</title>
	</head>
	<body>
		<form>
			<fieldset align="center">
				<legend align="center">登录页面</legend>
				用户名：<input type="text" name="name"/>
				<br />
				密  码：<input type="password" name="password"/>
				<br />
				类型：<input type="radio" name="name" value="管理员"/>管理员
					<input type="radio" name="name" value="普通用户"/>普通用户
				<br />
				<input type="checkbox" name="n1"/>记住密码
				<input type="checkbox" name="n2"/>自动登录
				<br />
				<input type="submit" value="提交"/>
				<input type="reset"/>
			</fieldset>
		</form>
	</body>
</html>