注册模板

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>注册</title>
   <style>
       /*行合并 rowspan
         列合并 colsspan
         内边距 padding
         外边距 margin
         文本行高 line-height
         边框高度 height
         */

       /*1_取消所有元素的内外边距干扰,设置盒子模型为标准模型
       设置所有元素的内外边距为0,设置box-sizing: border-box,
       即:边框的宽和高就是盒子的宽和高,不会因为内边距或内容的变大而撑大
       */
       * {
           box-sizing: border-box;
           padding: 0px;
           margin: 0px;
       }

       /* 2_1_创建外面的白色div容器, */
       /* 类名rg_form-->*/
       /* 宽886,高534,背景色为白色, */
       /* 上下外边距24,左右自动, */
       /* 边框为8px 实线,颜色为#eee */
       .rg_form {
           width: 886px;
           height: 534px;
           background-color: white;
           margin: 24px auto;
           border: 8px solid #eee;
       }

       /* 类名为rg_form_left */
       /*宽度为256,左浮动,上内边距20,左内边距20 */
       .rg_form_left {
           width: 256px;
           float: left;
           padding-top: 20px;
           padding-left: 20px;
           border: 0px solid red;
       }

       /* 中间注册窗体的容器类名rg_form_center, */
       /* 宽358,左浮动,上内边距10,字体大小14    */
       .rg_form_center {
           width: 358px;
           float: left;
           padding-top: 10px;
           font-size: 14px;
           border: 0px solid red;
       }

       /* 右边"已有账号"的容器类名 rg_form_right, */
       /* 宽256,右浮动 */
       .rg_form_right {
           width: 256px;
           float: right;
           border: 0px solid red;
       }

       /* "新用户注册"汉字,第1行使用p标签 */
       /* 可以使用伪类样式,p:first-child,字体20,颜色:#ffcd26 */
       .rg_form .rg_form_left p:first-child {
           font-size: 20px;
           color: #ffcd26;
       }

       /* "新用户注册"第2行英文使用p标签,内容:USER REGISTER, */
       /* 使用伪类样式, p:last-child , 字体20,颜色:#a6a6a6    */
       .rg_form .rg_form_left p:last-child {
           font-size: 20px;
           color: #a6a6a6;
       }

       /* 中间容器中的表格类名rg_table,上外边距25--> */
       .rg_table {
           padding-top: 25px;
       }

       /* 表单中左边的文字所在单元格,类名td_left,宽65,文本右对齐 */
       .td_left {
           width: 65px;
           text-align: right;
       }

       /* 表单中右边的输入框单元格类名td_right,宽293,高50 */
       .td_right {
           width: 293px;
           height: 50px;
       }

       /* 表单中的文本框,日期框,密码框使用属性选择器, */
       /* 宽256,高32,行高32,内边距上下6,左右12,圆角4, */
       /* 边框:1 实线 颜色#a6a6a6,右浮动 */
       input[type='text'], input[type='date'], input[type='password'] {
           width: 256px;
           height: 32px;
           line-height: 32px; /*行高32*/
           padding: 6px 12px;
           border-radius: 4px; /*圆角32*/
           border: 1px solid #a6a6a6;
           float: right;
       }

       /* 性别类名:gender,左内边距40 */
       .gender {
           padding-left: 40px;
       }

       /* 验证码输入框类名:check,宽118,左浮动,左外边距35,右外边距14 */
       .check {
           width: 118px;
           float: left;
           margin-left: 35px;
           margin-right: 14px;
       }

       /* 提交按钮类名:submit,宽120,高36,行高36,背景色#ffc900, */
       /* 字体大小14,边框类型为none */
       .submit {
           width: 120px;
           height: 36px;
           line-height: 36px;
           background-color: #ffc900;
           font-size: 14px;
           border: none;
       }

       /*< 右边的文字p标签,右浮动,字大小14,内边距,上20,右12,下0,左0 */
       .rg_form .rg_form_right p {
           float: right;
           font-size: 14px;
           padding: 20px 12px 0px 0px;
       }

       /* p内部有个a标签,颜色#fc8989 */
       .rg_form .rg_form_right p a {
           color: #fc8989;
       }
   </style>
