通过一个简单的联系表单，通过表单对象属性选择器获取表单对象。
代码语言：javascript复制<!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>
