第三章课后练习 2.0-CSDN博客

本文链接：https://blog.csdn.net/2301_80403042/article/details/142731890

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

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table  border="2" bordercolorlight="#220000" bordercolordark="#000000" width="490px" height="490px" >
			<tr  height="70px">
				<td valign="center">
					<img src="img/5.bmp"  >
				</td>
			</tr >
			<tr bgcolor="aliceblue"  height="140px">
				<td>
				</td>
			</tr>
			<tr align="center" valign="middle">
				<td>
					<table border="2" bordercolor="#000000" height="263px"  width="476px" cellspacing="10px" >
						<tr align="center"  >
							<td width="80px">1</td>
							<td width="80px">2</td>
							<td width="80px">3</td>
							<td width="80px">+</td>
						</tr>
						<tr align="center">
							<td width="80px">4</td>
							<td width="80px">5</td>
							<td width="80px">6</td>
							<td width="80px">-</td>
						</tr>
						<tr align="center">
							<td width="80px">7</td>
							<td width="80px">8</td>
							<td width="80px">9</td>
							<td width="80px">*</td>
						</tr>
						<tr align="center">
							<td width="80px">0</td>
							<td width="80px">=</td>
							<td width="80px">CE</td>
							<td width="80px">/</td>
						</tr>
					</table>
				</td>
			</tr>
		</table>
	</body>
</html>

效果图：

2.采用表单编写程序实现登录页面

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>登录页面</title>
		<style>
		        .center-pre {
		            display: flex;
		            justify-content: center;
		            align-items: center;
		    
		        }
		    </style>
	</head>
	<body>
		<fieldset>
			<legend align="center">登录页面</legend>
		
	<div class="center-pre"><pre aligen="center"><form name="dengluyemian" mrthod="post" action="form_action.jsp" enctype="text/plain">
	用户名:<input type="text" name="user"  />
	密  码:<input type="password" name="password"/>
			<form name="leixing" method="post" action="form_action.jsp" enctype="text/plain">
	类 型：<input type="radio" name="类型" value="putong"/ checked>普通用户<input type="radio" name="类型" value="guanliyuan"/>管理员
	<input type="checkbox" name="n1" value="记住密码" /> 记住密码<input type="checkbox" name="n1" value="自动登录" />自动登录
	   <input type="submit" name="button" value="提交"/>  <input type="reset" value="重置"/></pre></div>
			</form>
		</form>
		</fieldset>
	</body>
</html>

效果图：