<!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; }