html

最新推荐文章于 2024-10-10 11:15:29 发布

悄悄一角落

最新推荐文章于 2024-10-10 11:15:29 发布

阅读量218

点赞数

分类专栏： html 文章标签： html

本文链接：https://blog.csdn.net/qq_27496735/article/details/51274333

版权

html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
    <meta http-equiv="Content-Language" content="gb2312"/>
    <title>注册画旅账号</title>
    <meta name="description" content="注册画旅账号"/>
    <meta name=keywords content="画旅"/>
    <link rel="stylesheet" href="css/reg.css" type="text/css"/>
</head>

<body>

<div id="top_title">注册</div>
<div id="main_content">
    <div id="content_left">
        <form>
            <div id="div_usn" class="content_left_line">
                登陆邮箱
                <input type="text"/>
            </div>
            <div id="div_pwd" class="content_left_line">
                登陆密码
                <input type="password"/>
            </div>
            <div id="div_re_pwd" class="content_left_line">
                确认密码
                <input type="password"/>
            </div>
            <div id="div_nicheng">
                个性域名
                <input type="text" style="width:140px;margin-right:5px;"/>
                .hualv.com
            </div>
            <div id="div_inf">
                至少5个字符,不区分大小写
            </div>
            <div id="div_yanzheng">
                验证码
                <input type="text" style="width:140px;"/>
            </div>
            <div id="xie_yi_div">
                <input type="checkbox" style="width:14px;height:14px;"/>同意画旅协议
            </div>
            <div id="reg_div">
                <button id="btn_reg">注册</button>
            </div>
        </form>
    </div>
    <div id="content_right">

    </div>
</div>
</body>

</html>

body{
    font-family:微软雅黑;
    padding:0px;
    margin:0px;
    background:#F5F5F5;
}
.content_left_line{
    line-height:65px;
    margin-left:100px;
}
#top_title{
    width:100%;
   line-height:70px;
   font-size:35px;
   text-align:center;
   margin:auto;
}
#main_content{
    width:1024px;
    height:500px;
    margin:auto;
    over-flow:hidden;
}
#content_left{
    width:512px;
    height:470px;
    position:absolute;
    font-size:15px;
    padding-top:30px;
    color:#777777;
}
#content_left input{
     width:215px;
     height:40px;
     padding-left:10px;
     margin-left:15px;
     outline:none;
     border-radius:6px;
     border:1px solid #C0C0C0;
     opacity:0.9;
     box-shadow: 0px 0px 0px #87CEFA;
     transition:box-shadow 0.3s;
     font-size:17px;
 }
 #content_left input:focus{
       border:1px solid #1E90FF;
      box-shadow: 0px 0px 10px #87CEFA;
  }
#content_right{
    width:512px;
    height:500px;
    left:512px;
    margin-left:512px;
}
#div_nicheng{
    line-height:40px;
    margin-left:100px;
    margin-top:15px;
    margin-bottom:5px;
}
#div_inf{
    margin-left:177px;
    font-size:12px;
}
#xie_yi_div{
    margin-left:167px;
    font-size:15px;
    line-height:15px;
}
#reg_div{
    margin-left:178px;
    font-size:25px;
    line-height:65px;
}
#div_yanzheng{
     line-height:40px;
     margin-left:115px;
     margin-top:15px;
     margin-bottom:5px;
}
#btn_reg{
     width:120px;
     height:40px;
     font-size:20px;
     margin-top:25px;
     background:linear-gradient(#00AA00,#227700);
     border-radius:4px;
     outline:none;
     out-line:none;
     border: 1px solid green;
     opacity:0.8;
     color:white;
}
#btn_reg:hover{
     opacity:1;
}
#btn_reg:active{
     opacity:0.8;
}