HTML和CSS的复习作业：e乐购界面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#all {
/* border: 1px solid black;*/
width: 1150px;
height: 1200px;
margin: 0 auto;
}
.one {
/* border: 1px solid red;*/
width: 1150px;
height: 80px;
}
.oneOne {
/*border: 1px solid darkslategray;*/
width: 100px;
height: 80px;
float: left;
/*margin-left: 50px;*/
}
.oneOne img{
width: 100px;
height: 80px;
float: left;
}
.oneTwo {
/*border: 1px solid cyan;*/
width: 520px;
height: 80px;
float: left;
margin-left: 400px;
}
.two {
/*border: 1px solid blue;*/
width: 1150px;
height: 1100px;
/*background-color: darkblue;*/
}
.twoOne {
/*border: 1px solid red;*/
width: 570px;
height: 370px;
/*background-color: darkblue;*/
float: left;
/*margin-left: 50px;*/
}
.twoTwo {
/*border: 1px solid green;*/
width: 380px;
height: 800px;
float: left;
/*background-color: darkblue;*/
margin-left: 30px;
}
.twoTwo table td{
/*border: 1px solid green;*/
width: 800px;
}
.twoTwo .dl b{
color: brown;
}
td{
width: 680px;
height: 50px;
text-align: left;
/*vertical-align: middle;*/
padding-top:10px ;
}
.dl a {
color: brown;
text-decoration: none;
}
/*.two {
}*/
/*.two a:hover {
color: red;
}*/
.td input{height: 40px;width: 300px;}
.lj a{
color: white;
height: 16px;
line-height: 16px;
text-decoration: none;
margin: 0 auto;
}
.yzm{height: 40px;width:166px; }
button{width: 316px;height:40px ;background-color: brown;
font-size: 15px;cursor: pointer;
border:none;
/*为了去除按钮的边框*/
}
/*.imgBottom img{width: 316px;height:40px ;}*/
.imgBottom td{
width: 100px;
}
</style>
</head>
<body>
<div id="all">
<div class="one">
<div class="oneOne"><img src="image/logo.jpg"/></div><div class="oneTwo">
<img src="image/top_center.jpg"/></div></div>
<div class="two">
<div class="twoOne"><img src="image/logo_img.jpg"/></div>
<div class="twoTwo">
<!--<table border="2px">-->
<table >
<tr><td class="dl"><font size="5"><b>登录e乐购</b></font>
还没有e乐购账号<a href="#">快速注册</a></td></tr>
<tr><td class="td"><br />
<input type="text" placeholder="已验证手机邮箱/用户名" ></td></tr>
<tr><td class="td"><br /><input type="password" placeholder="请输入密码" >
</td></tr>
<tr><td><br /><input type="text" placeholder="验证码" class="yzm"></td></tr>
<tr><td>
<br /><input type="checkbox" checked="checked"><font size="2">记住用户名</font></input>
<font size="2">
忘记密码?</font>
<br /> <br />
<button class="lj"><a href="#">立即登录</a></button>
</td></tr>
<tr><td class="imgBottom">
<font size="2"><b>您可以使用以下账号登录</b></font>
<img src="image/bottom.png"/>
<!--<br />-->
</td></tr>
</table>
</div>
</div>
</div>
</body>
</html>
