chrome
首先为大家展示一下我的目标（图一）和我一天的成果（图二），由于刚上手，很多东西都不懂，所以做的很慢。接下来为大家讲解我各部分都是如何实现的。
表格部分使用table标签实现。如果出现表格间距调整不好的情况，请参考如下经验。
| 床位费（元/月） | 餐饮费（元/月） | 护理费（元/月） | 合计费用（元/月） |
第一列使用特殊颜色字体。所有第一列元素使用标签包含，然后定义b的颜色即可。（b标签会自动加粗）b { color: #93c9ff;}
第一行背景颜色交替。我的做法是为每一个单元格定义一下背景颜色，大家有更好的方法欢迎留言。.head1{ background: #c1e0ff;}.head2{ background: #155cc8;}.head3{ background: #93c9ff;}.head4{ background: #c1e0ff;}.head5{ background: #93c9ff;}
第一列和最后一列浅色背景。我的做法是为每一列设置背景颜色。代码同上，这里就不贴出来了。
canvas绘制图。这个是html5比较有代表性的标签，我研究了很久。原理是一个画布，然后我们使用js在上面绘制我们想要的元素。var mycanvas = document.getElementById('myCanvasHead'); var mycontext = mycanvas.getContext('2d'); // 左侧内容 mycontext.fillStyle = '#155cc8'; mycontext.beginPath(); mycontext.moveTo(0, 0); mycontext.lineTo(22, 0); mycontext.lineTo(22, 30); mycontext.lineTo(0, 30); mycontext.lineTo(11, 15); mycontext.lineTo(0, 0); mycontext.closePath(); mycontext.fill(); // 中间内容 mycontext.fillStyle = '#155cc8'; mycontext.beginPath(); mycontext.moveTo(25, 0); mycontext.lineTo(175, 0); mycontext.lineTo(175, 30); mycontext.lineTo(25, 30); mycontext.lineTo(25, 0); mycontext.closePath(); mycontext.fill(); mycontext.font = 'bold 14px arial'; mycontext.textAlign = 'left'; mycontext.textBaseline = 'top'; mycontext.fillStyle = 'white'; mycontext.fillText(' 优惠多多 先到先得', 30, 6); // 右侧内容 mycontext.fillStyle = '#155cc8'; mycontext.beginPath(); mycontext.moveTo(178, 0); mycontext.lineTo(200, 0); mycontext.lineTo(189, 15); mycontext.lineTo(200, 30); mycontext.lineTo(178, 30); mycontext.lineTo(178, 0); mycontext.closePath(); mycontext.fill();
这个说明部分，我仍然使用canvas实现，熟练使用后，发现很好用。只需要在body中定义好标签，其他的都在js中实现。var mycanvasbody = document.getElementById('myCanvasBody'); var mycontext = mycanvasbody.getContext('2d'); // 圆角矩形 mycontext.fillStyle = '#c1e0ff'; mycontext.roundRect(0, 0, 280, 150, 10); mycontext.fill(); mycontext.font = 'bold 10px arial'; mycontext.textAlign = 'left'; mycontext.textBaseline = 'top'; mycontext.fillStyle = '#ff8000'; mycontext.fillText('活动时间:', 5, 5); mycontext.font = 'bold 6px arial'; mycontext.textAlign = 'left'; mycontext.textBaseline = 'top'; mycontext.fillStyle = 'DimGray'; mycontext.fillText('2015年3月1日起至2016年2月29日止', 5, 25); mycontext.fillStyle = '#090909'; mycontext.beginPath(); mycontext.moveTo(0, 50); mycontext.lineTo(280, 50); mycontext.closePath(); mycontext.fill(); mycontext.font = 'bold 10px arial'; mycontext.textAlign = 'left'; mycontext.textBaseline = 'top'; mycontext.fillStyle = '#ff8000'; mycontext.fillText('活动内容:', 5, 55); mycontext.font = 'bold 6px arial'; mycontext.textAlign = 'left'; mycontext.textBaseline = 'top'; mycontext.fillStyle = 'DimGray'; mycontext.fillText('1.可享受终身床位费6折优惠', 5, 75); mycontext.font = 'bold 6px arial'; mycontext.textAlign = 'left'; mycontext.textBaseline = 'top'; mycontext.fillStyle = 'DimGray'; mycontext.fillText('2.一次性缴纳一年床位费可以享受床位费9折优惠', 5, 95); mycontext.font = 'bold 6px arial'; mycontext.textAlign = 'left'; mycontext.textBaseline = 'top'; mycontext.fillStyle = 'DimGray'; mycontext.fillText('3.床位费与护理费总和每月立减1000元', 5, 115);
这里有一个需要注意的地方，就是矩形的圆角处理。细心的同学会发现我这里用的canvas实现的矩形是圆角的，其实使用了一段js来实现圆角的。CanvasRenderingContext2D.prototype.roundRect = function(x, y, w, h, r) { this.beginPath(); this.moveTo(x + r, y); this.arcTo(x + w, y, x + w, y + h, r); this.arcTo(x + w, y + h, x, y + h, r); this.arcTo(x, y + h, x, y, r); this.arcTo(x, y, x + w, y, r); this.closePath(); return this; }
以上是我对html5使用过程中的问题处理经验，希望能帮助大家。