通过一个简单的联系表单，通过表单对象属性选择器获取表单对象。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>设计表单样式</title> <style type="text/css"> /*清除常用标签对象的默认边框，编剧和焦点线样式*/ body,div,h1,form,fieldset,input,textarea{margin：0; padding: 0;border: 0; outline: none;} /*定义网页高度为窗口高度*/ html{height: 100%;} /*设计网页基本显示效果，如背景色，并添加渐变背景色效果*/ body{background:linear-gradient(#25303c,#728EAA); font-family: sans-serif;} /*对表单结构样式进行初步设计，添加阴影，定义背景色和浅色边框，定义表单标题样式*/ #contact{width: 430px; margin: 10px auto; padding: 20px; background: #c9d0de; border: 1px solid #e1e1e1; box-shadow: 0px 0px 8px #444; } h1{ font-size: 34px; color: #445668; text-align: center; margin: 0 0 35px 0; text-shadow: 0px 1px 0px #f2f2f2; } /*设计表单的标签文本，文本框和文本区域样式*/ label{/*标签文本样式：向左浮动，右对齐文本，定义文本投影特效*/ float: left; clear: left; margin: 11px 20px 0 0; width: 95px; text-align: left; font-size: 16px; color: #445668; text-transform: uppercase; text-shadow: 0px 1px 0px #f2f2f2; } input{/*文本框样式：固定宽和高，增加边界，定义渐变背景色，设计圆角样式*/ width: 260px; height: 35px; padding: 5px 20px 0px 20px; margin: 0 0 20px 0; background: linear-gradient(#546A7F 0%,#5E768D 20%); /* background: -Webkit-gradient(linear, left top,left bottom, 0% #546A7F,20% #5E768D); 老版写法 */ border-radius: 5px; box-shadow: 0px 1px 0px #f2f2f2; font-family: "楷体"; font-size: 16px; color: #f2f2f2; text-transform: uppercase; text-shadow: 0px -1px 0px #334f71;} input::placeholder{ color:#a1b2c3; text-shadow: 0px -1px 0px #35806b; } textarea{/*文本区域样式：固定宽和高，增加边界，定义渐变颜色，设计圆角，设计阴影特效*/ width: 260px; height: 130px; padding: 12px 20px 0px 20px; margin: 0 0 20px 0; background: linear-gradient(#546A7f 0%,#5E768D 20%); border-radius: 5px; box-shadow: 0px 1px 0px #f2f2f2; font-family: "楷体" ; font-size: 16px; color: #f2f2f2; text-transform: uppercase; text-shadow: 0px -1px 0px #334f71; } textarea::input-placeholder{ color:#a1b2c3; text-shadow: 0px -1px 0px #38506b; } input[type=submit]{ width: 120px; height: 42px; float: right; padding: 5px 10px; margin: 0 15px 0 0; box-shadow: 0px 0px 5px #999; border: 1px solid #556f8c; background: linear-gradient(#718DA9 0%,#415D79 100%); cursor: pointer; } input[disabled] {color: #aaa;} </style> </head> <body> <div id="contact"> <h1>联系表</h1> <form action="#" method="post"> <fieldset> <label for="name">昵称</label> <input type="text" id="name" disabled placeholder="请输入你的账号"/> <label for="email">Email:</label> <input type="email" id="email" placeholder="请输入你的邮箱"/> <label for="message">反馈信息</label> <textarea id="message" placeholder="请留下你的意见和建议？"></textarea> <input type="submit" value="发送信息"> </fieldset> </form> </div> </body> </html>
