HeyShinner
2015-11-04 14:14
<!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">
.myForm{
width:220px;
height:260px;
background:#CCDDFF;
}
#td1{
width:180px;
height:30px;
margin:10px 10PX 5PX 10PX;
border:1px solid #AAAAAA;
padding-left:10px;
}
span{font-size:10px;}
a{font-size:10px;color:blue;}
#checkbox1{margin-left:10px;}
#button1{
width:190px;
height:40px;
margin:10px 10PX 5PX 10PX;
background:url(http://img.mukewang.com/539a972b00013e9102280177.jpg);
background-position:0 0;
}
#button2{
width:190px;
height:40px;
margin:10px 10PX 5PX 10PX;
background:url(http://img.mukewang.com/539a972b00013e9102280177.jpg);
background-position:0 -38px;
}
</style>
</head>
<body>
<form action="save.php" method="post">
<div class="myForm">
<table>
<tr>
<td><input type="text" name="user-name" placeholder="邮箱/手机号/用户名" id="td1"></td>
</tr>
<tr>
<td><input type="text" name="passwards" placeholder="请输入密码" id="td1"></td>
</tr>
<tr>
<td><input type="checkbox" id="checkbox1"><span>下次自动登录</span><a>    忘记密码?</a></td>
</tr>
<tr>
<td><input type="button" id="button1"></td>
</tr>
<tr>
<td><input type="button" id="button2"></td>
</tr>
</table>
</body>
</html>
首先,不应该使用<table>标签,因为<table>标签现在已经过时了(就好像现在你称呼别人为‘同志’的情况是一样的),然后div应该不设置高度,让里面的元素自动撑开就行了,其次代码还可以简化,比如你的登录和注册按钮都引用同一张背景图片,可以简写在一行代码中。最后,‘忘记密码?’不应该加空格把它称到右边,应该使它浮动到右边(float:right)
.........
<!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">
.myForm{
width:220px;
height:260px;
background:#CCDDFF;
}
#td1{
width:180px;
height:30px;
margin:10px 10PX 5PX 10PX;
border:1px solid #AAAAAA;
padding-left:10px;
}
span{
font-size:10px;
}
a{
font-size:10px;color:blue;
}
#checkbox1{
margin-left:10px;
}
#button1{
width:190px;
height:40px;
margin:10px 10PX 5PX 10PX;
background:url(http://img.mukewang.com/539a972b00013e9102280177.jpg);
background-position:0 0;
}
#button2{
width:190px;
height:40px;
margin:10px 10PX 5PX 10PX;
background:url(http://img.mukewang.com/539a972b00013e9102280177.jpg);
background-position:0 -38px;
}
</style>
</head>
<body>
<form action="save.php" method="post">
<div class="myForm">
<table>
<tr>
<td>
<input type="text" name="user-name" placeholder="邮箱/手机号/用户名" id="td1">
</td>
</tr>
<tr>
<td>
<input type="text" name="passwards" placeholder="请输入密码" id="td1">
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="checkbox1">
<span>下次自动登录</span>
<a>    忘记密码?</a>
</td>
</tr>
<tr>
<td>
<input type="button" id="button1">
</td>
</tr>
<tr>
<td>
<input type="button" id="button2">
</td>
</tr>
</table>
</div> //标签要成对出现
</form> //标签要成对出现
</body>
</html>CSS Sprite雪碧图应用
47091 学习 · 241 问题
相似问题