网页设计第三章习题

2301_82179289

已于 2024-09-29 13:24:33 修改

阅读量182

点赞数 2

文章标签： javascript 前端 css

于 2024-09-26 20:51:25 首次发布

本文链接：https://blog.csdn.net/2301_82179289/article/details/142577629

版权

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

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  .table-container {
    width: 200px;
    margin: auto;
    border-collapse: collapse;
  }
  .table-container td {
    border: 1px solid black;
    padding: 10px;
    text-align: center;
  }
  .table-container img {
    max-width: 100%;
    height: auto;
  }
</style>
</head>
<body>
<table class="table-container">
  <tr>
    <td><img src="../img/casio.bmp" alt="" /></td>
  </tr>
  <!-- 其他行可以按需添加 -->
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>+</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>-</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
    <td>*</td>
  </tr>
  <tr>
    <td>0</td>
    <td>=</td>
    <td>CE</td>
    <td>/</td>
  </tr>
</table>
</body>
</html>

运行结果：

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

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<fieldset>
			<legend align="center">登陆页面</legend>
			用户名：<input type="text" size="20"  />
			<br />
			密&nbsp;&nbsp;&nbsp;码：<input type="password" size="20"   />
			<br />
			类型：<input type="radio" />管理员
			<input type="radio" />普通用户
			<br />
			<input type="checkbox" /> 记住密码
			<input type="checkbox" /> 自动登录
			<br />
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<input type="submit" />
			&nbsp;&nbsp;&nbsp;&nbsp;
			<input type="reset" />
		</fieldset>
	</body>
</html>

运行结果：