<!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=gb2312" />
<title>无标题文档</title>
<style>
#logis-info {
background-color: #F2F2F2;
border-bottom: 1px solid #CCE0FF;
padding: 10px;
}
#logis-info h3 {
border-bottom: 2px solid #CFE2F0;
padding: 0px 0px 5px 10px;
margin: 11px 10px 11px 10px;
}
dl.particular {
margin-left: 35px;
margin-bottom: 10px;
}
.particular dt {
color: #808080;
width: 65px;
height: 22px;
font-size: 0.8em;
position: relative;
}
.particular dd
{
margin: -22px 0px 8px 65px;
position: relative;
font-size: 0.8em;
}
ul {
list-style-type: none;
list-style-position: outside;
}
#brief ul {
margin: 0px;
padding: 0px;
display: block;
}
#brief li {
margin: 0px;
padding: 0px;
}
a:link,a:visited {
color: #0044DD;
text-decoration: none;
}
.ww-online, .ww-large, .ww-inline {
background-image: url(wangwang_v2.gif);
background-repeat: no-repeat;
text-decoration: none;
background-position: 0 0;
}
.ww-inline {
display: inline-block;
overflow: hidden;
vertical-align: text-bottom;
}
.ww-large {
height: 20px;
width: 67px;
}
.ww-online span, .ww-large span, .ww-inline span {
visibility: hidden;
white-space: nowrap;
}
.clew {
background: transparent url(exchange.png) no-repeat scroll 1000px 1000px;
background-position: -184px -186px;
color: #808080;
margin-left: 15px;
padding: 2px 0 0 20px;
}
</style>
</head>
<body>
<div id="logis-info">
<h3>
物流信息
</h3>
<dl class="particular">
<dt>物流方式:</dt>
<dd>在线下单</dd>
<dt>
物流公司:
</dt>
<dd>
<a target="_blank"
href="http://wuliu.taobao.com/partner/partner_info.htm?company_id=100&view=true">申通E物流</a>
<span ww:params="nick=申通在线客服&tnick=&display=inline"
class="ww:token"><a
href="http://webwwtb.im.alisoft.com/wangwang/ww1.htm?t=1245145328916&uid=&tid=%u7533%u901A%u5728%u7EBF%u5BA2%u670D"
target="_blank" class="ww-online ww-large ww-inline"
title="点此可以直接和卖家
交流选好的宝贝,或
相互交流网购体验,
还支持语音视频噢。"><span>旺旺在线</span>
</a>
</span>
</dd>
<dt>
物流编号:
</dt>
<dd>
LP09060972552237
</dd>
<dt>
运单号码:
</dt>
<dd>
<form method="post" action="" id="saveMailNo">
<input type="hidden" value="e5deff3e43367#9749342488695088"
name="_tb_token_" />
<input type="hidden" value="order_detail_action" name="action" />
<input type="hidden" value="anything"
name="event_submit_do_save_mail_no" />
<input type="hidden" value="937690287" name="orderId" />
<span class="edit-number">268032174837 </span>
<span class="clew">您可以到【申通E物流】网站<a target="_blank"
href="http://61.152.237.204:8080/sto/index.jsp?wen=268032174837">跟踪运单信息</a>
</span>
</form>
</dd>
<div style="color: red; font-weight: bold;">
</div>
<dt>
当前状态:
</dt>
<dd>
物流公司发货途中
</dd>
<dt>
物流跟踪:
</dt>
<dd>
<ul id="brief">
<li>
2008-04-19 19:43:13 订单创建
</li>
<li>
2008-04-19 21:34:11 订单发送至申通E物流
</li>
<li>
2008-04-19 21:36:12 订单被物流公司接受
</li>
</ul>
</dd>
</dl>
</div>
</body>
</html>
firefox中:
ie7中:
<html>
<head>
<title>dt dd</title>
<style type="text/css">
/* 淘宝的做法*/
dt {height:30px;width:100px;}
dd {margin:-30px 0 10px 100px;position:relative;}
/*
.particular dt {
color: #808080;
width: 65px;
height: 22px;
font-size: 0.8em;
}
.particular dd {
margin: -22px 0 8px 65px;
position: relative;
font-size: 0.8em;
}
*/
/* firefox is ok
dt {float:left; height:30px;width:100px;}
dd {float:left; width:900px; margin:-30px 0 10px 100px; clear:both;}
*/
/*
dt {float:left; height:30px;width:100px; margin:0 4px 4px 0; }
dd {float:left: width:900px; clear:both; margin:0 0 10px 0; }
*/
</style>
</head>
<body>
<div id="logis-info">
<dl class="particular">
<dt>物流方式:</dt>
<dd>在线下单</dd>
<dt>物流公司:</dt>
<dd><a href="http://wuliu.taobao.com/partner/partner_info.htm?company_id=100&view=true" target='_blank'>申通E物流</a> <span class="ww:token" ww:params="nick=申通在线客服&tnick=&display=inline"></span> </dd>
<dt>物流编号:</dt>
<dd>LP09050902953287</dd>
<dt>运单号码:</dt>
<dd>
<form id="saveMailNo" action="" method="post">
<input type="hidden" name="action" value="order_detail_action"/>
<input type="hidden" name="event_submit_do_save_mail_no" value="anything"/>
<input type="hidden" name="orderId" value="937690287"/>
<span class="edit-number">268370328741 </span>
<span class="clew">您可以到【申通E物流】网站<a href="http://61.152.237.204:8080/sto/index.jsp?wen=264837087321" target="_blank" >跟踪运单信息</a></span></form>
</dd>
<dt>当前状态:</dt>
<dd>物流公司发货途中</dd>
<dt>物流跟踪:</dt>
<dd>
<ul id="brief">
<li>2008-04-09 09:26:13 订单创建</li>
<li>2008-04-09 12:31:06 订单发送至申通E物流</li>
<li>2008-04-09 12:34:56 订单被物流公司接受</li>
</ul>
</dd>
<dt>物流方式:</dt>
<dd>在线下单</dd>
</dl>
</div>
</body>
</html>
firefox中:
ie7中:
用到的图片:
wangwang_v2.gif
exchange.png
值得注意的地方:
1. .particular dt 的position: relative; 如果不设这个,在firefox中能正常显示,在ie7中就不能显示dt在的标题,估计是因为dd太大了,或位置的问题,挡住了dt~~~
2. CSS white-space 属性
white-space 属性设置如何处理元素内的空白。
这个属性声明建立布局过程中如何处理元素中的空白符。值 pre-wrap 和 pre-line 是 CSS 2.1 中新增的。
http://www.w3school.com.cn/css/pr_text_white-space.asp
3.运单号码: 中显示叹号的图片只是一张大图片的一部分而已.程序都习惯以一张大图片来包含很多小小的资源~~
4.forefox和ie7中的显示效果不同,ie7实在还是太不规范了,一些效果真不知要怎样设!望高人指教~~~!!!
如 物流跟踪: 中的列表在ie7中就缩进了~~~真不知要怎么设~~~
又像 运单号码: 中在ie7中就会dd中的编号264837087321比dt中的运单号码:低了一行~~~这又真够令人头痛的事~~~
望高人指教~~~!!!
- 大小: 126.4 KB
- 大小: 24.8 KB
- 大小: 27 KB
- 大小: 29.9 KB
- 大小: 32.2 KB
- 大小: 2.4 KB
- 大小: 11.5 KB
分享到:
相关推荐
淘宝网店添加背景图片代码,淘宝网若想在扶植版中加入背景代码就要买功能使用,惑者模板。有了这个代码可以在网店中加入自己喜欢的图片做背景。
这是一张淡雅梦幻天空热气球PPT背景图片,第一PPT模板网提供好看的唯美幻灯片背景图片免费下载; 关键词:淡雅PPT背景图片,热气球PowerPoint背景图片,唯美PPT背景图片,.jpg格式;
淘宝网店免费装修代码大集合(不断更新中) 一、 插入图片代码: 图片链接地址" /> 注:先把图片上传到网络相册网络地址,把它拷贝下来,放到下边一串代码里替代汉字部分;可以 应用于公告栏、分类栏及宝贝描述内。 ...
淘宝网顶部导航菜单效果 自己从淘宝上整理的
仿淘宝网TAB网页选项卡,相当的漂亮,带多种鼠标悬停效果,此方法有几个优点: 1、根据字数自适应项目长度 2、不同的项目使用不同的颜色来区分 3、背景图片只需要两个图片文件就足够,使用CSS细分用到的...
淘宝网使用Nginx的过程 淘宝网应用Nginx的收益 2、应用案例分析 Web接入层 大用户群消息推送 发布与A/B Testing 日志收集不统计系统 RESTful接口层 分布式防攻击系统 TMD系统架构图 3、开发不定制 组合JavaScript和...
7、淘宝背景音乐代码生成功能! 8、查看其他网店HTML功能! 9、查看其他网店CSS功能! 10、查看其他网店XML功能! 11、查看装修市场模版代码功能! 12、云工具箱:带有PS图片工具等一系列淘宝装修必备功能! 软件...
5、支持背景图的自定义,个性化设置更简单 6、支持商品列表中间,插入广告图片,广告增删更加灵活。 7、优化老版本的商品图片,新版网页加载速度更快更流畅。 8、支持设置为“卖光啦”的标志,后台新增设置功能,...
第一PPT模板网,提供PPT模板免费下载; 本幻灯片模板以印有美元、人民币等各类货币符号的电脑键盘作为PPT背景图片。以及各类带有科技味道的线条作为点缀。非常具有当今互联网科技韵味和电子商务气息; 本PPT模板,...
确定尺寸:内置淘宝网等网站常用图片尺寸,也可自定义尺寸。 4.指定水印:包括文字水印和图片水印,内置个性化水印和常用水印位置,也可自由拖放自定义水印及其位置。 5.指定边框:内置大量边框,也可自定义批量...
淘宝,全屏轮播, 源码,网店背景,全屏图
教程名称:赵鹏老师企业网站优化与美化系列视频课程课程目录:【】第一章 制作图文混排页面【】第一章 制作多图文混排页面【】第三章 制作淘宝网宝贝类目【】第三章 制作背景图片变换的超链接【】第二章 使用表格...
制作淘宝主图视频很方便!制作 9 – 60 秒拥有多种动画展示效果的 1:1, 3:4, ...同时请放心,如果在本地播放视频有声音没图像,只要将视频上传到淘宝网视频空间里,通过淘宝审核后就可以正常的播放(有声音,也有图像)。
61. js仿淘宝网鼠标经过缩略图放大图片效果的jQuery Fancy Hover Effect完整实例 62. Supersized jQuery全屏相册图片自动切换插件 63. [荐]jquery仿flash漂亮横向图片滚动效果完整版(兼容性非常好) 64. [荐]...
5、支持背景图的自定义,个性化设置更简单 6、支持商品列表中间,插入广告图片,广告增删更加灵活。 7、优化老版本的商品图片,新版网页加载速度更快更流畅。 8、支持设置为“卖光啦”的标志,后台新增设置功能,...
Android广告条效果--使用Volley实现网络图片的自动轮播(仿淘宝、网易广告页轮播效果)绝对详细的网络图片自动轮播效果。访问http://blog.csdn.net/qq_20889581?viewmode=contents 查看更多详细信息
需求:公司某个网站,需要实现图片预览效果,并能像淘宝一样实现局部分大!...开始是把大图设为平铺不重复北景,然后使用背景的position属性来定位,理果比较理想,但是在IE6下面,图片存在闪烁,于是改成以图片的绝对
今天小编要给大家介绍一款专业好用的淘宝天猫商城店铺装修辅助软件——疯狂的美工网店装修助手。疯狂的美工网店装修助手的主要...店铺背景代码生成、店铺背景获取、图片变身效果模块生成 疯狂的美工网店装修助手截图