第三章练习

^brave

于 2024-09-26 21:38:54 发布

阅读量43

点赞数

文章标签：前端 html 交互

本文链接：https://blog.csdn.net/2302_81144906/article/details/142578447

版权

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

具体代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计算器布局</title>
	</head>
	<body>
		<table width=400 border="3" align="center" bordercolor="#000000" bgcolor="#dbdbf8">
			<tr>
				<td height="30px" font-weight: bold> &nbsp;<img src="img/CASIO.bmp">
					<tr>
					<td height="60px" bgcolor="#dbdbf8"></td>
					</tr>
					<tr>
						<td height="120px">
					<table width=400 border="3" cellspacing="30px">
						<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>
						</td>
				</tr>
			</tr>
		</table>
	</body>
</html>

运行结果如下图所示：

二、编写程序实现“登入页面”。

具体代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>登录页面</title>
		<style type="text/css">
			fieldset{
				width:350px;
			}
			body{
				text-align: center;
			}
		</style>
	</head>
	<body>
		<form>
			<fieldset>
				<legend align="center">登录页面</legend>
				用户名:<input type="text" name="user"/><br />
				密&emsp;码:<input type="password" name="password"/><br />
				类&emsp;型:<input type="radio" name="style" value="guangliyuan"/>管理员
				<input type="radio" name="style" value="putongyonghu"/>普通用户<br />
				<input type="checkbox" name="a1" value="jizhumima"/>记住密码
				<input type="checkbox" name="a2" value="zidongdenglu"/>自动登录<br />
				<input type="submit" name="button" id="button" value="提交"/>
				<input type="reset" name="button2" id="button2" value="重置"/>
			</fieldset>
		</form>
	</body>
</html>

运行结果如下图所示：