【HTML】简洁版的注册界面

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册title>
head>
<style>
    /* 单选按钮自定义颜色 */
    input[type='radio']:after {
       width: 15px;
       height: 15px;
       border-radius: 15px;
       top: -2px;
       left: -1px;
       position: relative;
       background-color: #d1d3d1;
       content: '';
       display: inline-block;
       visibility: visible;
       border: 2px solid white;
   }

   input[type='radio']:checked:after {
       width: 15px;
       height: 15px;
       border-radius: 15px;
       top: -2px;
       left: -1px;
       position: relative;
       background-color: #00BFFF;
       content: '';
       display: inline-block;
       visibility: visible;
       border: 2px solid white;
   }
   /* 多选按钮自定义颜色 */
   input[type=checkbox]{
            cursor: pointer;
            position: relative;
            width: 15px;
            height: 15px;
            font-size: 14px;
        }
        input[type=checkbox]::after{
            position: absolute;
            top: 0;
            border: none;
            /* background-color: #ff670c; */
            color: #fff;
            width: 15px;
            height: 15px;
            display: inline-block;
            visibility: visible;
            padding-left: 0px;
            text-align: center;
            content: ' ';
            border-radius: 1px
        }       
        input[type=checkbox]:checked::after{
            background-color: #F08080;
            border-color: #F08080;
            content: "✓";
            font-size: 12px;
            font-weight: bold;
        }
style>
<body>
    <h2 align="center">青春不常在,抓紧谈恋爱h2>
    <table width="700" align="center">
        
       
        
        
            <tr>
            <td>性别:td>
            <td>
                
                <input type="radio" name="sex" id="man"><label for="man"><img src="img/1.png">label>
                <input type="radio" name="sex" id="woman"><label for="woman"><img src="img/2.png">label>

            td>
        tr>

        <tr>
            <td>生日:td>
            <td>
                <select name="" id="">
                    <option >--请选择年份--option>
                    <option >2002option>
                    <option >2003option>
                    <option >2004option>
                    <option >2005option>
                    <option >2006option>
                    <option >2007option>
                    <option >2008option>
                    <option >2009option>
                select>
                <select>  
                    <option >--请选择月份--option>
                    <option >1option>
                    <option >2option>
                    <option >3option>
                    <option >4option>
                    <option >5option>
                    <option >6option>
                select>
                <select name="" id="">
                    <option >--请选择日--option>
                    <option >1option>
                    <option >2option>
                    <option >3option>
                    <option >4option>
                    <option >5option>
                    <option >6option>
                    <option >7option>

                select>

            td>
        tr>

<tr>
    <td>地区:td>
    <td><input type="text" value="河南南阳">td>

tr>

<tr>
    <td>婚姻状况:td>
    <td>
        
        
        <input type="radio" name="hun " id="yi" checked><label for="yi">已婚label>
        <input type="radio"name="hun " id="wei"><label for="wei">未婚label>
        <input type="radio"name="hun " id="li"><label for="li">离婚label>

        
    td>

tr>

<tr>
    <td>学历:td>
    <td><input type="text" value="本科生">td>

tr>

<tr>
    <td>喜欢的类型:td>
    <td>
        <input type="checkbox" name="love">性感|帅气
        <input type="checkbox" name="love">妩媚|阳光
        <input type="checkbox" name="love">成熟|知性
        <input type="checkbox" name="love">型男|御姐
        <input type="checkbox" name="love">野猫|奶狗
        <input type="checkbox" name="love" checked>我都要
    td>
tr>

<tr>
    <td>个人介绍td>
    <td>
        <textarea name="" id="" cols="30" rows="10">个人简介textarea>
    td>
tr>

<tr>
    <td>td>
    <td>
        <input type="submit" value="免费注册">
    td>
tr>

<tr>
    <td>td>
    <td>
    <input type="checkbox" checked>我同意注册条款和会员加入标准
    td>
tr>
<tr>
    <td>td>
    <td>
        <a href="#">我是会员,立即登录a>
    td>
tr>
<tr>
    <td>td>
    <td>
       <h5>我承诺h5>
       <ul>
        <li>
            年满18岁
        li>
        <li> 遵纪守法,不欺骗感情li>
        <li>自身内容正确,不过度P图li>
        <li>我真诚寻找另一半li>


       ul>
    td>
tr>
    table>
body>
html>

【HTML】简洁版的注册界面_第1张图片
可以加上CSS把页面美化一下
日期那个,可以用JS代码去做

你可能感兴趣的:(html,前端)