仿写学编程用户注册界面_仿写账号登录界面-CSDN博客

本文链接：https://blog.csdn.net/baidu_25845567/article/details/51570870

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <link rel="stylesheet" type="text/css" href="register.css">
</head>
<body>
    <div class="container">
        <div class="header">
            <div class="left-header">
                <a class="home-btn" href="">学编程</a>
                <a class="func-btn" href="">全部课程</a>
                <a class="func-btn" href="">技术文章</a>
                <a class="func-btn" href="">赞助本站</a>
            </div>
            <div class="right-header">
                <div class="search">
                    <input class="search-word" type="text" placeholder="html5">
                    <button class="search-btn" type="submit">搜索</button>
                </div>
                <a class="func-btn" href="">登录</a>
                <a class="func-btn" href="">注册</a>
            </div>
        </div>

        <div class="content">
            <div class="register">
                <div class="content-title">注册</div>
                <form action="" method="post">
                    <div class="field">
                        <p class="field-name">邮箱地址</p>
                        <input class="field-value" name="email" type="email" required>
                        <p class="field-intro">填写你常用的邮箱作为登录账号</p>
                    </div>
                    <div class="field">
                        <p class="field-name">昵称</p>
                        <input class="field-value" name="nickname" type="text" required>
                        <p class="field-intro">该怎么称呼你?中英文均可,最长14个英文或7个汉字</p>
                    </div>
                    <div class="field">
                        <p class="field-name">密码</p>
                        <input class="field-value" name="password" type="password" required>
                        <p class="field-intro">5-20位英文、数字、符号,区别大小写</p>
                    </div>
                    <div class="field">
                        <p class="field-name">确认密码</p>
                        <input class="field-value" name="password_again" type="password" required>
                        <p class="field-intro">再输入一次密码</p>
                    </div>
                    <button class="submit-btn" name="submit" type="submit">注册</button>
                </form>
            </div>
        </div>
    </div>

    <div class="footer">课程内容版权均归学编程所有 京ICP备13042384号</div>
</body>
</html>

css文件

*{
    margin: 0;
    padding: 0;
}

html, body{
    height: 100%;
}

body{
    background-color: #eee;
}

a{
    text-decoration: none;
}

.container{
    width: 100%;
    min-height: 100%; /* 页面的高度不能小于浏览器窗口的高度 */
    height: auto; /* IE6 不兼容line-height */
    margin-bottom: -80px;
}

.header{
    width: 100%;
    height: 50px;
    background-color: black;
}

.left-header{
    height: 50px;
    padding-left: 50px;
    float: left;
}

.right-header{
    height: 50px;
    padding-right: 50px;
    float: right;
}

.home-btn{
    float: left;
    height: 50px;
    padding: 0 10px;
    line-height: 50px;
    color: white;
    font-size: 1.2em;
    font-weight: bold;
}

.func-btn{
    float: left;
    height: 50px;
    padding: 0 10px;
    line-height: 50px;
    color: white;
    font-size: 1em;
}

.func-btn:hover{
    background-color: chartreuse;
}

.func-btn:active{
    background-color: chartreuse;
}

.search{
    margin-top: 13px;
    float: left;
}

.search-word{
    width: 200px;
    height: 20px;
    border: 2px solid gray;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    padding-left: 5px;
    float: left;
}

.search-btn{
    width: 60px;
    height: 24px;
    border: 0;
    background-color: gray;
    color: white;
    font-size: 0.8em;
    text-align: center;
    line-height: 24px;
    float: left;
}

.header-content-space{
    width: 100%;
    height: 60px;
    clear: both;
}

.content{
    width: 100%;
    padding: 60px 0 100px;
}

.register{
    width: 500px;
    border: 1px solid #ccc;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin: 0 auto;
    padding: 40px 30px;
    background-color: white;
}

.content-title{
    font-size: 2em;
    font-weight: bold;
    color: black;
}

.field{
    padding: 5px 0 20px;
}

.field-name{
    font-size: 0.9em;
    font-weight: bold;
    color: black;
}

.field-value{
    width: 498px;
    height: 30px;
    border: 1px solid #ccc;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin: 5px 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.field-value:focus{
    border: 1px solid #66afe9;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
    outline: none; /* 输入框获取焦点时去掉默认的轮廓 */
}

.field-intro{
    font-size: 0.8em;
    color: gray;
}

.submit-btn{
    width: 500px;
    height: 30px;
    border: 0;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color: #1d4b8f;
    color: white;
    font-size: 1em;
    outline-offset: -2px; /* 选中时轮廓紧贴着按钮 */
}

.footer{
    width: 100%;
    height: 80px;
    background-color: black;
    color: gray;
    font-size: 0.8em;
    text-align: center;
    line-height: 80px;
}