我们来介绍css入门，我们从基础标签介绍起，现阶段我们看到的网站大部分是div和css可以实现，今天介绍css设计调查表，和反馈表方便用户互动
我们看看代码效果
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#myform {
width: 500px;
padding: 20px;
background: #f0f0f0;
overflow:auto;
border: 1px solid #cccccc;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
-moz-box-shadow: 2px 2px 2px #cccccc; /*边框阴影 */
-webkit-box-shadow: 2px 2px 2px #cccccc;
box-shadow: 2px 2px 2px #cccccc;
}
div { margin-bottom:5px;}
label {
font-family: Arial, Verdana;
text-shadow: 2px 2px 2px #ccc;
display: block;
float: left;
font-weight: bold;
margin-right:10px;
text-align: right;
width: 160px;
line-height: 25px;
font-size: 15px;
}
.input {
font-family: Arial, Verdana;
font-size: 15px;
padding: 5px;
border: 1px solid #b9bdc1;
width: 260px;
color: #797979;
}
.button {
float: right;
margin:10px 55px 10px 0;
font-weight: bold;
line-height: 1;
padding: 6px 10px;
cursor:pointer;
color: #fff;
text-align: center;
text-shadow: 0 -1px 1px #64799e;
background: #a5b8da;
background: -moz-linear-gradient(top, #a5b8da 0%, #7089b3 100%);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#a5b8da), to(#7089b3));
border: 1px solid #5c6f91;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: inset 0 1px 0 0 #aec3e5; /* 阴影 */
-webkit-box-shadow: inset 0 1px 0 0 #aec3e5;
box-shadow: inset 0 1px 0 0 #aec3e5;
}
</style>
</head>
<body>
<form id="myform" class="rounded" method="post" action="">
<h3>娱乐大调查</h3>
<div class="field">
<label for="name">您的年龄是:</label>
<input type="text" class="input" name="name" id="name">
</div>
<div class="field">
<label for="email">喜欢的娱乐明星:</label>
<input type="text" class="input" name="email" id="email">
</div>
<div class="field">
<label for="message">喜欢的理由:</label>
<textarea class="input textarea" name="message" id="message"></textarea>
</div>
<input type="submit" name="Submit" class="button" value="提交">
</form>
</body>
</html>
2.css制作反馈表
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style>
body {
font: 14px Trebuchet MS, Arial, Helvetica, Sans-Serif;
text-align: center;
background-color: #000;
}
#myform {
margin: 0 auto;
text-align: left;
padding-top: 1.5em;
color: #246878;
width: 350px;
border: solid 1px #ddd;
background: #fbfaf4 url(//freemuban.com/js/429/bg.gif) repeat-y;
}
#myform h3 {
margin: 0 20px;
height: 28px;
text-indent: -8000px;
background: url(//freemuban.com/js/429/heading.gif) no-repeat;
}
#myform fieldset {
margin: 0;
padding: 0;
border: none;
padding-bottom: 1em;
}
#myform p {
margin: 0.6em 20px;
}
.special, #myform textarea {
width: 302px;
border: 1px solid #246878;
background: #fff;
padding: 5px 3px;
}
.radio {
width: 30px;
}
#myform textarea {
height: 125px;
overflow: auto;
}
#myform p.submit {
text-align: right;
}
#myform button {
margin: 0;
padding: 0;
text-indent: -8000px;
overflow: hidden;
width: 88px;
height: 56px;
border: none;
background: url(//freemuban.com/js/429/button.gif) no-repeat 0 0;
cursor: pointer;
text-align: left;
}
</style>
</head>
<body>
<form id="myform">
<h3>反馈表</h3>
<fieldset>
<p>姓名:
<input class="special" type="text" name="name">
</p>
<p>性别:
<input class="radio" type="radio" name="" value="">
男
<input class="radio" type="radio" name="" value="">
女 </p>
<p>邮箱:
<input class="special" type="text" name="email">
</p>
<p>网址：
<input class="special"type="text" name="web">
</p>
<p>反馈意见:
<textarea name="message" cols="30" rows="10"></textarea>
</p>
<p class="submit">
<button type="submit"></button>
</p>
</fieldset>
</form>
</body>
</html>
