HTML5时代 实战PHP之Web页面CSS设计

　　【IT168专稿】在设计完表单后（请参看上篇文章实战PHP之Web页面表单设计），运行后我们只看到如下图的效果：

▲

　　可以看到，效果并不是很理想，我们接下来使用CSS3对其进行美化操作，CSS设计如下：

　　在应用样式后，可以看到效果变为如下图：
 

▲

　　接下来，我们要对每个输入框的样式进行控制，编写CSS代码如下：　　

　　接下来，我们要对每个输入框的样式进行控制，编写CSS代码如下：

　　在上面的CSS中，首先对body页面部分，使用了margin:0 auto;将整个页面设置为居中显示，同理对表单form元素也是如是操作。而input文本框和textarea输入域的大部分属性都相同，所以这里写在一起，而由于textarea文本输入域中需要有一张背景图，因此在这里使用background:url进行设置，并且指定了其no-repeat的属性。在应用上面的样式后，运行效果如下图：
 

▲

　　上面的CSS其实还是CSS2的内容，现在我们开始增加一点CSS3的特有内容，代码如下：　

　　这里，留意到添加的最后三行的代码，其作用都是为了实现圆角文本框CSS，其中border-radius:5px;是在Opera下起作用，-webkit-border-radius:5px;

　　在Chrome和Safrai下起作用，而-moz-border-radius:5px;在Firefox下起作用，运行后看到效果如下图：

▲

　　同时我们期望当用户将焦点定位在某个文本输入框时，文本框的外边框的颜色变为蓝色，以提醒用户注意，要实现这个效果的话，可以在focus样式下做文章，如下：

　　运行效果如下图：
 

▲

　　最后我们设计下自定义的提交按钮，CSS代码如下：　

　　这里，我们除了定义提交按钮的宽度和高度外，还指定了自定义的提交按钮的图片，这里用了一个小技巧，text-indent:-9999px;能去掉原先按钮本身的文字。最后，使用CSS3的hover属性，指定了opacity为0.9,即当鼠标移动到提交按钮上时显示的透明度，可惜这个属性IE是不支持的，其他大部分浏览器都支持。

       结合PHP让表单生效

　　最后，我们结合PHP让这个表单真正起作用，这个还是比较简单的，除了在form表单中新增post路径外，就是在接收表单内容页中用$_POST接收即可，如下代码所示：

　　　当然，可以在PHP的代码中，增加更多的功能，比如数据的服务端校验功能等，这里本文不再详细介绍。