第三章 课后习题

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>计算机布局</title>
		<style type="text/css">
			.zi1{
			font-family:"微软雅黑";
			font-size:20px;
			font-weight:bold;
			color:#ED630A;
		}
		</style>
		
	</head>
	<body>
		<table border="2" width="450px" height="500px" bgcolor="#aff">
			<tr>
				<td>
					<table border="2" width="450px" height="50px">
						<tr>
							<td>
								<img src="img/1.bmp"/>
							</td>
						</tr>
					</table>
					<table border="2" width="450px" height="100px" bgcolor="#ffffff">
					</table>
					<table border="2" width="450px" height="350px" cellpadding="0" cellspacing="45">
						<tr>
							<td width="25px" align="center" valign="middle" class="zi1">1</td>
							<td width="25px" align="center" valign="middle" class="zi1">2</td>
							<td width="25px" align="center" valign="middle" class="zi1">3</td>
							<td width="25px" align="center" valign="middle" class="zi1">+</td>
						</tr>
						<tr>
							<td width="25px" align="center" valign="middle" class="zi1">4</td>
							<td width="25px" align="center" valign="middle" class="zi1">5</td>
							<td width="25px" align="center" valign="middle" class="zi1">6</td>
							<td width="25px" align="center" valign="middle" class="zi1">-</td>
						</tr>
						<tr>
							<td width="25px" align="center" valign="middle" class="zi1">7</td>
							<td width="25px" align="center" valign="middle" class="zi1">8</td>
							<td width="25px" align="center" valign="middle" class="zi1">9</td>
							<td width="25px" align="center" valign="middle" class="zi1">*</td>
						</tr>
						<tr>
							<td width="25px" align="center" valign="middle" class="zi1">0</td>
							<td width="25px" align="center" valign="middle" class="zi1">=</td>
							<td width="25px" align="center" valign="middle" class="zi1">CE</td>
							<td width="25px" align="center" valign="middle" class="zi1">/</td>
						</tr>
					</table>
				</td>
			</tr>
		</table>
	</body>
</html>

2.编写程序实现"登陆页面"

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>登录页面</title>
		<style type="text/css">
			fieldset{
				width: 300px;
				height: 150px;
			}
		</style>
	</head>
	<body>
		<form>
			<fieldset>
				<legend align="center">登录页面</legend>
				<table width="300px" border="1" align="center" cellpadding="0" cellspacing="0">
					<tr>
						<td width="200px" align="right">用户名:</td>
						<td width="300px" align="left"><input type="password" name="textfild" id="textfild"/></td>
					</tr>
					<tr>
						<td width="200px" align="right">密&nbsp;&nbsp;&nbsp;&nbsp;码:</td>
						<td width="300px" align="left"><input type="password" name="textfild" id="textfild"/></td>
					</tr>
					<tr>
						<td align="right">类&nbsp;&nbsp;&nbsp;&nbsp;型:</td>
						<td>
							<input name="radio" type="radio" id="radio" value="radio" checked="checked"/>管理员
							<input name="radio" type="radio" id="radio2" value="radio2"/>普通用户
						</td>
					</tr>
					<tr>
						<td colspan="2" align="center">
							<input type="checkbox" name="checkbox" id="checkbox"/>记住密码
							<input type="checkbox" name="checkbox2" id="checkbox2"/>自动登录
						</td>
					</tr>
					<tr>
						<td colspan="2" align="center">
							<input type="submit" name="button" id="button" value="提交"/>
							<input type="reset" name="button2" id="button2" value="重置"/>
						</td>
					</tr>
				</table>
			</fieldset>
		</form>
	</body>
</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值