网页设计第三章课后习题

2401_87136665

已于 2024-09-30 23:22:14 修改

阅读量290

点赞数 7

文章标签： chrome html

于 2024-09-26 13:01:40 首次发布

本文链接：https://blog.csdn.net/2401_87136665/article/details/142553156

版权

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

<!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><img src="img/微信图片_20240926124909.bmp" alt="" /></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>

2.编写程序实现如图所示的“登录页面”

代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
	    <style>
	        .center-div {
	            width: 400px; 
	            margin: 50px auto; 
	            padding: 20px;
	            border: 1px solid #ccc; 
	        }
	    </style>
</head>
<body>
	<div class="center-div">
    <form>
        <fieldset>
            <legend>登录页面</legend>
            <label for="username">用户名：</label>
            <input id="username" name="username" type="text" required/><br/>

            <label for="password">密码：</label>
            <input id="password" type="password" name="password" required/><br/>

            <label>类型：</label>
            <input type="radio" id="admin" name="type" value="admin"/><label for="admin">管理员</label>
            <input type="radio" id="user" name="type" value="user"/><label for="user">用户</label><br/>

            <input type="checkbox" id="remember" name="remember"/><label for="remember">记住密码</label>
            <input type="checkbox" id="autoLogin" name="autoLogin"/><label for="autoLogin">自动登录</label><br/>

            <input type="submit" name="submit" value="提交"/>
            <input type="reset" name="reset" value="重置"/>
        </fieldset>
    </form>
	  </div>
</body>
</html>

效果图如下