dl、dt、dd 标记来改造163邮箱的广告条
6 浏览量
2020-12-10
03:28:55
上传
评论
收藏 71KB PDF 举报
dl、、dt、、dd 标记来改造标记来改造163邮箱的广告条邮箱的广告条
打开网易邮箱的登录界面，我们会发现，在首页的底部有这样一个“最新动态”的广告条，其设计代码如下：
HTML代码
<!DOCTYPE html
PUBLIC "-//W3C//DTD
XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xh
tml1/DTD/xhtml1-
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="keywords" content="网易163邮箱–中文邮箱第一品牌" />
<meta name="description" content="网易163邮箱–中文邮箱第一品牌" />
<title>网易163免费邮–中文邮箱第一品牌</title>
<link rel="shortcut icon" href="http://mail.163.com/favicon.ico" />
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
<link href="http://mimg.163.com/index/new/163_index_style12.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="NewsDiv">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td id="NewsDiv-left"></td>
<td width="80" align="center" valign="middle" class="font2" ><a href="http://kefu.mail.163.com/?from=163sy2"
target="_blank">最新动态</a></td>
<td id="NewsDiv-mid"></td>
<td class="NewsDiv-mid2"><a href="http://popogame.163.com/topic/match/index.html?from=163" target="_blank">100％有
奖！白金情侣项链等你拿</a>
</td>
<td class="NewsDiv-mid2><a href="http://smsmail.163.com/newsmsmail/eaw_index.jsp" target="_blank">出门在外，紧急邮
件处理不了怎么办？</a></td>
<td class="NewsDiv-mid2"><a href="http://www.188.com/" target="_blank">打造中国最好的收费邮箱</a</td>
<td id="NewsDiv-rig"><a href="http://kefu.mail.163.com/?from=163sy2" target="_blank" title="更多"><span
class="arrow">>></span></a></td>
</tr>
</table>
</div>
</body>
</html>
[Ctrl A 全部选择 提示：你可先修改部分代码，再按运行]
在这里，网易采用了table来设计这个页面效果，当然<table>用在这里并没有什么不妥。但是今天，我们主要是想用一个非
<table>方法来达到同样的效果。
首先看一下用到的背景图
评论0