zoukankan      html  css  js  c++  java
  • 09 使用table布局 设计企业邮箱登陆界面

    布局使用的表格<table></table>

    table表格可以放置背景图:

    布局前可以给border加边界。

    布局完成后再将border边界去除。

    设计思路:

    一共使用了3个table元素,使table中表格的子元素也可以嵌套table

    代码:

    <html>
    <head>
    <title>企业邮箱</title>
    </head>
    <body>
    <table  width="100%" border=0px>
    
    <tr height="150px"><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
    <tr><td width="350px">&nbsp;</td><td>
    
    <table border=0px  width="540px" height="300px" background="mail.jpg">
    <tr height="60px" ><td >&nbsp;</td><td>&nbsp;</td></tr>
    <tr ><td width=230px>&nbsp;</td><td>
    
    <!--用form包起来-->
    
    <table height="100%" border=0px >
    <form action="main.html" method="post">
    <tr ><td>用户名:</td><td><input type="text" name="username" /></td></tr>
    <tr ><td>&nbsp;码:</td><td><input type="password" name="pwd" /></td></tr>
    <tr align="center"><td colspan="2"><input type="submit" value="登陆邮箱" />&nbsp;&nbsp;<input type="reset" value="重新填写" /></td></tr>
    <tr align="center"><td colspan="2"><a href="">找回密码</a>&nbsp;&nbsp;<a href="">注册用户</a></td></tr>
    </form>
    </table>
    
    
    </td></tr>
    <tr><td>&nbsp;</td><td>&nbsp;</td></tr>
    </table>
    
    </td><td>&nbsp;</td></tr>
    <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
    
    </table>
    </body>
    </html>

    效果图去除border前:

    效果图去除border后:

  • 相关阅读:
    python基础学习1-函数相关
    python基础学习1-SET 集合
    Linux命令学习笔记1
    python基础学习1-字典的使用
    python基础学习1-列表使用
    Jzoj4743 积木
    Jzoj4786 小a的强迫症
    Jzoj4746 树塔狂想曲
    Jzoj5246 Trip
    Jzoj5245 Competing Souls
  • 原文地址:https://www.cnblogs.com/super90/p/4508556.html
Copyright © 2011-2022 走看看