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