<!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格式;
### 淘宝网缩略图预览生成大图技术解析 #### 技术背景与应用场景 在电子商务网站中,为了提升用户体验并增加商品吸引力,通常会采用多种图像展示技术。其中,一种常见且实用的功能就是缩略图预览生成大图。这种...
淘宝网图片浮动广告代码是一种常见的网页交互元素,用于吸引用户注意力并提高网站的广告效果。在网页设计中,这种广告通常会随着用户滚动页面而上下移动,保持在用户的视野范围内。这种技术结合了JQuery库、div+css...
HTML项目淘宝网完整代码是一个基于HTML的网页设计项目,它旨在模拟和实现淘宝网的页面结构和功能。这个项目对于初学者来说是一个很好的实践机会,能够帮助他们理解HTML的基础知识,以及如何通过HTML来构建一个复杂的...
3. **全套素材**:通常包括店招(店铺招牌)、导航条、宝贝分类、促销模块、背景图、按钮图标等多种元素,这些元素的统一性是关键,确保整个店铺视觉效果的协调一致。 4. **金购买**:这表明这些模板并非免费资源,...
淘宝网的顶部导航菜单是网页设计中的一个重要组成部分,它为用户提供了一个直观的界面来浏览网站的不同部分。在本文中,我们将深入探讨如何实现这样的效果,主要聚焦于JavaScript(JS)技术,因为这是标签中指定的...
《jQuery实现JS淘宝网产品图片局部放大的技术详解》 在网页设计中,产品图片的展示方式至关重要,尤其是电商网站,用户对商品细节的关注度往往直接影响购买决策。淘宝网作为国内最大的电商平台,其产品图片展示功能...
### 淘宝网店装修代码知识点详解 #### 一、插入图片代码 **代码示例:** ```html 图片链接地址" /> ``` **注释:** - `src`属性用于指定图片的URL地址。 - 需要先将图片上传至网络空间并获取其URL地址,然后将其...
这使得GIF非常适合色彩简单、边缘分明的图像,如图标、线条图和动画。GIF还支持透明背景,但不适用于色彩丰富的照片。需要注意的是,尽管GIF的动画功能广泛应用于网络,但其文件大小可能会较大,影响加载速度。 ...
在IT行业中,网页交互设计是用户体验的关键因素之一,"淘宝中的一个鼠标感应大图"就是一个典型的实例,展示了如何通过简单的JavaScript或CSS3技术提升用户体验。这个功能允许用户在浏览商品时,只需将鼠标悬停在小图...
5. **CSS样式**:为了实现淘宝商城2012年的风格,开发者可能使用了CSS来定义焦点图的外观,包括边框、背景色、阴影效果、过渡动画等。CSS3的新特性,如`transition`和`transform`,可用于实现平滑的动画效果。 6. *...
在制作淘宝网顶部导航菜单的过程中,我们需要关注几个关键知识点,这些知识点涵盖了网页设计、前端开发以及用户体验优化。首先,我们来详细分析一下标题和描述所提及的内容。 标题“淘宝网顶部导航菜单制作”指的是...
淘宝网是中国最大的电子商务平台之一,拥有庞大的商品分类体系。在这个数据集“淘宝网(cateId)商品所有类目ID与类目名称_7.6万行_2020年2月15日更新”中,包含了76,000条关于淘宝商品类目的详细信息,每条记录对应一...
淘宝网设计规范及设计禁忌,是一份详尽的指南,旨在为设计师提供一套标准化的设计流程与规则,确保淘宝网站及应用程序在视觉上的一致性、功能上的可用性以及用户体验的优化。以下是对该规范中几个关键知识点的深入...
### 淘宝网设计规范及设计禁忌 #### 一、淘宝字体规范 在淘宝网的设计中,选择合适的字体对于确保品牌一致性至关重要。淘宝推荐使用特定的字体来保持整体风格的一致性和专业性。这些字体的选择不仅要符合淘宝的...
### 淘宝网图片存储系统架构解析 #### 一、背景及挑战 淘宝网作为中国乃至全球最大的电子商务平台之一,面临着极其庞大的图片存储与访问压力。据流量统计,淘宝网的整体流量中,图片访问流量占比高达90%以上,而...
这包括店招、海报、商品分类图、页面背景、按钮图标、导航栏等各个组成部分。这些元素的设计应与店铺的品牌定位、产品特性以及目标客户群体的喜好相匹配,以此提升店铺的专业度和吸引力。 在提供的"全套模板素材"中...
### 淘宝网仿真程序源代码解析 #### 一、引言 随着电子商务的快速发展,淘宝网作为中国最大的C2C(Customer to Customer)电商平台之一,在全球范围内都享有极高的声誉。对于开发者而言,能够深入研究淘宝网的运作...