• 初学web前端HTML,如何让页面看起来整齐


    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    </head>
    <body>
    <h3>用户注册页面</h3>
    <table cellpadding="2">
      <tr>
        <td align="right"><label for="username">&emsp;用户名:</label></td>
        <td><input type="text" id="username"></td>
      </tr>
      <tr>
        <td align="right"><label for="password">&emsp;密&emsp;码:</label></td>
        <td><input type="password" id="password"></td>
      </tr>
      <tr>
        <td align="right"><label for="password">确认密码:</label></td>
        <td><input type="password" id="password"></td>
      </tr>
      <tr>
        <td align="right">&emsp;&emsp;性别:</td>
        <td><input type="radio" name="sex">男<input type="radio" name="sex">女</td>
      </tr>
      <tr>
        <td align="right">&emsp;&emsp;爱好:</td>
        <td>

          <input type="checkbox" name="hobby"1>听音乐

          <input type="checkbox" name="hobby"2>看电影

          <input type="checkbox" name="hobby"3>玩游戏

        </td>
      </tr>
      <tr>
        <td align="right">你所在的城市:</td>
        <td>
          <select>
           <option >广州市</option>
          </select>
        </td>
      </tr>
      <tr>
        <td align="right">照&emsp;片:</td>
        <td>
          <input type="text" name="mypic">
          <input type="button" name="btn" value="浏览...">
        </td>
      </tr>
      <tr>
        <td align="right">个人简介:</td>
        <td>
          <textarea name="desc" cols="60" rows="7"></textarea>
        </td>
      </tr>

      <tr>
        <td></td>
        <td>
          <input type="submit" name="sub" value="提交">
          <input type="reset" name="res" value="重写">

        </td>
      </tr>


    </table>
    </body>
    </html>

    如果不嵌套一个表格,展示出来的效果就会很乱,你会发现各种对不齐,显得页面不美观,上面是已经用table嵌套好的。

    <label for="username">用户名:</label>

    <input type="text" id="username">

    /////////////

    用户名:<input type="text" name="username">

    这两种方法看起来的效果是一样的,但是用户体验不一样

    第一种,单击用户名是有效果的,但是要注意用id=" ",不要用到name=" "还有就是上下命名要一致

    第二种就是没有效果的。

    另外&emsp;也是空格来的,和&nbsp;一样,根据个人习惯使用

  • 相关阅读:
    MySQL基础之 逻辑运算符
    MySQL基础之 如何删除主键
    MySQL基础之 AUTO_INCREMENT
    MySQL基础之 支持的数据类型
    TiDB数据库集群安装以及注意事项
    PgSQL基础之 pgsql与mysql的简单区别
    PgSQL基础之 安装postgresql数据系统
    SPRING IN ACTION 第4版笔记-第五章BUILDING SPRING WEB APPLICATIONS-003-示例项目用到的类及配置文件
    SPRING IN ACTION 第4版笔记-第五章BUILDING SPRING WEB APPLICATIONS-002-Controller的requestMapping、model
    SPRING IN ACTION 第4版笔记-第五章Building Spring web applications-001-SpringMVC介绍
  • 原文地址:https://www.cnblogs.com/yek9520/p/5732228.html
Copyright © 2020-2023  润新知