注册页面编写（html/css）

图样展示

在这里插入图片描述

照片在WEB-INF下方的image中

照片链接：https://pan.baidu.com/s/1BhbA1J-19Y0FMokMsMtK0g 提取码：coru

特别适用于初学者

regist.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>XINGGou</title>
<!-- 引入regist.css样式表文件 -->
<link rel="stylesheet" href="regist.css">
</head>
<body>
  <!-- 头部分 -->
  <div id="header">
    <!-- 第一行 -->
    <div id="line1">
      <img alt="logo" src="../image/logo_jt.jpg">
      <span class="line"></span>
      <span class="regist">欢迎注册</span>
    </div>
    <!-- 第二行 -->
    <div id="line2">
        <span>
              已有帐号?
       <a href="#">
                    请登录
       </a>
    </span>
    </div>
  </div>
  <!-- 主体内容 -->
  <div id="body">
    <form>
      <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>
            <input type="text" name="phone" placeholder="验证手机">
            <span id="check-email">
              &nbsp;或&nbsp;
              <a href="#">验证邮箱</a>
            </span>
          </td>
        </tr>
        <tr>
          <td id="regist-protocol">
            <!-- <input type="checkbox" checked="checked" id="auto">  -->
                          我已阅读并同意
            <a href="#">《星构用户注册协议》</a>
          </td>
        </tr>
        <tr>
          <td>
            <input type="submit" value="立即注册">
          </td>
        </tr>
      </table>
    </form>
    <img class="regist" src="../image/msg.jpg">
  </div>
  <!-- 尾部分 -->
  <div id="footer">
    <p>
    关于我们 | 联系我们 | 人才招聘 | 商家入驻 | 营销中心 | 星构爱游 | 友情连接 | 销售联盟 | 星构社区 | 星构公益 | English Site
<br>Copyright © 2020 - 2021 星构xinggou.com 所有
    </p>
  </div>
</body>
</html>

regist.css

@CHARSET "UTF-8";
/* 头部分 */
#header{
    /*宽高*/
    width:1200px;
    height:114px;
/*外边距：  上下   左右*/
    margin:0px auto;
    margin-top:41px;
}
#header #line1{/*头部第一行内容*/
    height:72px;
}
#header #line1 img{/*选中line1内部的img元素*/
  /*外边距：上      右       下     左*/
    margin:0px 33px 0px 50px;
    vertical-align:middle;/*居中*/
}
#header #line1 .line{/*竖线*/
    border:2px solid grey;/*边框border-width border-style border-color */
    height:68px;
    /*将行内元素改为行内块元素*/
    display:inline-block;
    vertical-align:middle;
}
#header #line1 .regist{/*欢迎注册*/
    font-size:36px;/*设置字体大小*/
    color:#676767;/*设置字体颜色*/
    margin-left:23px;/*设置元素的左外边距*/
    vertical-align:middle;/*设置元素的垂直对齐方式*/
}
#line2{ /* 头部第2行内容 */
    height: 42px;
    text-align: right; /* 设置元素内容居右显示 */
}
#line2  span{ /* 已有账号 */
    font-size:24px;
    color: #999;  /* AABBCC=ABC */
}
#line2  a{ /* 请登录 */
    font-size:24px;
    color: #333;
    text-decoration: none; /* 设置文本没有下划线(underline) */
}
/*主体部分*/
#body{
    width: 1200px;
    height: 545px;
/*外边距：  上下  左右*/
    margin:0px auto;
    /*设置主题和footer之间的间距
      bottom是向下间距
      top是向上间距*/
    margin-bottom:109px;
    border:7px solid #d0d0d0;
    border-top-width:9px;
    border-bottom-width:9px;
    /*主体div上边框和内容的间距（上内边距）*/
    padding-top:75px;
}
#body form{
    width:819px;
    height:470px;
    margin-left:109px;
    /*将元素设置为行内块元素，
       可以和其他元素处在同一行*/
    display:inline-block;
}
#body .regist{/*快速注册*/
    /*让当前元素和行内最高元素的顶端对齐*/
    vertical-align:top;
}
#body form table input{/*表单中的所有input元素*/
    width:381px;
    height:50px;
    border:1px solid #d0d0d0;
    font-size:16px;
    color:#999;
    text-indent:45px;    
}
#body form table input[name="username"]{/*用户名输入框*/
    background-image:url('../image/u_ico.jpg');
    /*设置背景图片不重复（横向纵向都不重复）*/
    background-repeat:no-repeat;
    /*设置背景图片距离边框的距离*/
    background-position:15px 15px;
}
#body form table .msg{/*用户名框下方的提示信息*/
    height:32px;
    font-size:12px;
    color:#c3c3c3;
    text-indent:45px;
    background-image:url('../image/alert_1.jpg');
    background-repeat:no-repeat;
    background-position:17px 7px;
}
#body form table .alert{
    color:#e64346;
    background-image:url('../image/alert_2.jpg');    
}
#body form table input[type="password"]{/*密码输入框*/
    background-image:url('../image/p_ico.jpg');
    /*设置背景图片不重复（横向纵向都不重复）*/
    background-repeat:no-repeat;
    /*设置背景图片距离边框的距离*/
    background-position:15px 15px;
}
#body form table input[name="phone"]{/*验证手机*/
    background-image:url('../image/phone_ico.jpg');
    /*设置背景图片不重复（横向纵向都不重复）*/
    background-repeat:no-repeat;
    /*设置背景图片距离边框的距离*/
    background-position:15px 15px;
}
/*或验证邮箱*/
#body form table #check-email{
    font-size:16px;
}
/*验证邮箱*/
#body form table #check-email a{
    color:#005ea7;
}
/*同意协议*/
#body form table #regist-protocol{
    height:83px;
    font-size:16px;
    line-height:52px;
    text-indent:60px;
}
/**/

/*协议*/
#body form table #regist-protocol a{
    text-decoration:none;
    color:#005ea7;
}
/*立即注册按钮*/
#body form table input[type="submit"]{
    font-size:20px;
    background:#e64346;
    color:#fff;
    text-indent:0px;
}
/*尾部分*/
#footer{
    width:1200px;
    height:120px;
    margin-left:auto;
    margin-right:auto;
}
#footer p{
    text-align:center;
    font-size:14px;
    color:#999;
    line-height:34px;/*行高*/
}

难道我写得很垃圾吗？在csdn上都没人看这篇，我不信，我到开源来试试！！！

Welcome to XINGGou

来源：oschina

链接：https://my.oschina.net/u/4115134/blog/3189230

标签

table