技术开发 频道

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

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

input, textarea {

  width:439px;

  height:27px;

  background:#efefef;

  border:1px solid #dedede;

  padding:10px;

  margin
-top:3px;

  font
-size:0.9em;

  color:#3a3a3a;

  border
-radius:5px;

  
-moz-border-radius:5px;

  
-webkit-border-radius:5px;

  }

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

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


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

input:focus, textarea:focus {

  border:1px solid #97d6eb;

  }

  运行效果如下图:
 


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

#submit {

  width:127px;

  height:38px;

  background:url(images
/submit.jpg);

  text
-indent:-9999px;

  border:none;

  margin
-top:20px;

  cursor:pointer;

  }

  #submit:hover {

  opacity:
0.9;

  }

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

       结合PHP让表单生效

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

 

 $name = $_POST['name'];

  $email
= $_POST['email'];

  $message
= $_POST['message'];

  $from
= 'From: TangledDemo';

  $
to = 'contact@tangledindesign.com';

  $subject
= 'Hello';

  ?
>

 

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

0
相关文章