(题一)效果图如下:
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>计算机布局</title>
</head>
<body>
<table width=300px border="2px" align="center" bordercolor="#000000" bgcolor="#ffdd99">
<tr>
<td height="30px" font-weight: bold> <img src="../img/CASIO.bmp">
<tr>
<td height="60px" bgcolor="#ffffff"></td>
</tr>
<tr>
<td height="120px">
<table width=300px border="2px" cellspacing="20px">
<tr align="center">
<td>1</td>
<td>2</td>
<td>3</td>
<td>+</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>
</tr>
</table>
</body>
</html>
(题二)效果图如下:
代码如下:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
fieldset{
width: 250px;
}
<meta charset="utf-8">
<title>登入界面</title>
</style>
</head>
<body>
<fieldset>
<legend align="center">登入页面</legend>
<table>
<tr>
<td align="center">用户名:</td>
<td><input type="text" name="usuer" type="text"/></td>
</tr>
<tr>
<td align="center">密 码:</td>
<td><input type="password" maxlength="10" size="10" /></td>
</tr>
<tr>
<td align="center">类 型:</td>
<td><input type="radio" name="sex" value="male"/>管理员
<input type="radio" name="sex" value="female"/>普通用户</td>
</tr>
<tr>
<td align="center"></td>
<td><input type="checkbox" name="a1" value="sing"/>记住密码
<input type ="checkbox" name="a2" value="dance"/>主动登入</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="提交"/>
<input type ="reset" name="reset"/></td>
</tr>
</table>
</fieldset>
</body>
</html>
标签:表格,代码,布局,如下,效果图,nbsp,登入,表单,交互
From: https://blog.csdn.net/H2629896520/article/details/142531859