用表格与css

来源:互联网 发布:手机电视直播大全软件 编辑:程序博客网 时间:2024/05/17 23:05
<!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><style type="text/css">td{padding:10px 0px 10px;<--设置td的内边距-->}.left{text-align:right;<--设置表格左边文本右对齐-->}.right{text-align:center;<--设置表格右边文本居中对齐-->}.txt{width:150px;border: solid thin  #000;padding:3px 0px 0px 22px;height:17px;}a{text-decoration:none;<--取消超链接下划线-->font-size:17px;}a:hover{color:red;<--设置超链接悬停是的状态特性-->font-size:20px;text-decoration:underline;}.butt{background:url(image/back.jpg);width:82px;height:23px;border:none;}#name{background:url(image/nan.gif) no-repeat 0px 3px;}#pow{background:url(image/Female.gif) no-repeat;}</style></head><body><table><tr>    <td width="83" class="left">用户名:</td>      <td colspan="2" class="right"><input id="name" maxlength="10" type="text" class="txt" /></td>    </tr>    <tr>    <td class="left">密    码:</td>      <td colspan="2" class="right"><input id="pow" maxlength="10" class="txt"  type="password"/></td>  </tr>  <tr>  <td height="75" colspan="2" class="left"><span class="left">    <input  type="submit" value="登陆" class="butt"/>    <br />    <a href="#">还没注册</a> </span></td>    <td width="183" class="right"><span class="right">      <input type="reset" value="取消" class="butt"/>      <br />    <a href="#">注册帮助</a></span></td>  </tr>  </table></body></html>

我们可以通过表格和css样式来实现一些排版!
原创粉丝点击