您的位置：首页 > Web前端 > CSS

html+css+table实现注册页面设计

2014-11-25 11:22 671 查看

.html 代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>注册页面</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>	
</head>

<body>
	<div class="reg">
		<div class="topic"></div>
		<div class="content">
			<form>
				<table cellpadding="0" cellspacing="0">
					<tr>
						<td colspan="3" height="30"></td>
					</tr>
					<tr>
						<td width="120px">姓    名:</td>
						<td width="220px"><input type="text" /></td>
						<td width="110px">格式：中文</td>
					</tr>
					<tr>
						<td colspan="3" height="10"></td>
					</tr>
					<tr>
						<td>联系方式:</td>
						<td><input type="text" /></td>
						<td>格式：11位手机</td>
					</tr>
					<tr>
						<td colspan="3" height="10"></td>
					</tr>
					<tr>
						<td>所在公司:</td>
						<td><input type="text" /></td>
						<td></td>
					</tr>
					<tr>
						<td colspan="3" height="10"></td>
					</tr>
					<tr>
						<td>职    务:</td>
						<td><input type="text" /></td>
						<td></td>
					</tr>
					<tr>
						<td colspan="3" height="10"></td>
					</tr>
					<tr>
						<td colspan="2"><input type="button" value="提交" class="btn"/></td>
						
					</tr>
					
				</table>
			</form>
			
		
		</div>
		
	</div>
	
</body>
</html>

.css代码如下：

body{
	
	font-family: "宋体", Arial, Helvetica, sans-serif; 
	color:#333333;
	font-size:12px; 
	background:url(../images/bg.jpg) repeat-x #E2E2E2; 
	
}

.reg{
	width:450px;
	height:auto;
	margin:0 auto;
	padding-top:100px;
}

.topic{
	background:url(../images/denj_top.jpg);
	width:450px;
	height:54px;
}
.content{
	border:1px solid #DBDBDB;
	color:#003976;
	background:#F9F9F9;
	text-align:center
}
.btn{
	
	color:#FFFFFF;
	background:url(../images/bot.jpg);
	width:58px;
	height:27px;
	border:0;/*去除边框*/
}

效果如下：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航