用表格与css

最新推荐文章于 2024-07-27 19:46:12 发布

ydcun

最新推荐文章于 2024-07-27 19:46:12 发布

阅读量757

点赞数

分类专栏： SSH 文章标签： class xhtml input url css html

本文链接：https://blog.csdn.net/manageer/article/details/7913558

版权

SSH 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<!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样式来实现一些排版！