dl、dt、dd 标识来更新改造163电子邮箱的广告宣传

日期:2021-03-16 类型:科技新闻 

关键词:培训互动游戏h5,微信群互动大转盘,h5安全互动游戏,报名抽奖能互动的,微信互动游戏摇一摇

开启网易电子邮箱的登陆页面,大家会发现,在主页的底部有这样1个“全新动态性”的广告宣传条,其设计方案编码以下: HTML编码

[Ctrl A 所有挑选 提醒:你可先改动一部分编码,再按运作]
在这里,网易选用了table来设计方案这个网页页面实际效果,自然<table>用在这里并沒有甚么不当之处。可是今日,大家关键是想用1个非<table>方式来做到一样的实际效果。
最先看1下用到的情况图
这张照片中包括了全部该网页页面选用到的照片,在这个横条中只用到了底部了两个,大家能够看出,针对长度远小于具体內容的情况来讲,应用<table>有许多便捷性。
接下来大家看看如何用非<table>标识来做到一样的实际效果:最先,从现实主义上看来“全新动态性”是题目,其它后边几项全是“全新动态性的详尽內容”,存在次序关联。这个最少能够想起1点便是“全新动态性”将会用到<hn>标识;其次,各內容之间的并列关联,针对解决并列关联大家常见的便是无编码序列表<ul>了;最终,融合上面的次序与并列,大家能够考虑到用<dl><dt><dd>来完成这个实际效果了(有关这3个标识的实际含意和运用请参照“ 常常被忘却的关键标识——<dl><dt><dd>”)。
  1. *{padding:0;margin:0;font-size:12px;font-family:Tahoma"宋体"} dl{background:#E1F6FFurl(attachments/month_0712/g2007123002932.gif)no-repeat0px⑵59px;float:left;padding-left:5px;margin:100px0100px;}/*设置情况部位,设置情况不反复*/
  2. dt{height:26px;line-height:26px;float:left;background:RGB(187,228,246);padding:05px;}/*向左波动,以期dt和dl內容在在同1行内*/ dd{padding-left:20px;height:26px;line-height:26px;background:#E1F6FFurl(attachments/month_0712/g2007123002932.gif)no-repeat⑵30px⑶00px;display:inline;float:left}/*为每一个dd设置款式,自然在一些状况下可使用list-style-type,但这里好像行堵塞*/
  3. .first{padding-left:16px;background:#E1F6FFurl(attachments/month_0712/g2007123002932.gif)no-repeat⑻px⑵59px;}/*设置first的独特款式*/ .last{padding-left:40px;padding-right:20px;background:#E1F6FF;background:url(attachments/month_0712/g2007123002932.gif)no-repeat⑴7px⑵59px;}


* {padding:0;margin:0;font-size:12px;font-family:Tahoma "宋体"}
dl {background:#E1F6FF url(attachments/month_0712/g2007123002932.gif) no-repeat 0px ⑵59px;float:left;padding-left:5px; margin:100px 0 100px;} /*设置情况部位,设置情况不反复*/
dt {height:26px;line-height:26px;float:left;background:RGB(187,228,246);padding:0 5px;}/*向左波动,以期dt和dl內容在在同1行内*/
dd {padding-left:20px; height:26px;line-height:26px;background:#E1F6FF url(attachments/month_0712/g2007123002932.gif) no-repeat ⑵30px ⑶00px;display:inline;float:left}/*为每一个dd设置款式,自然在一些状况下可使用list-style-type,但这里好像行堵塞*/
.first {padding-left:16px;background:#E1F6FF url(attachments/month_0712/g2007123002932.gif) no-repeat ⑻px ⑵59px;}/*设置first的独特款式*/
.last {padding-left:40px;padding-right:20px;background:#E1F6FF;background:url(attachments/month_0712/g2007123002932.gif) no-repeat ⑴7px ⑵59px;}
  1. <dl>
  2. <dt>全新动态性</dt> <ddclass="first"></dd>
  3. <ddheight="26">100%有奖!白金情侣项链等你拿</dd> <dd>出门出外,应急电子邮件解决不上如何办?</dd>
  4. <dd>打造我国最好是的收费电子邮箱</dd> <ddclass="last"></dd>
  5. </dl>

<dl>
<dt>全新动态性</dt>
<dd class="first"></dd>
<dd height="26">100%有奖!白金情侣项链等你拿</dd>
<dd>出门出外,应急电子邮件解决不上如何办?</dd>
<dd>打造我国最好是的收费电子邮箱</dd>
<dd class="last"></dd>
</dl>
运作上面的实际效果,大家能够看到二者大致类似。
自然,本例存在1个难题便是<dd class="first"></dd>和<dd class="last"></dd>是两个以便完成大家要想的实际效果而存在的,并没有确实的词义,因而这也是本例的1个缺陷。但是我坚信,应当有更好的不应用<table>标识完成此类难题方法。