确保白色空白区域也被包含在点状图片当中,当图片重复时,依然还能维持间距和线高。(译者注:作者制作了单一的点状图,在后文中链入CSS样式表中,多个点状图排成一排就会形成图中所示的输入区域)
导出图片时要注意,所有图片都保存为背景透明的PNG-24,这是为了让图片完美叠加在背景上。
HTML结构
创建一个新的HTML文档,输入HTML5页面的文档类型(Doctype),页面标题,链接到CSS样式表以及存储表单的容器div层等基本结构。
首先为页面创建整体格式。全新的HTML5type=“email”属性可以放在第二个表单域,但除此之外,其它的语法还是基本的HTML语言。确保每个输入区域的标签(label)与其ID相对应。
CSS样式
CSS文件开始会进行简单重置,清除掉所有浏览器的默认样式,然后把整个页面的样式添加到body之中。ID为container的div层加上蓝色背景图片(lines.png)就变成了信纸。然后将投影图片(shadow.png)添加到:before的选择器中,绝对定位可使投影向信纸下居左显示,这样就信纸的投影效果就完成了。
(举报)