很漂亮的CSS提交表单,大家先看看
CSS代码:
CSS Code复制内容到剪贴板
body{padding:50px100px;font:13px/150%Verdana,Tahoma,sans-serif;}input,textarea{padding:9px;border:solid1px#E5E5E5;outline:0;font:normal13px/100%Verdana,Tahoma,sans-serif;width:200px;background:#FFFFFFurl('bg_form.png')lefttoprepeat-x;background:-webkit-gradient(linear,lefttop,left25,from(#FFFFFF),color-stop(4%,#EEEEEE),to(#FFFFFF));background:-moz-linear-gradient(top,#FFFFFF,#EEEEEE1px,#FFFFFF25px);box-shadow:rgba(0,0,0,0.1)0px0px8px;-moz-box-shadow:rgba(0,0,0,0.1)0px0px8px;-webkit-box-shadow:rgba(0,0,0,0.1)0px0px8px;}textarea{width:400px;max-width:400px;height:150px;line-height:150%;}input:hover,textarea:hover,input:focus,textarea:focus{border-color:#C9C9C9;-webkit-box-shadow:rgba(0,0,0,0.15)0px0px8px;}.formlabel{margin-left:10px;color:#999999;}.submitinput{width:auto;padding:9px15px;background:#617798;border:0;font-size:14px;color:#FFFFFF;-moz-border-radius:5px;-webkit-border-radius:5px;}html代码:
XML/HTML Code复制内容到剪贴板
<!DOCTYPE><htmlxmlns="http://www.w3.org/1999/xhtml"><headprofile="http://gmpg.org/xfn/11"><title>CSS3FormDemo</title><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"/><linkrel="stylesheet"href="demo.css"type="text/css"media="all"/></head><body><formclass="form"><pclass="name"><inputtype="text"name="name"id="name"/><labelfor="name">Name<span>图</span><i>库</i></label></p><pclass="email"><inputtype="text"name="email"id="email"/><labelfor="email">E-mail<span>图</span><i>库</i></label></p><pclass="web"><inputtype="text"name="web"id="web"/><labelfor="web">Website<span>图</span><i>库</i></label></p><pclass="text"><textareaname="text"></textarea></p><pclass="submit"><inputtype="submit"value="Send"/></p></form></body></html>以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。