html 表单效果//来源http://js.jirengu.com/qacoxoleji
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html 表单效果//来源http://js.jirengu.com/qacoxoleji相关的知识，希望对你有一定的参考价值。
.content {
width: 600px;
margin: 0 auto;
}
.card {
padding-bottom: 25px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
form {
margin: 1em;
}
.card>h3{
background-color: #22d0b2;
color: #fff;
padding: 0.75em;
}
.card label {
color: #75777c;
display: block;
font-weight: 500;
padding: 1em 0;
}
.card input[type=text],
.card textarea {
padding: 0.5em 0;
display: block;
border: none;
border-bottom: 1px solid #808080;
width: 100%;
}
.card input[type=text]:focus,
.card textarea {
outline: none;
}
.card .half {
float: left;
width: 50%;
padding: 1em 0;
color: #75777c;
line-height: 2;
}
.card input[type=submit] {
background-color: #00d1b2;
border: none;
color: #fff;
border-radius: 3px;
font-size: 1em;
padding: 0.5em 1em;
cursor: pointer;
}
.clearfix{
*zoom: 1;
}
.clearfix:after {
content: "";
display: block;
clear: left;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style id="jsbin-css">
.content {
width: 600px;
margin: 0 auto;
}
.card {
padding-bottom: 25px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
form {
margin: 1em;
}
.card>h3{
background-color: #22d0b2;
color: #fff;
padding: 0.75em;
}
.card label {
color: #75777c;
display: block;
font-weight: 500;
padding: 1em 0;
}
.card input[type=text],
.card textarea {
padding: 0.5em 0;
display: block;
border: none;
border-bottom: 1px solid #808080;
width: 100%;
}
.card input[type=text]:focus,
.card textarea {
outline: none;
}
.card .half {
float: left;
width: 50%;
padding: 1em 0;
color: #75777c;
line-height: 2;
}
.card input[type=submit] {
background-color: #00d1b2;
border: none;
color: #fff;
border-radius: 3px;
font-size: 1em;
padding: 0.5em 1em;
cursor: pointer;
}
.clearfix{
*zoom: 1;
}
.clearfix:after {
content: "";
display: block;
clear: left;
}
</style>
</head>
<body>
<div class="content">
<div class="card">
<h3>用户反馈表</h3>
<form action="/test" class="form" method="post">
<div>
<label for="name">姓名</label>
<input type="text" id="name" name="name">
</div>
<div>
<label for="email">邮箱</label>
<input type="text" id="name" name="email">
</div>
<div>
<label for="comment">意见及建议</label>
<textarea name="comment" id="comment" cols="10" rows="8"></textarea>
</div>
<div class="clearfix">
<div class="half">
<input type="checkbox" id="bad" name="bad">很差
<br>
<input type="checkbox" id="normal" name="normal">一般
<br>
<input type="checkbox" id="good" name="good" checked>不错
</div>
<div class="half">
<input type="radio" id="yes" name="option" value="yes">会
<br>
<input type="radio" id="no" name="option" value="no">不会
</div>
</div>
<div>
<input type="submit">
</div>
</form>
</div>
</div>
<script id="jsbin-source-css" type="text/css">.content {
width: 600px;
margin: 0 auto;
}
.card {
padding-bottom: 25px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
form {
margin: 1em;
}
.card>h3{
background-color: #22d0b2;
color: #fff;
padding: 0.75em;
}
.card label {
color: #75777c;
display: block;
font-weight: 500;
padding: 1em 0;
}
.card input[type=text],
.card textarea {
padding: 0.5em 0;
display: block;
border: none;
border-bottom: 1px solid #808080;
width: 100%;
}
.card input[type=text]:focus,
.card textarea {
outline: none;
}
.card .half {
float: left;
width: 50%;
padding: 1em 0;
color: #75777c;
line-height: 2;
}
.card input[type=submit] {
background-color: #00d1b2;
border: none;
color: #fff;
border-radius: 3px;
font-size: 1em;
padding: 0.5em 1em;
cursor: pointer;
}
.clearfix{
*zoom: 1;
}
.clearfix:after {
content: "";
display: block;
clear: left;
}
</script>
</body>
</html>以上是关于html 表单效果//来源http://js.jirengu.com/qacoxoleji的主要内容，如果未能解决你的问题，请参考以下文章