【web开发课后作业】 第017讲：虽千万人吾往矣 |（不懂提问，求）
div id="wrap"><h1>鱼C小信箱</h1>
<div id='form_wrap'>
<form>
<p>Hello 鱼油</p> //这个地方为什么用个P标签，没在CSS那个样式表看到对P标签做设置。所以我用的是filedset和legend。。。。难道我看错了？
<label >留言:
<textarea name="message" value="Your Message" id="message"></textarea>
</label>
<p>谢谢你的反馈哦(^_^)</p>
<label for="name">昵称: </label>
<input type="text" name="name" value="" id="name"/>
<label for="email">邮件: </label>
<input type="text" name="email" value="" id="email"/>
<input type="submit" name="submit" value="发走咯"/> //还有好心人可以解释一下input的按钮和button的区别嘛？
</form>
</div>
</div>
附上CSS表fishc.css详细
body, div, h1, h2, form, fieldset, input, textarea, footer, p {
margin: 0;
padding: 0;
border: 0;
outline: none;
}
body {
color: #7c7873;
font-family: 'YanoneKaffeesatzRegular';
background-color: #D7D7D7;
}
p {
text-shadow: 0 1px 0 #fff;
font-size: 24px;
}
#wrap {
width: 530px;
margin: 20px auto 0;
height: 1000px;
}
h1 {
margin-bottom: 20px;
text-align: center;
font-size: 48px;
text-shadow: 0 1px 0 #ede8d9;
}
#form_wrap {
overflow: hidden;
height: 446px;
position: relative;
top: 0px;
-webkit-transition: all 1s ease-in-out .3s;
-moz-transition: all 1s ease-in-out .3s;
-o-transition: all 1s ease-in-out .3s;
transition: all 1s ease-in-out .3s;
}
#form_wrap:before {
content: "";
position: absolute;
bottom: 128px;
left: 0px;
background: url('../images/before.png');
width: 530px;
height: 316px;
}
#form_wrap:after {
content: "";
position: absolute;
bottom: 0px;
left: 0;
background: url('../images/after.png');
width: 530px;
height: 260px;
}
#form_wrap.hide:after, #form_wrap.hide:before {
display: none;
}
#form_wrap:hover {
height: 776px;
top: -200px;
}
form {
background: #f7f2ec url('../images/letter_bg.png');
position: relative;
top: 200px;
overflow: hidden;
height: 200px;
width: 400px;
margin: 0px auto;
padding: 20px;
border: 1px solid #fff;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
box-shadow: 0px 0px 3px #9d9d9d, inset 0px 0px 27px #fff;
-moz-box-shadow: 0px 0px 3px #9d9d9d, inset 0px 0px 14px #fff;
-webkit-box-shadow: 0px 0px 3px #9d9d9d, inset 0px 0px 27px #fff;
-webkit-transition: all 1s ease-in-out .3s;
-moz-transition: all 1s ease-in-out .3s;
-o-transition: all 1s ease-in-out .3s;
transition: all 1s ease-in-out .3s;
}
#form_wrap:hover form {
height: 530px;
}
label {
margin: 11px 20px 0 0;
font-size: 16px;
color: #b3aba1;
text-transform: uppercase;
text-shadow: 0px 1px 0px #fff;
}
input, textarea {
font: 14px normal normal uppercase helvetica, arial, serif;
color: #7c7873;
background: none;
width: 380px;
height: 36px;
padding: 0px 10px;
margin: 0 0 10px 0;
border: 1px solid #f8f5f1;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: inset 0px 0px 1px #726959;
-webkit-box-shadow: inset 0px 0px 1px #b3a895;
box-shadow: inset 0px 0px 1px #b3a895;
}
textarea {
height: 80px;
padding-top: 14px;
}
textarea:focus, input:focus {
background: rgba(255, 255, 255, .35);
}
#form_wrap input {
position: relative;
font-family: 'YanoneKaffeesatzRegular';
font-size: 24px;
color: #7c7873;
text-shadow: 0 1px 0 #fff;
width: 100%;
text-align: center;
opacity: 0;
background: none;
cursor: pointer;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-transition: opacity .6s ease-in-out 0s;
-moz-transition: opacity .6s ease-in-out 0s;
-o-transition: opacity .6s ease-in-out 0s;
transition: opacity .6s ease-in-out 0s;
}
#form_wrap:hover input {
z-index: 1;
opacity: 1;
-webkit-transition: opacity .5s ease-in-out 1.3s;
-moz-transition: opacity .5s ease-in-out 1.3s;
-o-transition: opacity .5s ease-in-out 1.3s;
transition: opacity .5s ease-in-out 1.3s;
}
#form_wrap:hover input:hover {
color: #2ebb96;
}
.top-banner {
background-color: #555;
} <p>Hello 鱼油</p> //这个地方为什么用个P标签，没在CSS那个样式表看到对P标签做设置。所以我用的是filedset和legend。。。。难道我看错了？
在页面上不是有显示吗 input和button区别：使用 input 元素也可以设置成按钮的样式，但是在 button 元素的内部，你可以放置文本或图像，而 input 元素则不行。
页:
[1]