1.采用表格布局完成"CASIO计算器"外观设计,其中表格的每一个单元格均需要计带边框。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>计算机布局</title>
<style type="text/css">
.zi1{
font-family:"微软雅黑";
font-size:20px;
font-weight:bold;
color:#ED630A;
}
</style>
</head>
<body>
<table border="2" width="450px" height="500px" bgcolor="#aff">
<tr>
<td>
<table border="2" width="450px" height="50px">
<tr>
<td>
<img src="img/1.bmp"/>
</td>
</tr>
</table>
<table border="2" width="450px" height="100px" bgcolor="#ffffff">
</table>
<table border="2" width="450px" height="350px" cellpadding="0" cellspacing="45">
<tr>
<td width="25px" align="center" valign="middle" class="zi1">1</td>
<td width="25px" align="center" valign="middle" class="zi1">2</td>
<td width="25px" align="center" valign="middle" class="zi1">3</td>
<td width="25px" align="center" valign="middle" class="zi1">+</td>
</tr>
<tr>
<td width="25px" align="center" valign="middle" class="zi1">4</td>
<td width="25px" align="center" valign="middle" class="zi1">5</td>
<td width="25px" align="center" valign="middle" class="zi1">6</td>
<td width="25px" align="center" valign="middle" class="zi1">-</td>
</tr>
<tr>
<td width="25px" align="center" valign="middle" class="zi1">7</td>
<td width="25px" align="center" valign="middle" class="zi1">8</td>
<td width="25px" align="center" valign="middle" class="zi1">9</td>
<td width="25px" align="center" valign="middle" class="zi1">*</td>
</tr>
<tr>
<td width="25px" align="center" valign="middle" class="zi1">0</td>
<td width="25px" align="center" valign="middle" class="zi1">=</td>
<td width="25px" align="center" valign="middle" class="zi1">CE</td>
<td width="25px" align="center" valign="middle" class="zi1">/</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
2.编写程序实现"登陆页面"
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登录页面</title>
<style type="text/css">
fieldset{
width: 300px;
height: 150px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend align="center">登录页面</legend>
<table width="300px" border="1" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="200px" align="right">用户名:</td>
<td width="300px" align="left"><input type="password" name="textfild" id="textfild"/></td>
</tr>
<tr>
<td width="200px" align="right">密 码:</td>
<td width="300px" align="left"><input type="password" name="textfild" id="textfild"/></td>
</tr>
<tr>
<td align="right">类 型:</td>
<td>
<input name="radio" type="radio" id="radio" value="radio" checked="checked"/>管理员
<input name="radio" type="radio" id="radio2" value="radio2"/>普通用户
</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>
</table>
</fieldset>
</form>
</body>
</html>