- 精通HTML5+CSS3+JavaScript网页设计(视频教学版)(第2版)
- 王英英
- 243字
- 2021-03-24 01:08:48
4.3 综合实例——制作计算机报价单
利用所学的表格知识,制作如图4-9所示的计算机报价单。
![](https://epubservercos.yuewen.com/DBA090/15289821504504406/epubprivate/OEBPS/Images/Figure-P72_70299.jpg?sign=1739594418-iW0nclpP2HialeNSjypKcAuHKpuwjIJq-0-8ae73ce7181dd7d4b71ef936cc73a9f2)
图4-9 计算机报价单
具体操作步骤如下:
01 新建HTML文档,并对其简化,代码如下所示。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>完整表格标记</title> </head> <body> </body> </html>
02 保存HTML文件,选择相应的保存位置,文件名为“综合实例—制作计算机报价单.html”。
03 在HTML文档的body部分增加表格及内容,代码如下所示。
![](https://epubservercos.yuewen.com/DBA090/15289821504504406/epubprivate/OEBPS/Images/Figure-P73_129363.jpg?sign=1739594418-FNV2L1upGqXqArdS62f2veaB5geGongF-0-7cdff3f45ddc4b4007a06c584958ba63)
利用<caption>标记制作表格的标题,<th>代替<td>作为标题行单元格。可以将图片放在单元格内,即在<td>标记内使用<img>标记。
04 在HTML文档的head部分,增加CSS样式,为表格增加边框及相应的修饰,代码如下所示。
![](https://epubservercos.yuewen.com/DBA090/15289821504504406/epubprivate/OEBPS/Images/Figure-P74_129365.jpg?sign=1739594418-XjFzjSKrK478te2lQ3aD8VAMQkrIXHS1-0-9527ed87e8bd4016fc1f0f1b95ab29d7)
05 保存网页后,即可查看最终效果。