HTML+CSS网页制作实例:制作联系人网页表单

武林网(www.vevb.com)文章简介：在本文中，我们将使用HTML和CSS创建一个传统手写风格的联系人表单，示例会用到初中级CSS技术来创建信纸的外观，然后使用CSS的@font-face属性将数码文字转换成手写风格。

在本文中，我们将使用HTML和CSS创建一个传统手写风格的联系人表单，示例会用到初中级CSS技术来创建信纸的外观，然后使用CSS的@font-face属性将数码文字转换成手写风格。希望本教程对你有所帮助。

我们创建的表单使用了线条纹理作为背景，投影的巧妙使用使得纸张立体感强，让人印象深刻。标题和表单区域的内容依旧使用数码文字，但是，我们用点状线取代常用的矩形表单区域，这些位置的文字选用草书字体，给大家呈现出手写的书信风格。

用Photoshop制作素材图片

在开始写代码之前，使用Photoshop来创作后面所需的素材图片。首先为背景添加杂色，数量设为：2%，选择随机和单色。

在画布中央绘制一个白色矩形，在上面画一条1像素的水平线，并用浅蓝色填充，作为信纸的背景纹理。

按住ALT键，同时按住鼠标左键进行复制，然后按住Shift键，移动复制4次，这样的信纸的纹理就做好了。

在信纸的下面图层绘制一个黑色矩形。这是用来实现信纸的卷曲投影效果的。

为矩形应用高斯模糊（Gaussian Blur），使用CMD+T（译者注：苹果电脑的键盘才有CMD键，其它键盘可使用Ctrl+T）对图像进行自由变换，鼠标右击选择扭曲（Distort）隐藏矩形底部的角。