[已解决]【web开发课后作业】 第017讲：虽千万人吾往矣 |（不懂提问，求）

qiuwanzi

  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[type=text], 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[type=text]:focus {
    background: rgba(255, 255, 255, .35);
}


#form_wrap input[type=submit] {

    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[type=submit] {
    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[type=submit] {
    color: #2ebb96;
}

.top-banner {

    background-color: #555;

}

最佳答案

月排行榜 / 总排行榜

不二如是

2020-7-20 16:51:43

        <p>Hello 鱼油</p>                //这个地方为什么用个P标签，没在CSS那个样式表看到对P标签做设置。所以我用的是filedset和legend。。。。难道我看错了？

在页面上不是有显示吗

跳转到最佳答案楼层

不二如是

        <p>Hello 鱼油</p>                //这个地方为什么用个P标签，没在CSS那个样式表看到对P标签做设置。所以我用的是filedset和legend。。。。难道我看错了？

在页面上不是有显示吗

5281

input和button区别：使用 input 元素也可以设置成按钮的样式，但是在 button 元素的内部，你可以放置文本或图像，而 input 元素则不行。