html部分，biaoge.html
<!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=utf-8" />
<title>Top 10 Express Table Designs - Smashing Magazine Source</title>
<style type="text/css">
<!--
@import url("style.css");
-->
</style>
</head>
<body>
<table id="background-image" summary="Meeting Results">
<thead>
<tr>
<th scope="col">Employee</th>
<th scope="col">Division</th>
<th scope="col">Suggestions</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="4">IE 6 users won‘t see the transparent background if the hack is not applied</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Stephen C. Cox</td>
<td>Marketing</td>
<td>Make discount offers</td>
</tr>
<tr>
<td>Josephin Tan</td>
<td>Advertising</td>
<td>Give bonuses</td>
</tr>
<tr>
<td>Joyce Ming</td>
<td>Marketing</td>
<td>New designs</td>
</tr>
<tr>
<td>James A. Pentel</td>
<td>Marketing</td>
<td>Better Packaging</td>
</tr>
</tbody>
</table>
</body>
</html>
css部分，style.css
/* ------------------
styling for the tables
------------------ */
body
{
line-height: 1.6em;
}
#background-image
{
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 12px;
margin: 45px;
width: 480px;
text-align: left;
border-collapse: collapse;
background: url(‘table-images/blurry.jpg‘) 330px 59px no-repeat;
}
#background-image th
{
padding: 12px;
font-weight: normal;
font-size: 14px;
color: #339;
}
#background-image td
{
padding: 9px 12px;
color: #669;
border-top: 1px solid #fff;
}
#background-image tfoot td
{
font-size: 11px;
}
#background-image tbody td
{
background: url(‘table-images/back.png‘);
}
* html #background-image tbody td
{
/*
----------------------------
PUT THIS ON IE6 ONLY STYLE
AS THE RULE INVALIDATES
YOUR STYLESHEET
----------------------------
*/
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=‘table-images/back.png‘,sizingMethod=‘crop‘);
background: none;
}
#background-image tbody tr:hover td
{
color: #339;
background: none;
}
效果图
时间： 2024-11-06 14:59:40