网页设计与制作第三章课后习题

最新推荐文章于 2024-09-30 15:42:36 发布

2301_80792856

最新推荐文章于 2024-09-30 15:42:36 发布

阅读量130

点赞数 3

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/2301_80792856/article/details/142619673

版权

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

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计算机布局</title>
	</head>
	<body>
		<table width="50%" align="center" border="3px" bordercolor="black" bgcolor="#97998e">
			<tr height="50">
				<td ><img src="img/CASIO.bmp"align="left"/></td>
			</tr>
			<tr bgcolor="#ffffff"height="80">
				<td ></td>
			</tr>
			<tr >
				<td >
					<table width="100%"cellspacing="30px" cellpadding="3px"border="1px"bordercolor="black">
						<tr align="center">
							<td width="25%">1</td>
							<td width="25%">2</td>
							<td width="25%">3</td>
							<td width="25%">+</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>

代码运行结果：

2.编写程序实现登录页面

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>登录页面</title>
	</head>
	<body>
		<form>
			<fieldset>
				<legend align="center">登录页面</legend>
					<table width="300"border="0"align="center"cellpadding="0"cellspacing="0">
						<tr>
							<td width="100"align="right">用户名:</td>
							<td><input type="text"name="textfield"id="textfield"/></td>
						</tr>
						<tr>
							<td width="100"align="right">密&nbsp;&nbsp;&nbsp;&nbsp;码:</td>
							<td><input type="password"name="textfield2"id="textfield2"/></td>
						</tr>
						<tr>
							<td width="100"align="right">类&nbsp;&nbsp;&nbsp;&nbsp;型:</td>
							<td ><input name="radio"type="radio"id="radio"value="radio"/>管理员
								<input name="radio"type="radio"id="radio"value="radio"/>普通用户
							</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>
					
			</fieldset>
	</body>
</html>

代码运行结果：