第三章表格布局与表单交互练习

最新推荐文章于 2024-09-28 20:37:23 发布

说谎的木偶

最新推荐文章于 2024-09-28 20:37:23 发布

阅读量41

点赞数 1

文章标签：交互前端

本文链接：https://blog.csdn.net/2301_82186449/article/details/142619374

版权

示例代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CASIO计算器</title>
	</head>
	<body>
		<table width="400"border="3"cellpadding="0"cellspacing="0"bgcolor="#ffffff">
			<tr>
				<td width="400"valign="middle"align="left">CASIO.</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="#ffffff">
				<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>

运行结果如下：

代码示例如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>登录页面</title>
		<style type="text/css">
		body{text-align:center;}
		fieldset{
		width:400px;
		}
		</style>
	</head>
	<body>
		<form>
		<fieldset>
			<legend>登录页面</legend>
			<tr>
				用户名：<td><input name="username" type="text"/></td><br/>
			</tr>
			<tr>
				密&nbsp;&nbsp;&nbsp;&nbsp;码：
				<td><input type="password" name="password"/></td><br/>
			</tr>
			<tr>
				类&nbsp;&nbsp;&nbsp;&nbsp;型：
				<td><input type="radio" name="gly"/>管理员
					<input type="radio" name="ptyh" />普通用户<br/>
					<input type="checkbox" name="jzmm"/>记住密码
					<input type="checkbox" name="zddl"/>自动登录<br/>
				</td>
			</tr>
			<tr>
				<input type="submit" name="submit" value="提交"/>
				<input type= "reset" name="reset" valule="重置"/>
			</tr> 
		</fieldset>
		</form>
	</body>
</html>

运行结果如下：