html网页

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>网上书城</title>
</head>
<body>
<div id="top">
  <table bgcolor="#faebd7" width="100%">
    <tr>
      <td align="left">[外链图片转存失败(img-nJGLorik-1562240043365)(https://mp.csdn.net/logo.png)]</td>
      <td align="center" valign="center"><h4>你好,欢迎访问网上书城!</h4></td>
      <td align="right">[外链图片转存失败(img-mepd4ngS-1562240043366)(https://mp.csdn.net/cart.gif)] <a>购物车</a>|<a>帮助中心</a>|<a>加入收藏</a>|<a>设为首页</a>|
        <input type="button" value="登录"/>
        |
        <input type="button" value="注册"/></td>
    </tr>
  </table>
</div>
<div id="menu">
  <table width="100%"bgcolor="#00CC33">
    <tr>
      <td><a><font color="#FFFFFF">文化</font></a></td>
      <td><a><font color="#FFFFFF">生活</font></a></td>
      <td><a><font color="#FFFFFF">计算机</font></a></td>
      <td><a><font color="#FFFFFF">外语</font></a></td>
      <td><a><font color="#FFFFFF">学术</font></a></td>
      <td><a><font color="#FFFFFF">社科</font></a></td>
      <td><a><font color="#FFFFFF">少儿</font></a></td>
      <td><a><font color="#FFFFFF">艺术</font></a></td>
      <td><a><font color="#FFFFFF">考试</font></a></td>
      <td><a><font color="#FFFFFF">全部商品目录</font></a></td>
      <td align="right">search &nbsp;
        <input type="text">
        <input type="button" value = "搜索"></td>
    </tr>
  </table>
</div>
<form name="regist" method="post" action="">
  <table width ="100%" >
    <tr width="100%">
      <td bgcolor="#FFFFFF"></td>
    </tr>
    <tr>
      <td align="left" bgcolor="#99CC33"><font color="#FFFFFF">
        <h3>&nbsp;注册 &nbsp;</h3>
        </font></td>
    </tr>
    <tr>
      <td align="center" ><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;姓名:&nbsp;
          <input type="text" placeholder="请输入你的名字"/>
        </p></td>
    </tr>
    <tr>
      <td align="center"><p>&nbsp;&nbsp;&nbsp;&nbsp;登录名:
          <input type="text" placeholder="可包含数字、字母"/>
        </p></td>
    </tr>
    <tr>
      <td align="center" ><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;密码:&nbsp;
          <input type="password" placeholder="至少包含6个字符"/>
        </p></td>
    </tr>
    <tr>
      <td align="center" ><p>确认密码:&nbsp;
          <input type="password" placeholder="再次输入密码确认"/>
        </p></td>
    </tr>
    <tr>
      <td align="center" ><p>电子邮箱:&nbsp;
          <input type="text" placeholder="必须包含@字符"/>
        </p></td>
    </tr>
    <tr>
      <td align="center"><p>性别:&nbsp;&nbsp;&nbsp;
          <input type="radio" name="sex"/>
          &nbsp;&nbsp;男&nbsp;&nbsp;
          <input type="radio" name="sex"/>
          &nbsp;&nbsp;女&nbsp;&nbsp;</p></td>
    </tr>
    <tr>
      <td align="center"><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;爱好:&nbsp;
          <input type="checkbox"name="hobby"/>
          运动&nbsp;
          <input type="checkbox"name="hobby"/>
          聊天&nbsp;
          <input type="checkbox"name="hobby"/>
          玩游戏&nbsp;</p></td>
    </tr>
    <tr>
      <td align="center"><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;出生日期:
          <input type="text" size="2" maxlength="4" value="19" />
          &nbsp;年&nbsp;
          <select>
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
            <option>6</option>
            <option>7</option>
            <option>8</option>
            <option>9</option>
            <option>10</option>
            <option>11</option>
            <option>12</option>
          </select>
          &nbsp;月&nbsp;
          <input type="text" size="2" maxlength="2" />
          &nbsp;日&nbsp; </p></td>
    </tr>
    <tr>
      <td align="center"><p>
          <input type="submit" value="提交"/>
          <input type="reset" value="重置"/>
        </p></td>
    </tr>
  </table>
</form>
<div id="foot">
  <table bgcolor="#faebd7" width="100%">
    <p>
    <tr>
      <td rowspan="2" width="50%" algin="center">[外链图片转存失败(img-vNcSQOjf-1562240043368)(https://mp.csdn.net/logo.png)]</td>
      <td>CONNECT US</td>
    </tr>
    <tr>
      <td> copyright 2019 @ bookstore All Rights RESERVE </td>
    </tr>
      </p>
  </table>
</div>
</body>
</html>

页面效果
在这里插入图片描述
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/Zero_ying/article/details/94647013