代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文本框</title> <link rel="stylesheet" href="css/textarea.css"> <link rel="stylesheet" href="css/public.css"> </head> <body> <div class="box"> <form method="post" name="List" class="listbox"> <ul> <li><h><b>联系我们</b></h> <p>*表示必填项</p> </li> <li><label for="name">姓名:</label> <input type="text" name="name" placeholder="Sunbest" required/> <span class="form-hint">正确格式为:6-18个字符,可使用字母,数字,下划线,需以字母开头</span> </li> <li><label for="email">电子邮件:</label> <input type="email" name="email" placeholder="Sayingforever@163.com" required/> <span class="form-hint">正确格式为:Sayingforever@163.com</span> </li> <li><label for="website">网站:</label> <input type="url" name="website" placeholder="http://www.amonyous.com" required/> <span class="form-hint">正确格式为:http://www.amonyous.com</span> </li> <li><label for="message">留言:</label> <textarea type="text" name="message" rows="6" cols="40" required></textarea> </li> <li> <button class ="submit" value="提交" type="submit" >提交</button> </li> </ul> </form> </div> </body> </html>---------------CSS-----------------
.box{width:745px; height:455px; background:#f1f1f1; margin:20px auto; position:relative;} h{font-size:18px; font-weight:bold; position:absolute; top:-35px; left:22px; display:inline-block; float:left;} p{color:#d45252; float:right; font-size:12px; position:absolute; top:-30px; right:22px;} *:focus{outline:none;} .listbox li{border-bottom:1px solid #dfdfdf; position:relative;} .listbox li:last-child{border-bottom:1px solid #777;} .listbox{width:720px; height:370px; border-top:1px solid #777777; position:absolute; top:62px; left:10px;} .listbox label{width:155px; margin-top:22px; margin-left:22px; display:inline-block; font-size:14px;} .listbox input{width:220px; height:30px; display:inline-block; margin-top:12px; margin-bottom:12px; border:1px solid #aaa; padding:0px 5px; box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset; background:#fff url(../images/red_asterisk.png) no-repeat 98% center; border-radius:2px; padding-right:30px; -moz-transition: padding .25s; -webkit-transition: padding .25s; -o-transition: padding .25s; transition: padding .25s; } .form-hint{background:#d45252; font-size:12px; position:absolute; display:none; color:white; line-height:30px; border-radius:3px; margin-left:8px; padding:1px 6px; margin-top:16px;} .form-hint::before{content:"\25C0"; color:#d45252; position:absolute; top:1px; left:-6px; } .listbox textarea{margin-top:12px; margin-bottom:20px; width:300px; vertical-align:top; border-radius:2px; box-shadow:0 10px 15px #eee inset; background: #fff url(../images/red_asterisk.png) no-repeat 98% center; } /*-----submit按钮--------*/ .submit{color:white; border-radius:3px; margin-left:178px; background-color:#559722; border:1px solid #509111; margin-bottom:12px; margin-top:12px; width:68px; height:30px; background:linear-gradient(top, #65ad2d ,#5b992b); background: -webkit-gradient(linear, left top, left bottom, from(#68b12f), to(#50911e)); background: -webkit-linear-gradient(top, #68b12f, #50911e); background: -moz-linear-gradient(top, #68b12f, #50911e); background: -ms-linear-gradient(top, #68b12f, #50911e); background: -o-linear-gradient(top, #68b12f, #50911e);} .submit:hover{opacity:0.8;cursor:pointer;} .submit:active{box-shadow:0px 0px 10px 5px #356b0b inset; -webkit-box-shadow:0 0 10px 5px #356b0b inset ; -moz-box-shadow: 0 0 10px 5px #356b0b inset; -ms-box-shadow: 0 0 10px 5px #356b0b inset; -o-box-shadow: 0 0 10px 5px #356b0b inset; } /* === HTML5 validation styles === */ .listbox input:required:valid, .listbox textarea:required:valid { /*有效时input框样式*/ box-shadow: 0 0 5px #5cd053; border-color: #28921f; background:#fff;} .listbox input:required:valid + .form-hint {background:#28921f;}/*有效时提示框变绿*/ .listbox input:required:valid + .form-hint::before{color:#28921f;} /*=====HTML5 click styles====*/ .listbox input:focus + .form-hint {display: inline;} /*点击出现提示框*/ .listbox input:focus,.listbox textarea:focus{ /*点击出现加长*/ border:1px solid #b03535; box-shadow:0px 0px 4px #e5adad; padding-right:60px; } .listbox input:focus:invalid, .listbox textarea:focus:invalid { /*无效时input框样式*/ background: #fff url(../images/invalid.png) no-repeat 98% center; box-shadow: 0 0 5px #d45252; border-color: #b03535;}
主要知识点
1)在页面上画一个按钮
1.<input type="button">如果你不写javascript的话,按下去什么也不会发生。
2.<input type="submit">这样的按钮用户点击之后会自动提交 form,除非你写了javascript阻止它。
3.<button type="submit"></button>这个按钮放在 form 中也会点击自动提交,比前两个的优点是按钮的内容不光可以有文字,还可以有图片等多媒体内容。
4.<a><img><span><div>等其他标签。图片把它伪装成一个按钮。
2)伪类与伪元素
1.伪类选择器使用:单冒号 如h:before{};
2.伪元素选择器使用::双冒号 如form-hint::before{};
3)CSS选择器
1. 加号(+):相邻同胞选择器
如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器(Adjacent sibling selector)。
例如,如果要增加紧接在 h1 元素后出现的段落的上边距,可以这样写:h1 + p{margin-top : 10px ; }
2. :valid选择器
:valid 选择器在表单元素的值需要根据指定条件验证时设置指定样式。( :valid 选择器只作用于能指定区间值的元素,例如 input 元素中的 min 和 max 属性,及正确的 email 字段, 合法的数字字段等)。
3. :invalid选择器
:invalid 选择器用于在表单元素中的值是非法时设置指定样式。
注意: :invalid 选择器只作用于能指定区间值的元素,例如 input 元素中的 min 和 max 属性,及正确的 email 字段, 合法的数字字段等。
4. :required选择器
:required 选择器在表单元素是必填项时设置指定样式。
表单元素可以使用 required 属性来设置必填项。
注意: :required 选择器只适用于表单元素: input, select 和 textarea。
5. 浏览器兼容
-moz-对应 Firefox,
-webkit-对应 Safari and Chrome
-o- for Opera
-ms- for Internet Explorer
现在最新版的浏览器基本都支持css3 基本都不用写前缀 ,写前缀是为了向前兼容老版本的浏览器而已
具体兼容情况查询:http://caniuse.com/