一·用户注册表单模块化案例

效果图

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>用户注册</title>    
  8. <link rel="stylesheet" href="style1.css">               
  9. </head>
  10. <body>
  11.         <div class="header">  <!-- 头部 -->
  12.                 <img src="https://www.php.cn/static/images/logos.png" alt="">
  13.                 <br>
  14.                 <h1>欢迎注册</h1>
  15.         </div> <!-- 头部 --> 
  17.         <div class="main"> <!-- 主体 -->
  19.             <div class="zhuce-form"></div>
  20.                 <form action="#.php" method="POST"  style="display: grid; gap: 1em" onsubmit="return false;">
  22.                     <!-- 用户名 --> <input type="text" name="name" placeholder="请输入用户名" autofocus required>  <!-- 为了用户体验不再加入label标签提示 -->
  24.                  <!-- 密码 --> <input type="password" name="password" placeholder="请输入密码">
  26.                  <div class="dx-radio">
  27.                       <!-- 单选 -->
  28.                         <label for="secret">性别:</label>
  29.                         <input type="radio" name="gender" value="nan"  checked id="secret"/><label for="">男</label>
  30.                         <input type="radio" name="gender" value="nv" /><label for="">女</label>
  31.                 <div> 
  32.                     <br>
  34.                     <div class="fx-checkbox">    
  35.                      <!-- 复选 -->
  36.                         <label>爱好:</label>
  37.                         <!-- 所有复选框的name属性值必须写成数组格式 -->
  38.                         <input type="checkbox" name="hobby[]" id="paobu" checked /><label for="game">跑步</label>
  39.                         <input type="checkbox" name="hobby[]" id="trave" /><label for="youyong">游泳</label>
  40.                         <input type="checkbox" name="hobby[]" id="shoot"  /><label for="daqiu">打球</label>
  41.                     <div>      
  42.                     <br>
  43.                     <!-- 下拉 -->
  44.                     <div class="xl-select" >
  45.                     <label for="">请选择注册方式</label>
  46.                     <select name="xiala" id="">
  47.                         <option value="1">手机</option>
  48.                         <option value="2">QQ</option>
  49.                         <option value="3" selected>微信</option>
  50.                     </div>
  51.                 </select>
  52.                 <br>
  53.                       <div class="tj-button">  <!-- 提交 -->          
  54.                       <button >注册</button> 
  55.                     </div>                       
  56.                 </form>
  57.             </div>   <!-- zhuce-form -->
  58.         </div><!-- 主体 -->
  59.        <div class="footer" >
  60.             <div class="dl-a"><a href="">老用户登入</a></div>
  62.             <div class="wj-a"><a href="">忘记密码</a></div>
  64.         </div>    
  65.        </div>  
  66. </body>
  67. </html>

二：CSS外部文件代码：

  1. .header{text-align: center;}  /* 给头部添加样式 */
  4. .main{
  5.  margin: auto;
  6.  padding: 40px 20px;  /*整体样式 上/左右边距 */  
  7.  width: 300px;
  8.  height: 200px;
  9.  background-color: grey;}
  11. .zc-input input{            /* 给输入框添加样式 */
  12.  height: 30px;  
  13.  width: 200px; }
  17. .dx-radio,.fx-checkbox,.xl-select{ height: 24px;      /* 给单选和复选添加样式 */
  18.  width: 300px;
  19.  background-color: white; }      
  22. button{
  23.    margin: 10px 125px;             /* 给提交添加样式 */
  24. } 
  25. .dl-a>a,.wj-a>a{
  26.     border: 0px;
  28.     margin-left:200px;
  29.     color: white;text-decoration:none;
  33. }

：三上下文选择器示例

后代选择器:空格*如下方的 ul li{ background-color: blue;}

子选择器：标签>标签>标签如 body>ul>li

更多相关文章

  1. HTML注册表单控件实例、CSS模块化理解与CSS基本/上下文选择器的
  2. css语法介绍
  3. PHP:【商城后台管理系统】部署角色管理，角色添加，菜单权限，删除角色
  4. 4.【商城后台管理系统】基于TP6开发后台无限极菜单的管理显示与
  5. PHP:【商城后台管理系统】部署管理员一级菜单和二级菜单列表添加
  6. PHP:【商城后台管理系统】部署管理员列表，添加/编辑/删除功能
  7. 选择器的使用和模块化组件思想
  8. Java 给 Word 添加数字签名
  9. promise间隔时间添加dom

随机推荐

  1. 关于C#视频教程的资源分享
  2. C#如何连接到sql server2008数据库的示例
  3. localStorge开发实现登录记住密码与自动
  4. C#如何使用ILGenerator实现动态生成函数
  5. 极客学院C#视频教程的资料推荐
  6. asp.net之ActionFilter过滤器
  7. 传播智客ASP.NET基础系列视频资料分享
  8. 传播智客ASP.NET中级系列视频视频资料
  9. 传播智客ASP.NET高级系列视频资料分享
  10. 总结.NET如何获取当前路径的方法