</head>
<body>
<!--2_布局,创建好3个模块的位置-->
<div class="rg_form">

   <!--2_2_创建左边的div模块-->
   <!--类名为rg_form_left-->

   <!--3_实现左边的新用户注册所在的DIV模块-->
   <div class="rg_form_left">
       <p>
           新用户注册
       </p>
       <p>
           USER REGISTER
       </p>
   </div>

   <!--2_3_创建中间边的div模块-->
   <!--中间注册窗体的容器类名rg_form_center,-->
   <!--宽358,左浮动,上内边距10,字体大小14-->
   <div class="rg_form_center">

       <!--4_1_-->
       <!--中间容器中的表格类名rg_table,上外边距25-->
       <form action="#" method="post">
           <table class="rg_table">

               <!--4_2_-->
               <!--表单中左边的文字所在单元格,类名td_left,宽65,文本右对齐-->
               <!--4_3_-->
               <!--表单中右边的输入框单元格类名td_right,宽293,高50-->
               <tr>
                   <td class="td_left"><label for="username">用户名</label></td>
                   <td class="td_right">
                       <input type="text" name="username" placeholder="请输入用户名" id="username">
                   </td>
               </tr>
               <tr>
                   <td class="td_left"><label for="password">密码</label></td>
                   <td class="td_right">
                       <input type="password" name="password" placeholder="请输入密码" id="password">
                   </td>
               </tr>
               <tr>
                   <td class="td_left"><label for="email">Email</label></td>
                   <td class="td_right">
                       <input type="text" name="email" placeholder="请输入邮箱" id="email">
                   </td>
               </tr>
               <tr>
                   <td class="td_left"><label for="name">姓名</label></td>
                   <td class="td_right">
                       <input type="text" name="name" placeholder="请输入姓名" id="name">
                   </td>
               </tr>
               <tr>
                   <td class="td_left"><label for="phone">手机号</label></td>
                   <td class="td_right">
                       <input type="text" name="phone" placeholder="请输入手机号" id="phone">
                   </td>
               </tr>
               <tr>
                   <td class="td_left"><label>性别</label></td>
                   <td class="td_right gender"> <!--可以设置两个类-->
                       <input type="radio" name="sex" id="man" checked="checked" value="男"><label for="man"></label>
                       <input type="radio" name="sex" id="woman" value="女"><label for="woman"></label>
                   </td>
               </tr>
               <tr>
                   <td class="td_left"><label for="birthday">生日</label></td>
                   <td class="td_right">
                       <input type="date" name="birthday" placeholder="请输入生日" id="birthday">
                   </td>
               </tr>
               <tr>
                   <td class="td_left">
                       <label for="vcode">验证码</label>
                   </td>
                   <td class="td_right">
                       <input class="check" style=" width: 118px; float: left; margin-left: 35px; margin-right: 14px;"
                              type="text" name="vcode" placeholder="请输入验证码" id="vcode">
                       <img src="img/verify_code.jpg" height="32px">
                   </td>
               </tr>
               <tr>
                   <td></td>
                   <td class="td_right">
                       <input type="submit" name="注册" class="submit">

                   </td>
               </tr>
           </table>
       </form>
   </div>

   <!--2_4_创建右边的div模块-->
   <!--右边"已有账号"的容器类名 rg_form_right,-->
   <!--宽256,右浮动-->

   <!--5_实现”已有账号”所在的DIV模块-->
   <!--5_1_-->
   <!--右边的文字p标签,右浮动,字大小14,内边距,上20,右12,下0,左0-->

   <div class="rg_form_right">
       <p>
           已有账号?
           <a href="">立即登录</a>
       </p>
   </div>

</div>

</body>
</html>

效果:

register.png

补充常用的CSS扩展选择器

扩展选择器 格式 作用 语法符号
层级选择器 父选择器  子孙选择器{  } 选择父元素下所有的子孙元素 空格
属性选择器 标签名[属性名]  <br />标签名[属性名="属性值"] 只要包含属性名就被选中  <br />某个属性名=属性值的元素选中 [ ] 中括号
伪类选择器 链接:  <br />a:link 正常状态  <br />a:visited 访问过的  <br />a:hover 鼠标悬停  <br />a:active 正在激活  <br />文本框:  <br />:focus 得到焦点 同一个元素在不同的操作状态下呈现不同的样式              <br />文本框如果有光标在中间,表示得到焦点 :  冒号
并集选择器 选择器1,选择器2 多个选择器的集合 , 逗号

发表评论