该博客展示了用HTML表格知识设计的新浪微博网页。网页包含微博logo、banner、热议话题、用户登录、热门用户排行等内容，还展示了正在使用微博的用户、大家的发言等信息，最后有帮助、反馈等链接及版权信息。
练习5：新浪微博，请按图2-5的样子设计网页（利用表格知识），网页素材自行请下载实验附件（文件名P2_5.html）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=" 1.0>
<title>新浪微博</title>
</head>
<body>
<table width="990" cellpadding="0" cellspacing="0" broder="0">
<tr>
<td colspan="2" align="left">
<img src="./images/logo.png" width="164" height="68">
</td>
</tr>
<tr valign="top">
<td width="710">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="./images/banner.jpg" width="710" height="182"></td>
</tr>
<tr>
<td bgcolor="#228B22" height=40> <img src="./images/icon_hot.gif" width="16"
height="16">
正在热议：<u>全国两会</u> <u>欧冠</u> <u>两会微愿景</u> <u>代表委员微博</u>
<u>春暖花开</u> <u>旭日阳刚</u> <u>小沈阳</u> <u>西单女孩</u>
</td>
</tr>
</table>
</td>
<td rowspan="2">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<img src="./images/login.gif" width="280" height="398">
</td>
</tr>
<tr height="45">
<td></td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="5" align="center">
<img src="./images/title_top10.gif" width="186" height="26">
</td>
</tr>
<tr>
<td width="10">
</td>
<td align="right">
<img src="./images/num_01.gif" width="14" height="14">
</td>
<td align="center">
姚晨
</td>
<td width="50">
</td>
<td>
6,665,064
</td>
</tr>
<tr height="5">
</tr>
<tr>
<td width="10">
</td>
<td align="right">
<img src="./images/num_02.gif" width="14" height="14">
</td>
<td align="center">
小S
</td>
<td width="50">
</td>
<td>
5,728,619
</td>
</tr>
<tr height="5">
</tr>
<tr>
<td width="10">
</td>
<td align="right">
<img src="./images/num_03.gif" width="14" height="14">
</td>
<td align="center">
赵薇
</td>
<td width="50">
</td>
<td>
5,503,863
</td>
</tr>
<tr height="5">
</tr>
<tr>
<td width="10">
</td>
<td align="right">
<img src="./images/num_04.gif" width="14" height="14">
</td>
<td align="center">
蔡康永
</td>
<td width="50">
</td>
<td>
5,126,106
</td>
</tr>
<tr height="5">
</tr>
<tr>
<td width="10">
</td>
<td align="right">
<img src="./images/num_05.gif" width="14" height="14">
</td>
<td align="center">
谢娜
</td>
<td width="50">
</td>
<td>
4,756,902
</td>
</tr>
<tr height="5">
</tr>
<tr>
<td width="10">
</td>
<td align="right">
<img src="./images/num_06.gif" width="14" height="14">
</td>
<td align="center">
何炅
</td>
<td width="50">
</td>
<td>
4,731,390
</td>
</tr>
<tr height="5">
</tr>
<tr>
<td width="10">
</td>
<td align="right">
<img src="./images/num_07.gif" width="14" height="14">
</td>
<td align="center">
杨幂
</td>
<td width="50">
</td>
<td>
4,336,483
</td>
</tr>
<tr height="5">
</tr>
<tr>
<td width="10">
</td>
<td align="right">
<img src="./images/num_08.gif" width="14" height="14">
</td>
<td align="center">
李冰冰
</td>
<td width="50">
</td>
<td>
4,215,463
</td>
</tr>
<tr height="5">
</tr>
<tr>
<td width="10">
</td>
<td align="right">
<img src="./images/num_09.gif" width="14" height="14">
</td>
<td align="center">
黄健翔
</td>
<td width="50">
</td>
<td>
4,163,532
</td>
</tr>
<tr height="5">
</tr>
<tr>
<td width="10">
</td>
<td align="right">
<img src="./images/num_10.gif" width="14" height="14">
</td>
<td align="center">
李开复
</td>
<td width="50">
</td>
<td>
4,143,714
</td>
</tr>
<tr height="20">
</tr>
<tr>
<td colspan="2" align="right">
<img src="./images/icon_mobile.gif" width="16" height="17">
</td>
<td colspan="3"> 如何用手机上微博 </td>
</tr>
<tr>
<td colspan="5" align="center">WAP版微博地址：t.sina.cn </td>
</tr>
<tr>
<td colspan="5"> 更多方式>> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="680">
<tr valign="top">
<td wdith="280">
<table width="100%" border="0" cellspacing="5" cellpadding="0">
<tr>
<td>
<img src="./images/icon_elite.gif" width="15" height="12">
<b>这些人正在使用微博</b>
</td>
</tr>
<tr>
<td height="1" colspan="3" bgcolor="#eeeeee"></td>
</tr>
<tr>
<td>
<img src="./images/noavatar.gif" width="48" height="48">
<img src="./images/noavatar.gif" width="48"
height="48">
<img src="./images/noavatar.gif" width="48"
height="48">
</td>
</tr>
<tr>
<td>
<a href="#"><u>张三</u></a>
<a href="#"><u>李四</u></a>
<a href="#"><u>王五</u></a>
</td>
</tr>
<tr>
<td>
<img src="./images/noavatar.gif" width="48" height="48">
<img src="./images/noavatar.gif" width="48"
height="48">
<img src="./images/noavatar.gif" width="48"
height="48">
</td>
</tr>
<tr>
<td>
<a href="#"><u>张三</u></a>
<a href="#"><u>李四</u></a>
<a href="#"><u>王五</u></a>
</td>
</tr>
<tr>
<td>
<img src="./images/noavatar.gif" width="48" height="48">
<img src="./images/noavatar.gif" width="48"
height="48">
<img src="./images/noavatar.gif" width="48"
height="48">
</td>
</tr>
<tr>
<td>
<a href="#"><u>张三</u></a>
<a href="#"><u>李四</u></a>
<a href="#"><u>王五</u></a>
</td>
</tr>
<tr>
<td>
<img src="./images/icon_elite.gif" width="15" height="12">
<b>有趣的人</b>
</td>
</tr>
<tr>
<td height="1" colspan="3" bgcolor="#eeeeee"></td>
</tr>
<tr>
<td>
<img src="./images/noavatar.gif" width="48" height="48">
<img src="./images/noavatar.gif" width="48"
height="48">
<img src="./images/noavatar.gif" width="48"
height="48">
</td>
</tr>
<tr>
<td>
<a href="#"><u>张三</u></a>
<a href="#"><u>李四</u></a>
<a href="#"><u>王五</u></a>
</td>
</tr>
<tr>
<td>
<img src="./images/noavatar.gif" width="48" height="48">
<img src="./images/noavatar.gif" width="48"
height="48">
<img src="./images/noavatar.gif" width="48"
height="48">
</td>
</tr>
<tr>
<td>
<a href="#"><u>张三</u></a>
<a href="#"><u>李四</u></a>
<a href="#"><u>王五</u></a>
</td>
</tr>
<tr>
<td>
<img src="./images/noavatar.gif" width="48" height="48">
<img src="./images/noavatar.gif" width="48"
height="48">
<img src="./images/noavatar.gif" width="48"
height="48">
</td>
</tr>
<tr>
<td>
<a href="#"><u>张三</u></a>
<a href="#"><u>李四</u></a>
<a href="#"><u>王五</u></a>
</td>
</tr>
</table>
</td>
<td width="410">
<table width="100%" border="0" cellspacing="5" cellpadding="0">
<tr>
<td colspan="2" rowspan="2">
<img src="./images/icon_elite.gif" width="15" height="12">
<b>大家都在说</b>
</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td height="1" colspan="2" bgcolor="#eeeeee"></td>
</tr>
<tr>
<td width="90" height="90" rowspan="2" align="center"><img
src="./images/noavatar.gif" width="48" height="=48"></td>
<td width="350" height="10"><a href="#"><u>赵六</u></a>:2012年的第一场雪</td>
</tr>
<tr>
<td height="10"> 2 分钟前</td>
</tr>
<tr>
<td width="90" height="90" rowspan="2" align="center"><img
src="./images/noavatar.gif" width="48" height="=48"></td>
<td width="350" height="10"><a href="#"><u>冯七</u></a>:&M三月上架新品目录，同学们先看好了，再去逛吧</td>
</tr>
<tr>
<td height="10"> 2 分钟前</td>
</tr>
<tr>
<td width="90" height="90" rowspan="2" align="center"><img
src="./images/noavatar.gif" width="48" height="=48"></td>
<td width="350" height="10"><a href="#"><u>赵六</u></a>:2012年的第一场雪</td>
</tr>
<tr>
<td height="10"> 2 分钟前</td>
</tr>
<tr>
<td width="90" height="90" rowspan="2" align="center"><img
src="./images/noavatar.gif" width="48" height="=48"></td>
<td width="350" height="10"><a href="#"><u>冯七</u></a>:H&M三月上架新品目录，同学们先看好了，再去逛吧</td>
</tr>
<tr>
<td height="10"> 2 分钟前</td>
</tr>
<tr>
<td width="90" height="90" rowspan="2" align="center"><img
src="./images/noavatar.gif" width="48" height="=48"></td>
<td width="350" height="10"><a href="#"><u>赵六</u></a>:2012年的第一场雪</td>
</tr>
<tr>
<td height="10"> 2 分钟前</td>
</tr>
<tr>
<td width="90" height="90" rowspan="2" align="center"><img
src="./images/noavatar.gif" width="48" height="=48"></td>
<td width="350" height="10"><a href="#"><u>冯七</u></a>:H&M三月上架新品目录，同学们先看好了，再去逛吧</td>
</tr>
<tr>
<td height="10"> 2 分钟前</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2">
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="background-color:#D6F3F7;">
<tr>
<td>
<a href="#"><u>帮助</u></a>
<a href="#"><u>意见反馈</u></a>
<a href="#"><u>微博认证及合作</u></a>
<a href="#"><u>开放平台</u></a>
<a href="#"><u>微博招聘</u></a>
<a href="#"><u>新浪网导航</u></a>
</td>
<td width="80"></td>
<td>
新浪公司 版权所有
</td>
<td rowspan="2" align="center"><img src="./images/jubao.gif" width="125" height="52"></td>
</tr>
<tr>
<td>
客服电话：400 690 0000 提示音后按1键 (按当地市话标准计费)
</td>
<td width="80"></td>
<td>
语言：中文(简体)
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
