HTML5+CSS3+jQuery Mobile+Bootstrap开发APP从入门到精通(视频教学版)
上QQ阅读APP看书,第一时间看更新

4.3 综合实例——制作计算机报价单

利用所学的表格知识,制作如图4-9所示的计算机报价单。

图4-9 计算机报价单

具体操作步骤如下:


01 新建HTML文档并对其简化,代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>完整表格标记</title>
</head>
<body>
</body>
</html>

02 保存HTML文件,选择相应的保存位置,文件名为“综合实例—制作计算机报价单.html”。

03 在HTML文档的body部分增加表格及内容,代码如下:

利用<caption>标记制作表格的标题,<th>代替<td>作为标题行单元格。可以将图片放在单元格内,即在<td>标记内使用<img>标记。


04 在HTML文档的head部分增加CSS样式,为表格增加边框及相应的修饰,代码如下:

05 保存网页后,即可查看最终效果。