HTML+CSS+TABLE实现简单注册

来源:互联网 发布:作图软件app 编辑:程序博客网 时间:2024/06/07 09:50
运用HTML+CSS+TABLE实现简单注册


最终实际效果



html代码:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>注册</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="topic">
    <a>
        注册
    </a>
</div>
<div class="content">
    <form>
        <table cellpadding="0" cellspacing="0">
            <tr>
                <td colspan="3" height="30"></td>
            </tr>
            <tr>
                <td width="120px">姓   名</td>
                <td width="120px"><input type=""/> </td>
                <td width="110px">格式:中文</td>
            </tr>
            <tr>
                <td colspan="3" height="10"></td>
            </tr>
            <tr>
               <td>联系方式:</td>
               <td><input type="number"></td>
               <td>格式:11位手机</td>
            </tr>
            <tr>
                <td colspan="3" height="10"></td>
            </tr>
            <tr>
                <td>所在公司:</td>
                <td><input type="text"></td>
                <td></td>
            </tr>
            <tr>
                <td colspan="3" height="10"></td>
            </tr>
            <tr>
                <td>职务:</td>
                <td><input type="text"></td>
                <td></td>
            </tr>
            <tr>
                <td colspan="3" height="10"></td>
            </tr>
            <tr>
                <td colspan="2"><input type="button" value="提交" class="btn"/></td>
            </tr>
        </table>

    </form>
</div>
</div>
</body>
</html>


css代码:

body{
    font-family: "宋体",arial, helvetica, sans-serif;
    color: #333333;
    font-size: 12px;

}

.reg{
    width: 450px;
    height: auto;
    margin: 0 auto;
    padding-top: 100px;
}

.topic{
    background-color:greenyellow ;
    width: 450px;
    height: 54px;
    font-size: 40px ;
    color: deepskyblue;

    text-align: center;

}
.content{
    border: 1px solid#DBDBDB;
    color: #003976;
    background: #f9f9f9;
    text-align: center;
}
.btn{
    color: #ffffff;
    background-color: deepskyblue;
    width: 58px;
    height: 27px;
    border: 0;
}





0 0
原创粉丝点击