纯CSS实现漂亮的提交表单
2021-05-08 21:11:49 很漂亮的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>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。 如涉及版权问题，请提交至online#300.cn邮箱联系删除。
网站建设 IT知识 IT知识教程 纯CSS实现漂亮的提交表单 
最新文章
热门文章
猜你喜欢
