展示图
代码片段
<body><table width="960" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td width="170" height="70" class="logo"><img src="images/logo.gif" width="97" height="46" /></td><td width="370"><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td height="40" colspan="9" class="welcome">网上购物享当当</td></tr><tr><td width="70" height="30" class="nav-current">首页</td><td width="5"></td><td width="70" class="nav">图书</td><td width="5"></td><td width="70" class="nav">百货</td><td width="5"></td><td width="70" class="nav">品牌</td><td width="5"></td><td width="70" class="nav">促销</td></tr></table></td><td><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td height="40"> </td></tr><tr><td height="30" class="help">商家 | 当当榜 | 礼物 | 在线读书 | 更多服务</td></tr></table></td></tr></table><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td class="navbar">音乐 | 影视 | 少儿 | 教辅 | 小说 | 外语 | 数码相机 | 笔记本 | 春装 | 外套 | 新款单鞋 | 运动鞋 | 美容护肤 | 家纺用品 | 婴幼奶粉 | 玩具 | 美食保健 | 饰品</td></tr></table><br /><table width="960" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td width="230" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td width="77" height="34" class="left-title-current">五星图书榜</td><td class="left-title">新书热卖榜</td><td class="left-title-right">图书畅销榜</td></tr></table></td></tr><tr><td class="left-list"><table width="210" border="0" align="center" cellpadding="0" cellspacing="4"><tr><td width="80" rowspan="2"><img src="images/icon_left_list_01.gif" width="78" height="72" /></td><td>1.风语(2)(当当网全国独家首发)</td></tr><tr><td>¥18.50</td></tr></table><table width="210" border="0" align="center" cellpadding="0" cellspacing="4"><tr><td width="80" rowspan="2"><img src="images/icon_left_list_02.gif" width="78" height="72" /></td><td>2.胆小鬼(从青春疼痛到直面生活)</td></tr><tr><td>¥16.80</td></tr></table><table width="210" border="0" align="center" cellpadding="0" cellspacing="4"><tr><td width="80" rowspan="2"><img src="images/icon_left_list_03.gif" width="78" height="72" /></td><td>3.心理罪之暗河-中国心理犯罪小说第一人</td></tr><tr><td>¥17.50</td></tr></table><table width="210" border="0" align="center" cellpadding="0" cellspacing="4"><tr><td width="80" rowspan="2"><img src="images/icon_left_list_04.gif" width="78" height="72" /></td><td>4.生活教养第一书·小鼠宝贝成长日记</td></tr><tr><td>¥94.20</td></tr></table><table width="210" border="0" align="center" cellpadding="0" cellspacing="4"><tr><td width="80" rowspan="2"><img src="images/icon_left_list_05.gif" width="78" height="72" /></td><td>5.绝色倾城(国内"残酷情爱"小说第一人)</td></tr><tr><td>¥20.60</td></tr></table></td></tr><tr><td height="3" class="left-list-bottom"></td></tr></table></td><td></td><td width="720" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td class="books"><table width="700" border="0" cellspacing="0" cellpadding="0"><tr><td class="t-right">理财 | 美妆 | 家教 | 教辅 | 少儿 | 历史 | 励志 | 传记</td></tr></table></td></tr><tr><td><table width="100%" border="0" cellspacing="20" cellpadding="0"><tr><td width="20%"><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td class="t-center"><img src="images/icon_right_01.jpg" width="100" height="100" /></td></tr><tr><td class="book-title">法布尔昆虫记(共10册) 儿童彩图版</td></tr><tr><td class="book-price"><strong>¥130.70</strong></td></tr></table></td><td width="20%"><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td class="t-center"><img src="images/icon_right_02.jpg" width="100" height="100" /></td></tr><tr><td class="book-title">官路 透视官场权力背后的隐痛</td></tr><tr><td class="book-price"><strong>¥18.90</strong></td></tr></table></td><td width="20%"><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td class="t-center"><img src="images/icon_right_03.jpg" width="100" height="100" /></td></tr><tr><td class="book-title">我的抗战 独家赠送精美木刻画一套</td></tr><tr><td class="book-price"><strong>¥19.10</strong></td></tr></table></td><td width="20%"><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td class="t-center"><img src="images/icon_right_04.jpg" width="100" height="100" /></td></tr><tr><td class="book-title">高考战斗手册(第二版) 附赠MP3光盘</td></tr><tr><td class="book-price"><strong>¥17.90</strong></td></tr></table></td><td width="20%"><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td class="t-center"><img src="images/icon_right_05.jpg" width="100" height="100" /></td></tr><tr><td class="book-title">玛蒂娜全辑(全70册)</td></tr><tr><td class="book-price"><strong>¥319.4</strong></td></tr></table></td></tr></table></td></tr><tr><td><table width="100%" border="0" cellspacing="10" cellpadding="0"><tr><td width="20%"><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td class="t-center"><img src="images/icon_right_06.jpg" width="95" height="130" /></td></tr><tr><td class="book-title">柯斯林30分钟粉彩画</td></tr><tr><td class="book-price"><strong>¥28.8</strong></td></tr></table></td><td width="20%"><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td class="t-center"><img src="images/icon_right_07.jpg" width="95" height="130" /></td></tr><tr><td class="book-title">史努比漫画全集</td></tr><tr><td class="book-price"><strong>¥68.0</strong></td></tr></table></td><td width="20%"><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td class="t-center"><img src="images/icon_right_08.jpg" width="95" height="130" /></td></tr><tr><td class="book-title">数学是怎样学好的——王金战教你玩转数学</td></tr><tr><td class="book-price"><strong>¥15.3</strong></td></tr></table></td><td width="20%"><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td class="t-center"><img src="images/icon_right_09.jpg" width="95" height="130" /></td></tr><tr><td class="book-title">睡在拯救中国经济</td></tr><tr><td class="book-price"><strong>¥17.8</strong></td></tr></table></td><td width="20%"><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td class="t-center"><img src="images/icon_right_10.jpg" width="95" height="130" /></td></tr><tr><td class="book-title">四书五经译著(全套九册)</td></tr><tr><td class="book-price"><strong>¥223.5</strong></td></tr></table></td></tr></table></td></tr></table></td></tr></table><br /><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td class="footer"><table width="960" border="0" align="center" cellpadding="10" cellspacing="0"><tr><td class="t-center">公司简介|Investor Relations|诚征英才|网站联盟|百货招商|团购|手机当当|官方Blog<br />Copyright (C) 当当网 -, All Rights Reserved|京ICP证041189号音像制品经营许可证 京音网8号<br /><img src="images/cert_01.gif" width="128" height="47" /> <img src="images/cert_02.gif" width="128" height="47" /></td></tr></table></td></tr></table></body>
<style type="text/css">body {font-size: 12px;line-height: 20px;}.logo {text-align: center;}.nav-current {background-image: url(images/nav_current_bg.gif);background-repeat: no-repeat;text-align: center;color: #FFF;}.nav {background-image: url(images/nav_bg.gif);background-repeat: no-repeat;text-align: center;}.welcome {color: #ff6501;}.help {color: #656565;text-align: right;}.navbar {line-height: 30px;color: #FFF;background-color: #fc883b;text-align: center;}.left-title-current {background-image: url(images/left_title_current.gif);background-repeat: no-repeat;text-align: center;}.left-title {background-image: url(images/left_title_bg.gif);background-repeat: no-repeat;text-align: center;}.left-list {background-image: url(images/left-list-bg.gif);background-repeat: repeat-y;}.left-title-right {background-image: url(images/left_title_right.gif);background-repeat: no-repeat;text-align: center;}.left-list-bottom {background-image: url(images/left_list_bottom.gif);background-repeat: no-repeat;}.books {background-image: url(images/right_title_01.gif);background-repeat: no-repeat;line-height: 32px;}.books1 {background-image: url(images/right_title_01.gif);background-repeat: no-repeat;line-height: 32px;text-align: right;}.t-right {text-align: right;}.t-center {text-align: center;}.book-title {color: #656565;}.book-price {color: #cb3400;}.footer {background-color: #f9f9f9;background-image: url(images/bottom_line.gif);background-repeat: repeat-x;}</style>
完整代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>当当网首页</title> <style type="text/css"> body { font-size: 12px; line-height: 20px; } .logo { text-align: center; } .nav-current { background-image: url(images/nav_current_bg.gif); background-repeat: no-repeat; text-align: center; color: #FFF; } .nav { background-image: url(images/nav_bg.gif); background-repeat: no-repeat; text-align: center; } .welcome { color: #ff6501; } .help { color: #656565; text-align: right; } .navbar { line-height: 30px; color: #FFF; background-color: #fc883b; text-align: center; } .left-title-current { background-image: url(images/left_title_current.gif); background-repeat: no-repeat; text-align: center; } .left-title { background-image: url(images/left_title_bg.gif); background-repeat: no-repeat; text-align: center; } .left-list { background-image: url(images/left-list-bg.gif); background-repeat: repeat-y; } .left-title-right { background-image: url(images/left_title_right.gif); background-repeat: no-repeat; text-align: center; } .left-list-bottom { background-image: url(images/left_list_bottom.gif); background-repeat: no-repeat; } .books { background-image: url(images/right_title_01.gif); background-repeat: no-repeat; line-height: 32px; } .books1 { background-image: url(images/right_title_01.gif); background-repeat: no-repeat; line-height: 32px; text-align: right; } .t-right { text-align: right; } .t-center { text-align: center; } .book-title { color: #656565; } .book-price { color: #cb3400; } .footer { background-color: #f9f9f9; background-image: url(images/bottom_line.gif); background-repeat: repeat-x; } </style></head>
<body> <table width="960" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td width="170" height="70" class="logo"><img src="images/logo.gif" width="97" height="46" /></td> <td width="370"><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="40" colspan="9" class="welcome">网上购物享当当</td> </tr> <tr> <td width="70" height="30" class="nav-current">首页</td> <td width="5"></td> <td width="70" class="nav">图书</td> <td width="5"></td> <td width="70" class="nav">百货</td> <td width="5"></td> <td width="70" class="nav">品牌</td> <td width="5"></td> <td width="70" class="nav">促销</td> </tr> </table></td> <td><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="40"> </td> </tr> <tr> <td height="30" class="help">商家 | 当当榜 | 礼物 | 在线读书 | 更多服务</td> </tr> </table></td> </tr> </table> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td class="navbar">音乐 | 影视 | 少儿 | 教辅 | 小说 | 外语 | 数码相机 | 笔记本 | 春装 | 外套 | 新款单鞋 | 运动鞋 | 美容护肤 | 家纺用品 | 婴幼奶粉 | 玩具 | 美食保健 | 饰品</td> </tr> </table> <br /> <table width="960" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td width="230" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="77" height="34" class="left-title-current">五星图书榜</td> <td class="left-title">新书热卖榜</td> <td class="left-title-right">图书畅销榜</td> </tr> </table></td> </tr> <tr> <td class="left-list"><table width="210" border="0" align="center" cellpadding="0" cellspacing="4"> <tr> <td width="80" rowspan="2"><img src="images/icon_left_list_01.gif" width="78" height="72" /></td> <td>1.风语(2)(当当网全国独家首发)</td> </tr> <tr> <td>¥18.50</td> </tr> </table> <table width="210" border="0" align="center" cellpadding="0" cellspacing="4"> <tr> <td width="80" rowspan="2"><img src="images/icon_left_list_02.gif" width="78" height="72" /></td> <td>2.胆小鬼(从青春疼痛到直面生活)</td> </tr> <tr> <td>¥16.80</td> </tr> </table> <table width="210" border="0" align="center" cellpadding="0" cellspacing="4"> <tr> <td width="80" rowspan="2"><img src="images/icon_left_list_03.gif" width="78" height="72" /></td> <td>3.心理罪之暗河-中国心理犯罪小说第一人</td> </tr> <tr> <td>¥17.50</td> </tr> </table> <table width="210" border="0" align="center" cellpadding="0" cellspacing="4"> <tr> <td width="80" rowspan="2"><img src="images/icon_left_list_04.gif" width="78" height="72" /></td> <td>4.生活教养第一书·小鼠宝贝成长日记</td> </tr> <tr> <td>¥94.20</td> </tr> </table> <table width="210" border="0" align="center" cellpadding="0" cellspacing="4"> <tr> <td width="80" rowspan="2"><img src="images/icon_left_list_05.gif" width="78" height="72" /></td> <td>5.绝色倾城(国内"残酷情爱"小说第一人)</td> </tr> <tr> <td>¥20.60</td> </tr> </table></td> </tr> <tr> <td height="3" class="left-list-bottom"></td> </tr> </table></td> <td></td> <td width="720" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td class="books"><table width="700" border="0" cellspacing="0" cellpadding="0"> <tr> <td class="t-right">理财 | 美妆 | 家教 | 教辅 | 少儿 | 历史 | 励志 | 传记</td> </tr> </table></td> </tr> <tr> <td><table width="100%" border="0" cellspacing="20" cellpadding="0"> <tr> <td width="20%"><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td class="t-center"><img src="images/icon_right_01.jpg" width="100" height="100" /></td> </tr> <tr> <td class="book-title">法布尔昆虫记(共10册) 儿童彩图版</td> </tr> <tr> <td class="book-price"><strong>¥130.70</strong></td> </tr> </table></td> <td width="20%"><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td class="t-center"><img src="images/icon_right_02.jpg" width="100" height="100" /></td> </tr> <tr> <td class="book-title">官路 透视官场权力背后的隐痛</td> </tr> <tr> <td class="book-price"><strong>¥18.90</strong></td> </tr> </table></td> <td width="20%"><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td class="t-center"><img src="images/icon_right_03.jpg" width="100" height="100" /></td> </tr> <tr> <td class="book-title">我的抗战 独家赠送精美木刻画一套</td> </tr> <tr> <td class="book-price"><strong>¥19.10</strong></td> </tr> </table></td> <td width="20%"><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td class="t-center"><img src="images/icon_right_04.jpg" width="100" height="100" /></td> </tr> <tr> <td class="book-title">高考战斗手册(第二版) 附赠MP3光盘</td> </tr> <tr> <td class="book-price"><strong>¥17.90</strong></td> </tr> </table></td> <td width="20%"><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td class="t-center"><img src="images/icon_right_05.jpg" width="100" height="100" /></td> </tr> <tr> <td class="book-title">玛蒂娜全辑(全70册)</td> </tr> <tr> <td class="book-price"><strong>¥319.4</strong></td> </tr> </table></td> </tr> </table></td> </tr> <tr> <td><table width="100%" border="0" cellspacing="10" cellpadding="0"> <tr> <td width="20%"><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td class="t-center"><img src="images/icon_right_06.jpg" width="95" height="130" /></td> </tr> <tr> <td class="book-title">柯斯林30分钟粉彩画</td> </tr> <tr> <td class="book-price"><strong>¥28.8</strong></td> </tr> </table></td> <td width="20%"><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td class="t-center"><img src="images/icon_right_07.jpg" width="95" height="130" /></td> </tr> <tr> <td class="book-title">史努比漫画全集</td> </tr> <tr> <td class="book-price"><strong>¥68.0</strong></td> </tr> </table></td> <td width="20%"><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td class="t-center"><img src="images/icon_right_08.jpg" width="95" height="130" /></td> </tr> <tr> <td class="book-title">数学是怎样学好的——王金战教你玩转数学</td> </tr> <tr> <td class="book-price"><strong>¥15.3</strong></td> </tr> </table></td> <td width="20%"><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td class="t-center"><img src="images/icon_right_09.jpg" width="95" height="130" /></td> </tr> <tr> <td class="book-title">睡在拯救中国经济</td> </tr> <tr> <td class="book-price"><strong>¥17.8</strong></td> </tr> </table></td> <td width="20%"><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td class="t-center"><img src="images/icon_right_10.jpg" width="95" height="130" /></td> </tr> <tr> <td class="book-title">四书五经译著(全套九册)</td> </tr> <tr> <td class="book-price"><strong>¥223.5</strong></td> </tr> </table></td> </tr> </table></td> </tr> </table></td> </tr> </table> <br /> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td class="footer"><table width="960" border="0" align="center" cellpadding="10" cellspacing="0"> <tr> <td class="t-center">公司简介|Investor Relations|诚征英才|网站联盟|百货招商|团购|手机当当|官方Blog<br /> Copyright (C) 当当网 -, All Rights Reserved|京ICP证041189号音像制品经营许可证 京音网8号<br /> <img src="images/cert_01.gif" width="128" height="47" /> <img src="images/cert_02.gif" width="128" height="47" /></td> </tr> </table></td> </tr> </table> </body> </html>
如果觉得《完整的电商网页 技术html css》对你有帮助,请点赞、收藏,并留下你的观点哦!