html注册栏网页练习代码

html

body>
    <form action="#" method="get">
        <div>
            <label for="yonghu">用户名<span> * </span></label>
            <input type="text" placeholder="" name="username" id="yonghu" required>
            <span>请使用邮箱的电子邮箱</span>
        </div>
        <div>
            <label for="mima">密码<span> * </span></label>
            <input type="password" placeholder="" name="pwd" id="mima" required>
            <span class="qiangdu">密码强度：
                <span>弱</span>
                <span>中</span>
                <span>强</span>
            </span>
        </div>

        <div>
            <label for="queren">确认密码<span> * </span></label>
            <input type="password" name="pwd" id="queren" required>

        </div>
        <div>
            <label for="mubiao">注册目标<span> * </span></label>
            <input type="radio" name="xiangmu" value="huiyuan" required checked> 会员 <span>（快速卖出或买进农产品）</span>
            <div>
                <input type="radio" name="xiangmu" value="nongyejingjiren"
                    required> 农业经纪人 <span>（为广大会员服务，促成农产品交易）</span>
            </div>
            <div>
                <input type="radio" name="xiangmu" value="qudaolianmeng" required> 渠道联盟 <span>（成为我们的合作伙伴）</span>
            </div>
            <div>
                <input type="radio" name="xiangmu" value="xinxiyuan" required> 信息员 <span>（采集发布热点农业信息）</span>
            </div>
            <div>备注：Lorem ipsum dolor si Consectetur, dolorum.</div>
        </div>
        <div>
            <label for="xingming">姓名<span> * </span></label>
            <input type="text" placeholder="" name="myname" id="xingming" required>
            <span>真实姓名（与身份证信息一致）</span>
        </div>
        <div>
            <label for="shouji">手机<span> * </span></label>
            <input type="text" placeholder="" name="mobile" maxlength="11" id="shouji" required>
            <span>真实姓名（与身份证信息一致）</span>
        </div>


        <div>
            所在区域<span> * </span>
            <select name="area" id="area" required>
                <option value="guojia">中国</option>
                <option value="tajike">塔吉克斯坦</option>
            </select>
            <select name="area1" id="area1" required>
                <option value="diqu">---地区---</option>
                <option value="meiguo">---美国---</option>
            </select>
            <span>选择所在的省/市</span>
        </div>
        <div>
            <label for="yanzhengma">验证码<span> *  </span></label>
            <input type="text" placeholder="" name="yanzheng" id="yanzhengma" required>
            <a href="#">看不清，换一张</a>
        </div>
        <div class="yidong">
            <button class="tijiao">同意以下条款并注册</button>
            <a href="#">登入</a><a href="#">找回密码</a>
        </div>
        <textarea name="" id="" cols="50" rows="5"></textarea>

    </form>
</body>

</html>
css
form {
    width: 800px;
    margin: auto;
}

form>div {
    margin: 10px 0;
}

label {
    font-size: 16px;
    font-weight: bold;
}

form>div>label {
    display: inline-block;
    width: 100px;
    text-align: right;
}

label>span:first-child {
    color: red;
}

div>span:last-of-type {
    font-size: 12px;
    color: cadetblue;
}

a {
    display: inline-block;
    text-decoration: none;
    margin: 0 10px;
}

form>div:nth-child(4)>div {
    margin-left: 104px;
}

form>div:nth-child(4)>div>span {
    display: inline-block;
    width: 300px;
    text-align: left;
}

.qiangdu>span {
    display: inline-block;   
    color: red;
    padding: 0 5px;
}

.qiangdu>span:nth-child(2) {
    color: black;
}

.qiangdu>span:last-child {
    color: green;
}
form>div:nth-child(7){
    margin-left:25px;
    font-size: 16px;
    font-weight: bold;
   
}
form>div:nth-child(7)>span:first-child{
   color: red;
  
}
.tijiao{
    display: inline-block;
    padding: 10px;
    border-radius: 10px;
    text-align: center;
    background-image: linear-gradient(orange);
}
.yidong{
    margin-left: 100px;
   
}
 
 
posted @ 2019-03-23 14:07  代码狂魔2019  阅读(643)  评论(0)  编辑  收藏  举报