世纪佳缘案例(第4天)

效果图

在这里插入图片描述
案例

<body>
    <h2 align="left" > 世纪佳缘相亲网 </h2>

    <form action="">
        <table align="left" border="0" cellspacing="0" cellpadding="5" >
            <tr><!--性别-->
                <td>性别</td>
                <td>
                    <label for="nan"><img src="../练习图片/世纪佳缘案例/nan.jpeg" width="15" height="16" />男</label><input type="radio" name="sex" id="nan" />
                    &nbsp;&nbsp;
                    <label for="nv" ><img src="../练习图片/世纪佳缘案例/nv.jpeg"  width="15" height="16" />女</label><input type="radio" name="sex" id="nv" />
                </td>          
            </tr>
            <tr><!--生日-->
                <td>生日</td>
                <td>
                    <select>
                        <option selected>请选择-年</option>
                        <option>2000</option>
                        <option>2001</option>
                        <option>2002</option>
                        <option>2003</option>
                        <option>2004</option>
                        <option>2005</option>
                    </select>

                    <select>
                        <option selected>请选择-月</option>
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                        <option>5</option>
                        <option>6</option>
                        <option>7</option>
                        <option>8</option>
                        <option>9</option>
                        <option>10</option>
                        <option>11</option>
                        <option>12</option>
                    </select>

                    <select>
                        <option selected>请选择-日</option>
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                    </select>
                </td>
            </tr>
            <tr><!--地区-->
                <td>地区</td>
                <td>
                    <select>
                        <option selected>请选择-地区</option>
                        <option>北京</option>
                        <option>上海</option>
                        <option>广州</option>
                        <option>深圳</option>
                    </select>
                </td>
            </tr>
            <tr><!--婚姻状况-->
                <td>婚姻状况</td>
                <td>
                    <label for="sta1">未婚</label><input type="radio" name="station" id="sta1" />
                    <label for="sta2">已婚</label><input type="radio" name="station" id="sta2" />
                    <label for="sta3">离异</label><input type="radio" name="station" id="sta3" />          
                </td>
            </tr>
            <tr><!--学历-->
                <td>学历</td>
                <td>
                    <select>
                        <option selected>请选择-学历</option>
                        <option>幼儿园</option>
                        <option>小学</option>
                        <option>初中</option>
                        <option>高中</option>
                        <option>本科</option>
                        <option>硕士</option>
                        <option>博士</option>
                    </select>
                </td>
            </tr>
            <tr><!--喜欢的类型-->
                <td>喜欢的类型</td>
                <td>
                    <input type="checkbox" id="style1"/><label for="style1">类型1</label>                   
                    <input type="checkbox" id="style2"/><label for="style2">类型2</label> 
                    <input type="checkbox" id="style3"/><label for="style3">类型3</label> 
                    <input type="checkbox" id="style4"/><label for="style4">类型4</label> 
                </td>
            </tr>
            <tr><!--自我介绍-->
                <td>自我介绍</td>
                <td>
                    <textarea rows="2" cols="20" ></textarea>
                </td>
            </tr>
            <tr><!--免费注册-->
                <td></td>
                <td>
                    <input type="submit" value="免费注册" />
                </td>
            </tr>
            <tr><!--默认同意条款-->
                <td></td>
                <td>
                    <input type="radio" id="tiaokuan" name="tkuan" checked /><label for="tiaokuan" >我同意条款</label>
                </td>
            </tr>
            <tr><!--会员直接登录-->
                <td></td>
                <td>
                    <a href="http://www.baidu.com" target="_blank">我是会员，立即登录</a>
                </td>
            </tr>
            <tr><!--空行-->
                <td></td>
                <td></td>
            </tr>
            <tr><!--我承诺-->
                <td></td>
                <td>
                    <h3>我承诺</h3>
                    <ul>承诺1</ul>
                    <ul>承诺2</ul>
                    <ul>承诺3</ul>
                </td>
            </tr>   
        </table>
    </form>
</body>
世纪佳缘案例(第4天)

效果图

案例

猜你喜欢
