程序博客网 > 贝丽花园淘宝店

css做的表单，欢迎大神们指点！

来源：互联网发布：贝丽花园淘宝店编辑：程序博客网时间：2024/04/29 21:13

先看下效果图：

html代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表单</title>

</head>
<body>
    <div id="container">
    <h1>Form1</h1>
    <form id="form1" action="" method="post">
        <fieldset>
        <p><lable>Name</label>
        <input type="text" name="name" id="name" size="30"/>
        </p>
        <p><lable>Email</lable>
        <input type="text" name="email" id="email" size="30"/>
        </p>
        <p><lable>Website</lable>
        <input type="text" name="web" id="web" size="30"></p>
        </fieldset>
        <fieldset>
        <p><lable>Message</lable>
        <textarea name="message" id="message" cols="30" rows="10"></textarea></p>
        </fieldset>
        <p class="submit"><button type="submit">Sent</button></p>
    </form>
    </div>
</body>
</html>

css部分代码：

<style type="text/css">
body{
    background:#f8f8f8;
    font:13px Trebuchet MS, Arial, Helvetica, Sans-Serif;
    color:#333;
    line-height:160%;
    margin:0;
    padding:0;
    text-align:center;
}
#container{
    margin:0 auto;
    background:#fff;
    width:600px;
    padding:20px 40px;
    text-align:left;
    }
h1{
    font-size:200%;
    font-weight:normal;
    }
    input, textarea, {
    font:100% Trebuchet MS, Arial, Helvetica, Sans-Serif;
    line-height:160%;
    color:#333;
    }
#form1{margin:1em 0;
        padding-top:10px;
        background:url(form1/form_top.gif);
        background-repeat:no-repeat;
        background-position:center center;
}
    #form1 fieldset{
        margin:0;
        padding:0;
        border:none;
        float:left;
        display:inline;
        width:260px;
        margin-left:25px;
        }

    #form1 p{margin:.5em 0;}
    #form1 label{display:block;}
    #form1 input, #form1 textarea{
        width:252px;
        border:1px solid #ddd;
        background:#fff url(form1/form_input.gif) repeat-x;
        padding:3px;
        }

        #form1 textarea{
        height:125px;
        overflow:auto;
        }
        #form1 p.submit{
        clear:both;
        background:url(form1/form_bottom.gif) no-repeat 0 100%;
        padding:0 25px 20px 25px;
        margin:0;
        text-align:right;
        }
        #form1 button{
        width:150px;
        height:37px;
        line-height:37px;
        border:none;
        background: url(form1/form_button.gif) no-repeat 0 0;
        color:#fff;
        cursor:pointer;
        text-align:center;
        }

</style>

贝丽花园淘宝店

贝丽花园淘宝店

原创粉丝点击

热门问题 老师的惩罚人脸识别我在镇武司摸鱼那些年重生之率土为王我在大康的咸鱼生活盘龙之生命进化天生仙种凡人之先天五行春回大明朝姑娘不必设防，我是瞎子致远期货远期外汇远期远期信用证远期利率协议远期外汇市场膨体隆鼻远期感染远期合约套期保值远期和期货的区别期货合约和远期合约高远树远梦远波足下登远洋集团远洋中国远洋远洋君远洋风景远洋山水远洋城远洋船青岛远洋远洋太古里远洋天地远洋万和远洋新悦远洋国际远洋广场远洋别墅远洋7号远洋庄园远洋公司远洋装饰远洋自然远洋物流远洋七号远洋建设远洋钓鱼船远洋捕鱼远洋酒店