<!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=gb2312" />
<title>表格</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
body {
font: 11px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
form {
margin: 20px;
}
table.formdata{
border: 1px solid #5f6f7e;
border-collapse: collapse;
margin-bottom: 20px;
}
table.formdata caption{
padding:0 0 6px 0;
text-align:center;
}
table.formdata th{
border:1px solid #66CCCC;
background: #6699CC;
text-align:center;
font-weight:normal;
padding:2px 8px;
}
table.formdata td{
border:1px solid #66CCCC;
padding:1px 3px;
}
table.formdata td input{
border:none;
width:100px;
}
form .btn{
margin-left:120px;
}
<script language="javascript" type="text/javascript" function hilite(obj)>{
obj:document.get ElementByld("td"+obj.name.to string()):
obj style.boder='2px solid #007eff;'
}
</style>
</head>
<body>
<form method="post">
<table class="formdata">
<caption> 电脑配件价格</caption>
<tr>
<th></th>
<th>2005</th>
<th>2006</th>
<th>2007</th>
<th>2008</th>
</tr>
<tr>
<th>hard disk</th>
<td><input type="text" name="hard disk 2005" id="hard disk 2005" onfocus="hilite(this)" /></td>
<td><input type="text" name="hard disk 2005" id="hard disk 2005" onfocus="hilite(this)" /></td>
<td><input type="text" name="hard disk 2005" id="hard disk 2005" onfocus="hilite(this)" /></td>
<td><input type="text" name="hard disk 2005" id="hard disk 2005" onfocus="hilite(this)" /></td>
</tr>
<tr>
<th>mainboard</th>
<td><input type="text" name="mainboard" id="mainboard" onfocus="hilite(this)" /></td>
<td><input type="text" name="mainboard" id="mainboard" onfocus="hilite(this)" /></td>
<td><input type="text" name="mainboard" id="mainboard" onfocus="hilite(this)" /></td>
<td><input type="text" name="mainboard" id="mainboard" onfocus="hilite(this)" /></td>
</tr>
<tr>
<th>case</th>
<td><input type="text" name="case" id="case" onfocus="hilite(this)" /></td>
<td><input type="text" name="case" id="case" onfocus="hilite(this)" /></td>
<td><input type="text" name="case" id="case" onfocus="hilite(this)" /></td>
<td><input type="text" name="case" id="case" onfocus="hilite(this)" /></td>
</tr>
<tr>
<th>cpu fan</th>
<td><input type="text" name="cpu fan" id="cpu fan" onfocus="hilite(this)" /></td>
<td><input type="text" name="cpu fan" id="cpu fan" onfocus="hilite(this)" /></td>
<td><input type="text" name="cpu fan" id="cpu fan" onfocus="hilite(this)" /></td>
<td><input type="text" name="cpu fan" id="cpu fan" onfocus="hilite(this)" /></td>
</tr>
<tr>
<th>memorydisk</th>
<td><input type="text" name="memorydisk" id="memorydisk" onfocus="hilite(this)" /></td>
<td><input type="text" name="memorydisk" id="memorydisk" onfocus="hilite(this)" /></td>
<td><input type="text" name="memorydisk" id="memorydisk" onfocus="hilite(this)" /></td>
<td><input type="text" name="memorydisk" id="memorydisk" onfocus="hilite(this)" /></td>
</tr>
<tr>
<th>power</th>
<td><input type="text" name="power" id="power" onfocus="hilite(this)" /></td>
<td><input type="text" name="power" id="power" onfocus="hilite(this)" /></td>
<td><input type="text" name="power" id="power" onfocus="hilite(this)" /></td>
<td><input type="text" name="power" id="power" onfocus="hilite(this)" /></td>
</tr>
<tr>
<th>total</th>
<td><input type="text" name="total" id="total" onfocus="hilite(this)" /></td>
<td><input type="text" name="total" id="total" onfocus="hilite(this)" /></td>
<td><input type="text" name="total" id="total" onfocus="hilite(this)" /></td>
<td><input type="text" name="total" id="total" onfocus="hilite(this)" /></td>
</tr>
</table>
<p>
<input type="button" name="btnsubmit" id="btnsubmit" value="Add data" class="btn"/>
<input type="button" name="btnreset" id="btnreset" value="Reset" class="btn"/>
</p>
</form>
</body>
</html>
HTML+css静态网页制作简单实例
5星 · 超过95%的资源 需积分: 46 121 浏览量
2010-06-16
09:58:51
上传
评论 65
收藏 599KB RAR 举报 
css作业.rar （24个子文件） 
css作业 
sj3.html 3KB sj8-2.html 4KB image 
sj8-1.gif 261B
sj1-1.jpg 110KB sj5-3.jpg 107KB right_bottom.jpg 3KB sj5-2.jpg 161KB left_bottom.jpg 4KB sj6.jpg 3KB logo.jpg 2KB right_top.jpg 1KB sj5-1.jpg 3KB sj1-3.jpg 134KB left_top.jpg 2KB sj1-2.jpg 112KB sj4-2.html 3KB index1.html 2KB sj2.html 3KB sj8-1.html 1KB sj6.html 3KB sj1.html 591B sj7.html 2KB sj5.html 3KB sj4-1.html 3KB
- 1
- 2
- 3
- 4
- 5
- 6
前往页