">
<html xmlns="
">
<head>
<meta http-equiv="Content-Type" content="text/html charset=utf-8" />
<title>无标题文档</title>
<style>
h1{ color:#F00}
p{ font-size:16px}
</style>
<script type="text/javascript">
function MM_jumpMenu(targ,selObj,restore){ //v3.0
eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'")
if (restore) selObj.selectedIndex=0
}
</script>
</head> <body> <h1 align="center" >会员注册</h1>
<table width="805" align="center">
<tr>
<td width="94" height="45" valign="middle">用   户    名:</td>
<td colspan="4" valign="middle"><form id="form1" name="form1" method="post" action="">
<label for="textfield"></label>
<input type="text" name="textfield" id="textfield" width="200" height="25" />
</form></td>
</tr>
<tr>
<td height="41" valign="middle">密          码 :</td>
<td colspan="4" valign="middle"><form id="form2" name="form2" method="post" action="">
<label for="textfield2"></label>
<input type="password" name="textfield2" id="textfield2" width="200" height="25" />
</form></td>
</tr>
<tr>
<td height="39" valign="middle">性           别:</td>
<td colspan="4" valign="middle"><form id="form3" name="form3" method="post" action="">
<input type="radio" name="radio2" id="radio2" value="radio2" />
<label for="radio"></label>
男            
<input type="radio" name="radio2" id="radio2" value="radio2" />
<label for="radio2"></label>
女
</form></td>
</tr>
<tr>
<td height="41" valign="middle">出 生 年 月:</td>
<td colspan="4" valign="middle"><form id="form4" name="form4" method="post" action="" >
<label for="textfield3"></label>
<input type="text" name="textfield3" id="textfield3" width="20" height="20" />
年<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
月<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>15</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option>
</select>
日
</form></td>
</tr>
<tr>
<td height="42" valign="middle">地           址:</td>
<td colspan="4" valign="middle"><form id="form5" name="form5" method="post" action="">
<label for="textfield4"></label>
<input type="text" name="textfield4" id="textfield4" width="200" height="25" />
</form></td>
</tr>
<tr>
<td height="38" valign="middle">爱           好:</td>
<td colspan="4" valign="middle"><form id="form6" name="form6" method="post" action="">
<input type="checkbox" name="checkbox" id="checkbox" />
<label for="checkbox"></label>
体育
<input type="checkbox" name="checkbox2" id="checkbox2" />
<label for="checkbox2"></label>
旅游
<input type="checkbox" name="checkbox2" id="checkbox2" />
<label for="checkbox2"></label>
读书
<input type="checkbox" name="checkbox2" id="checkbox2" />
<label for="checkbox2"></label>
电脑
<input type="checkbox" name="checkbox2" id="checkbox2" />
<label for="checkbox2"></label>
音乐
</form></td>
</tr>
<tr>
<td height="41" valign="middle">上 传 形 象:</td>
<td colspan="4" valign="middle"><form id="form7" name="form7" enctype="multipart/form-data" method="post" action="" >
<label for="fileField"></label>
<input type="file" name="fileField" id="fileField" width="200px" height="25px" />
</form></td>
</tr>
<tr>
<td height="99" valign="middle">个 人 简 介：</td>
<td colspan="4" valign="middle"><form id="form8" name="form8" method="post" action="">
<label for="textarea"></label>
<textarea name="textarea" id="textarea" cols="45" rows="5" ></textarea>
</form></td>
</tr>
<tr>
<td height="44" valign="middle">友 情 链 接：</td>
<td colspan="4" valign="middle"><form name="form" id="form">
<select name="jumpMenu" id="jumpMenu" onchange="MM_jumpMenu('parent',this,0)">
<option value="
">百度</option>
<option value="
">网易</option>
</select>
</form></td>
</tr>
<tr>
<td height="42" colspan="5" align="center" valign="middle"><form id="form9" name="form9" method="post" action="">
<input type="submit" name="button" id="button" value="提交" />                  
<input type="reset" value="重置" />
</form></td>
</tr>
</table>
</body>
</html>
自学自强，不懂就问，但不能太依赖对方哦，有时自己解决问题才是真正学到东西的，^.^
不废话，css代码：
<style>.Gavin_Design ,.gd div{margin:0 auto overflow:hidden height:auto background-color:transparent color:#333}
.gd{width:1000px}
.gd input ,.gd textarea{margin:0 padding:0 background:none border:none font-size:14px resize:none outline:0}
.gd .part{padding:15px 0}
.gd .textarea{height:90px border:1px solid #ddd -webkit-box-shadow:inset 0 3px 2px rgba(0,0,0,.05) -moz-box-shadow:inset 0 3px 2px rgba(0,0,0,.05) box-shadow:inset 0 3px 2px rgba(0,0,0,.05) background:#fff padding:10px}
.gd .textarea textarea{width:100% height:90px overflow:hidden overflow-y:auto}
.gd .bottom_contorl{margin-top:15px}
.gd .bottom_contorl .express{float:left height:32px line-height:32px padding-left:10px}
.gd .bottom_contorl .button{float:right width:320px height:32px text-align:center font-size:0}
.bottom_contorl .button input{height:32px width:150px margin-left:10px color:#fff cursor:pointer}
.bottom_contorl .button input.submit{background:#4779be}
.bottom_contorl .button input.submit:active{background:#3c6eb4}
.bottom_contorl .button input.cancel{background:#b5b5b5}
.bottom_contorl .button input.cancel:active{background:#a9a9a9}
.gd .part .init{width:100% border-collapse:collapse color:#333}
.gd .part td{border-bottom:1px solid #e5e5e5 height:60px padding:2% vertical-align:middle}
.gd .part .user{overflow:hidden white-space:nowrap text-overflow:ellipsis font-size:12px width:60px}
.gd .part .me{color:#666}
.gd .part .reply{color:#22627d}
.gd .part .comments{font-size:14px}
</style>
html结构代码（div+css）：
<div class="Gavin_Design gd"><div class="part">
<div class="textarea">
<textarea placeholder="你有什么好的建议请留言"></textarea>
</div>
<div class="bottom_contorl">
<div class="express">表情</div>
<div class="button">
<input type="button" class="submit" value="提交">
<input type="button" class="cancel" value="取消">
</div>
</div>
</div>
<div class="part">
<table cellpadding="0" cellspacing="0" class="init">
<tr>
<td width="10%"><div class="user me">我</div></td>
<td width="90%" class="comments">老师你好，周末快乐！</td>
</tr>
<tr>
<td><div class="user reply">秋叶，很长的名字</div></td>
<td class="comments">下午好，秋荷！</td>
</tr>
<tr>
<td width="10%"><div class="user me">我</div></td>
<td width="90%" class="comments">好长不想打字，好长不想打字好长不想打字好长不想打字好长不想打字好长不想打字好长不想打字好长不想打字好长不想打字好长不想打字好长不想打字好长不想打字。</td>
</tr>
<tr>
<td><div class="user reply">秋叶，很长的名字</div></td>
<td class="comments"><b>亲爱的。。。好长不想打字，好长不想打字好长不想打字好长不想打字好长不想打字好长不想打字好长不想打字好长不想打字好长不想打字好长不想打字好长不想打字好长不想打字</b></td>
</tr>
</table>
</div>
</div>
希望能帮助到你^.^
1、使用标签<table></table>定义网页的表格,使用style赋值类型将显示在网页。
2、使用<tr>标签定义行,使用<th>定义表头,表头的文字自动加粗。
3、<tr>和<td>标签配合,定义每行中的表格数量,现在定义3行5列的表格。
4、使用<caption></caption>定义表格的标题。
5、表格分为三个部分,表头部，表主体，表尾部。
6、表头部和主体分别放标题和表格的内容,而表的尾部通常放的是页数。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）