简单小练习实战代码 html5+css

最新推荐文章于 2021-01-05 21:30:16 发布

uzi2200

最新推荐文章于 2021-01-05 21:30:16 发布

阅读量748

点赞数 1

文章标签： css html

本文链接：https://blog.csdn.net/uzi2200/article/details/108112315

版权

html代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>京淘注册页面</title>
    <!--引入样式表文件-->
    <link rel="stylesheet" href="regist.css"/>
</head>
<body>
    <!--头部-->
    <div id="header">
        <div id="line1">
            <img src="imgs/logo_jt.jpg">
            <span class="line"></span>
            <span class="wel-reg">欢迎注册</span>
        </div>
        <div id="line2">
            <span>已有账号</span>
            <a href="#">请登录</a>
        </div>

    </div>
    <!--主体-->
    <div id="middle">
        <form action="#"><!--注册表单-->
            <table>
                <tr><!--用户名-->
                    <td>
                        <input type="text"name="username" placeholder="用户名:"/>
                    </td>
                </tr>
                <tr><!--提示消息-->
                    <td class="msg">
                        支持中文、字母、数字、符号组合，4-20个字符
                    </td>
                </tr>
                <tr><!--设置密码-->
                    <td>
                        <input type="password"name="pwd" placeholder="设置密码:"/>
                    </td>
                </tr>
                <tr><!--提示消息-->
                    <td class="msg">
                       建议使用数字、字母和符号两种以上的组合，6-20个字符
                    </td>
                </tr>
                <tr><!--确认密码-->
                    <td>
                        <input type="password"name="repwd" placeholder="确认密码:"/>
                    </td>
                </tr>
                <tr><!--提示消息-->
                    <td class="msg alert">
                      两次密码不一致
                    </td>
                </tr>
                <tr><!--验证手机-->
                    <td class="yzsj">
                        <input type="text"name="phone"  placeholder="验证手机"/>
                        &nbsp;<span>或</span> &nbsp;
                        <a href="#">验证邮箱</a>
                    </td>
                </tr>
                <tr>
                    <td class="protocol">
                      <span>我已同意并阅读</span>
                       <a href="#">《京淘协议》</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="submit" value="立即注册"/>
                    </td>
                </tr>
            </table>

        </form>
        <img src="imgs/msg.jpg"/><!--手机快速注册-->
    </div>
    <!--尾部-->
    <div id="footer">
    <p>
        关于我们 | 联系我们 | 人才招聘 | 商家入驻 | 营销中心 | 手机京淘 | 友情连接 | 销售联盟 | 京淘社区 | 京淘公益 | English Site
        <br/>
        Copyright © 2015 - 2019 京淘jingtao.com 版权所有
    </p>
    </div>

</body>
</html>

css代码如下：

@charset "UTF-8";
/*头部*/
#header{
    width: 1200px;
    height: 114px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 41px;
}
#line1{/*第一行*/
    height: 72px;
}
#line1 img{
    margin-left: 50px;
    margin-right: 33px;
    vertical-align: middle;
}
#line1 .line{
    border: 2px solid #676767;
    height: 68px;
    display: inline-block;
    margin-right: 23px;
    background: #676767;
    vertical-align: middle;

}
#line1 .wel-reg{
    font-size: 36px;
    color: #676767;
    vertical-align: middle;
}
#line2{/*第二行*/
    height: 42px;
    text-align: right;
}
#line2 span{
    font-size: 24px;
    color: #999;
}
#line2 a{
    font-size: 24px;
    color: #333;
    text-decoration: none;
}

/*主体*/
#middle{
    width: 1200px;
    height: 545px;

    margin: 0px auto;
    padding-top: 75px;
    border: 7px solid #d0d0d0;
    border-bottom-width: 9px;
    border-top-width: 9px;

}
#middle form{
    width: 819px;
    margin-left: 109px;

    height: 545px;
    /*设置元素为行内块元素可以和其他元素显示在同一行*/
    display: inline-block;
}
#middle img{/*快速注册*/
    /*设置当前元素的顶部和行内最高元素的顶部对齐*/
    vertical-align: top;
}
/*选中表单中的所有input元素*/
#middle form table tr input{
    width: 381px;
    height: 50px;
    font-size: 16px;
    color: #999;
    text-indent: 22px;
    border:1px solid #d0d0d0;

}
/*用户名输入框*/
#middle form table input[name="username"]{
    background: url("imgs/u_ico.jpg") no-repeat 2px 10px ;


}
/*选中提示框下面的消息*/
#middle form table .msg{
    height: 32px;
    font-size: 12px;
    text-indent: 45px;
    color: #c3c3c3;
    background: url("imgs/alert_1.jpg") no-repeat 20px 10px;
    vertical-align: middle
}
#middle form table input[type="password"]{
    background: url("imgs/p_ico.jpg") no-repeat 2px 10px;
}
/*警告消息*/
#middle form table .alert{
    color: #e64346;
    background: url("imgs/alert_2.jpg")no-repeat  20px 10px;
}
/*验证手机*/
#middle form table input[name='phone']{
    background: url("imgs/phone_ico.jpg")no-repeat  5px 10px;
}
#middle form table .yzsj span{
    font-size: 16px;
}
#middle form table .yzsj a{
    font-size: 16px;
    color: #005ea7;
}
#middle form table .protocol{
    height: 83px;
    font-size: 16px;
    line-height: 52px;
    text-indent: 60px;
}

#middle form table .protocol a{
    color: #005ea7;
    text-decoration: none;
}
#middle form table input[type="submit"]{
    background: #e64346;
    color:#fff;
    font-size: 20px;
    text-indent: 0px;
}
/*尾部*/
#footer{
    width: 1200px;


    margin: 0px auto;
    margin-top: 109px;
}
#footer p{
    text-align: center;
    font-size: 14px;
    line-height: 34px;
    color: #999;
}