1.HTML,实现如图11-12所示页面效果。要求使用CSS样式表统一定table 和td标记样式,分别如下:
table标记样式:边框为8px、线型为双线、颜色为#0000两个f
td标记样式:边框为lpx、线型为solid、颜色为black、水平居中对齐。
两个嵌套表格背景颜色分别为#三个fee 和#三个fe
外表宽度为300px、居中对齐、单元间距和单元格边距均为0。
两个子表宽度为80%、居中对齐、边框为1px。
2.采用表格布局完成CASIO 计算器外观设计,其中表格的每一个单元格均需要补带边框,效果如图11-13所示。
好搞
计算器
<!DOCTYPE html>
<html lang="en">
<head>
<title>CASIO计算器</title>
<style>
table {
border-collapse: collapse;
margin: 0 auto;
}
td {
border: 1px solid black;
padding: 10px;
text-align: center;
font-size: 20px;
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
#display {
background-color: #d9d9d9;
font-size: 30px;
font-weight: bold;
text-align: right;
padding-right: 10px;
}
#clear {
background-color: #ff6666;
color: white;
font-weight: bold;
}
#equals {
background-color: #66cc66;
color: white;
font-weight: bold;
}
#operators td {
background-color: #b3b3b3;
font-weight: bold;
}
#numbers td {
background-color: #e6e6e6;
}
</style>
</head>
<body>
<table>
<tr>
<td colspan="4" id="display">0</td>
</tr>
<tr id="operators">
<td>AC</td>
<td>+/-</td>
<td>%</td>
<td>/</td>
</tr>
<tr class="numbers">
<td>7</td>
<td>8</td>
<td>9</td>
<td>*</td>
</tr>
<tr class="numbers">
<td>4</td>
<td>5</td>
<td>6</td>
<td>-</td>
</tr>
<tr class="numbers">
<td>1</td>
<td>2</td>
<td>3</td>
<td>+</td>
</tr>
<tr class="numbers">
<td colspan="2">0</td>
<td>.</td>
<td id="equals">=</td>
</tr>
</table>
</body>
</html>