列表,背景图(淘宝网)

最新推荐文章于 2022-05-20 23:21:28 发布

janckywong963

最新推荐文章于 2022-05-20 23:21:28 发布

阅读量355

点赞数

分类专栏： css案例文章标签：物流 Firefox Exchange CSS ASP

css案例专栏收录该内容

2 篇文章 0 订阅

订阅专栏

[img]/upload/attachment/115766/7fa1406e-a487-364d-83b1-2cb823bd7795.jpg[/img]


<!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中:

[img]/upload/attachment/115768/cd9f7d3e-8b1a-3902-afee-a6673111e176.jpg[/img]
ie7中:

[img]/upload/attachment/115770/77836976-0f0d-3c03-be69-1eb9f2b4b4d5.jpg[/img]


<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中:

[img]/upload/attachment/115772/3ad72f50-b91b-39fd-964e-4838d3ac55d9.jpg[/img]

ie7中:

[img]/upload/attachment/115774/e1fecbf4-5893-3f59-81c8-7330ce14d91d.jpg[/img]

用到的图片:
wangwang_v2.gif

[img]/upload/attachment/115778/dc0521ef-ff2a-335f-a45b-f4100e22dae7.gif[/img]

exchange.png

[img]/upload/attachment/115776/bf3cbed4-a6c8-3702-9fa9-40f30b2be0ab.png[/img]

值得注意的地方:
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中的运单号码:低了一行~~~这又真够令人头痛的事~~~
望高人指教~~~!!!