css
.block{
width: 800px;
height: 1000px;
}
.headlinePicture{
width: 200px;
height: 63px;
float: left;
}
.headlineTxt{
width: 500px;
height: 63px;
float: left;
text-align: right;
}
.column{
width: 700px;
height: 40px;
float: left;
background-color:#B9E2FE;
}
.insideColumn{
width: 580px;
height: 30px;
float: left;
background-color: #F2FCFE;
}
.txtColumn{
width: 120px;
height: 30px;
text-align: center;
float: left;
}
.blankColumn{
width: 700px;
height: 10px;
float: left;
}
.blankColumn1{
width: 700px;
height: 40px;
float: left;
text-align: right;
}
.blankColumn2{
width: 700px;
height: 20px;
float: left;
background-color: #F2FDFF;
}
.blankBg{
width: 160px;
height: 620px;
float: left;
}
.mainContent{
width: 500px;
height: 620px;
float: left;
}
.long-text{
overflow: auto;
height: 100px; /* 设置高度以显示滚动条 */
border-style:solid;
border-width:1px;
}
.bottom{
width: 500px;
height: 40px;
float: left;
background-color: #F2FDFF;
}
.bottomRight{
width:200px ;
height: 40px;
float: left;
text-align: right;
background-color: #F2FDFF;
}html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>QQ</title>
<link rel="stylesheet" href="./css/p3_3.css">
</head>
<body>
<div class="block">
<div class="headlinePicture">
<img src="./images/p3_3/logo.gif" width="161" height="60">
</div>
<div class="headlineTxt" style="line-height: 60px;">
申请免费账号首页 | 反馈意见
</div>
<div class="column">
<div class="blankColumn"></div>
<div class="txtColumn">
网页免费申请
</div>
<div class="insideColumn">
<div class="txtColumn">
QQ靓号申请
</div>
<div class="txtColumn">
手机申请
</div>
</div>
</div>
<div class="blankColumn1" style="line-height: 40px;">
<img src="./images/p3_3/step_01.gif" >
填写信息
<img src="./images/p3_3/step_02.gif" >
申请成功
</div>
<div class="blankColumn2"></div>
<div class="blankBg"></div>
<div class="mainContent">
<table border="0">
<tr height="20px">
</tr>
<tr>
<td width="80" height="30" align="right">
昵称：
</td>
<td>
<input type="text" size="35">
</td>
</tr>
<tr>
<td width="80" height="30" align="right">
头像：
</td>
<td>
<img src="./images/p3_3/face.gif">
</td>
</tr>
<tr>
<td width="80" height="30" align="right">
</td>
<td>
<input type="file" id="浏览...">
</td>
</tr>
<tr>
<td width="80" height="30" align="right">
生日：
</td>
<td>
<select name="" id="">
<option value="" selected>1990</option>
<option value="">1991</option>
<option value="">1992</option>
<option value="">1993</option>
<option value="">1994</option>
<option value="">1995</option>
<option value="">1996</option>
<option value="">1997</option>
<option value="">1998</option>
<option value="">1999</option>
<option value="">2000</option>
<option value="">2001</option>
</select>年
<select name="" id="">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
<option value="">5</option>
<option value="">6</option>
<option value="">7</option>
<option value="">8</option>
<option value="">9</option>
<option value="" selected>10</option>
<option value="">11</option>
<option value="" selected>12</option>
</select>月
<select name="" id="">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
<option value="">5</option>
<option value="">6</option>
<option value="">7</option>
<option value="">8</option>
<option value="">9</option>
<option value="">10</option>
<option value="">11</option>
<option value="">12</option>
<option value="">13</option>
<option value="">14</option>
<option value="">15</option>
<option value="">16</option>
<option value="">17</option>
<option value="">18</option>
<option value="">19</option>
<option value="">20</option>
<option value="">21</option>
<option value="">22</option>
<option value="">23</option>
<option value="">24</option>
<option value="">25</option>
<option value="">26</option>
<option value="">27</option>
<option value="">28</option>
<option value="">29</option>
<option value="" >30</option>
<option value="" selected>31</option>
</select>日
</td>
</tr>
<tr>
<td width="80" height="30" align="right">
性别：
</td>
<td>
<input type="radio" checked>男
<input type="radio">女
</td>
</tr>
<tr>
<td width="80" height="30" align="right">
密码：
</td>
<td>
<input type="text" size="35">
</td>
</tr>
<tr>
<td width="80" height="30" align="right">
</td>
<td>
6-16个字符组成，区分大小写，不能为9位以下纯数字
</td>
</tr>
<tr>
<td width="80" height="30" align="right">
密码：
</td>
<td>
<input type="text" size="35">
</td>
</tr>
<tr>
<td width="80" height="30" align="right">
所在地：
</td>
<td>
<select name="" id="">
<option value="" selected>中国</option>
</select>
<select name="" id="">
<option value="" selected>北京</option>
</select>
<select name="" id="">
<option value="" selected>东城</option>
</select>
</td>
</tr>
<tr>
<td width="80" height="30" align="right">
爱好：
</td>
<td>
<input type="radio">爬山
<input type="radio">游泳
<input type="radio">滑雪
<input type="radio">上网
</td>
</tr>
<tr>
<td width="80" height="30" align="right">
验证码：
</td>
<td>
<input type="text" size="35">
</td>
</tr>
<tr>
<td width="80" height="30" align="right">
验证图片：
</td>
<td>
<img src="./images/p3_3/veryCode.gif">
<a href="#">看不清楚？换张图片</a>
</td>
</tr>
<tr>
<td width="80" height="30" align="right">
</td>
<td>
<input type="submit" value="确定并同意以下服务条款">
<input type="submit" value="重置">
</td>
</tr>
<tr>
<td width="80" height="30" align="right">
</td>
<td>
<div class="long-text">
腾讯在此特别提醒用户认真阅读、充分理解本《软件许可及服务协议》（下称《协议》）--- 用户应认真阅读、充分理解本《协议》中各条款，包括免除或者限制腾讯责任的免责条款及对用户的权利限制条款。请您审慎阅读并选择接受或不接受本《协议》（未成年人应在法定监护人陪同下阅读）。除非您接受本《协议》所有条款，否则您无权下载、安装或使用本软件及其相关服务。您的下载、安装、使用、帐号获取和登录等行为将视为对本《协议》的接受，并同意接受本《协议》各项条款的约束。
</div>
</td>
</tr>
</table>
</div>
<div class="bottom">
Copyright © 1998-2001 Tencent Inc. All Rights Reserved
</div>
<div class="bottomRight">腾讯公司 版权所有</div>
</div>
</body>
</html>
7043
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
