第三章习题

易个程序员

已于 2024-09-26 21:55:22 修改

阅读量167

点赞数 2

文章标签：前端 javascript 开发语言 html

于 2024-09-26 21:54:20 首次发布

本文链接：https://blog.csdn.net/songboy1/article/details/142578728

版权

一

做一个如图所示的“CASIO计算器”

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计算机布局</title>
	</head>
	<body>
		<table width="50%" border="1" align="center" bordercolor="#000000">
		<tr bgcolor="#ff0000" height="80px">
			<td>
				<h1>
					<img src="img/1.bmp" width="300px" height="75px"/>
				</h1>
			</td>
		</tr>
		<tr height="125px">
			<td></td>
		</tr>
	<tr>
		<td>
		<table cellspacing="50" width="100%" border="5" align="center" bgcolor="#00ff00">
		<tr align="center">
		<td width=100px>1</td>
		<td width=100px>2</td>
		<td width=100px>3</td>
		<td width=100px>+</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>
	</td>
	</tr>
	</table>
	</body>
</html>

效果如下

二

做一个登录界面如下图所示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>登录界面</title>
		<style type="text/css">
			fieldset{
				width: 700px;
			}
		</style>
	</head>
	<body>
		<form action="" method="post" enctype="multipart/form-data" name="forml" id="forml">
		<fieldset>
		<legend align="center">登录界面</legend>
		<table width="600" border="0" align="center" cellpadding="0" cellspacing="0">
		<tr>
			<td width="200" align="right">用户名:</td>
			<td><input type="text" name="textfield" /></td>
		</tr>
		<tr>
			<td width="200" align="right">密码:</td>
			<td><input type="text" name="textfield" /></td>
		</tr>
		<tr>
			<td width="200" align="right">类型:</td>
			<td>
				<input name="radio" type="radio" id="radio" value="radio" checked="checked"/>
				管理员<width="22" height="21" align="absmiddle"/>
				<input name="radio" type="radio" id="radio2" value="radio2"/>
				普通用户<width="23" height="21" align="absmiddle"/>
			</td>
		</tr>
		<tr>
			<td>
				<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="button" value2="重置"/>
			</td>
		</tr>
		</table>
		</fieldset>
		</form>
	</body>
</html>

效果如下