HTML和CSS的復(fù)習(xí)作業(yè)：e樂(lè)購(gòu)界面
<!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樂(lè)購(gòu)</b></font>
還沒(méi)有e樂(lè)購(gòu)賬號(hào)<a href="#">快速注冊(cè)</a></td></tr>
<tr><td class="td"><br />
<input type="text"? placeholder="已驗(yàn)證手機(jī)郵箱/用戶名" ></td></tr>
<tr><td class="td"><br /><input type="password"? placeholder="請(qǐng)輸入密碼"? >
</td></tr>
<tr><td><br /><input type="text"? placeholder="驗(yàn)證碼" 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>您可以使用以下賬號(hào)登錄</b></font>
<img src="image/bottom.png"/>
<!--<br />-->
</td></tr>
</table>
</div>
</div>
</div>
</body>
</html>
