zoukankan      html  css  js  c++  java
  • 初学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;一样,根据个人习惯使用

  • 相关阅读:
    css最简单的在背景图片上显示模糊背景色的方法
    css添加网格背景
    获取bing必应图片
    JavaScript超过一定高度导航添加类名
    6行css就可以解决的瀑布流布局的方法
    css实现背景图横向滚动
    JavaScript根据一个元素的显示隐藏控制另一个元素的显示和隐藏
    JavaScript判断地址栏链接与导航栏链接是否一致并给导航添加class
    JavaScript实现选中文字自动复制
    Day 74 算法基础(二)
  • 原文地址:https://www.cnblogs.com/yek9520/p/5732228.html
Copyright © 2011-2022 走看看