说说淘宝网logo的双重保险

研究了淘宝网的结构之后不得不佩服马爸爸的研发团队，整个架构即使网络不好的情况下，也是照样实现功能的。并不是想象中的js和css加载不出来之后就成了一团乱麻。

今天我们就拿淘宝网的logo实现来说说网站的双保险设计，何为双保险呢，就是网络差的情况下，logo图片即使加载不出来，但是照样有可以点击的文字来实现功能。

如下图在图片加载出来时显示的图标是这样的，真个border框以内都是可以点击的。

但是在网络加载不出图片的时候，网页效果是这样的

都是可以实现跳转的。

具体的代码实现如下方式一

<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="Generator" content="EditPlus®">
		<meta name="Author" content="ydj">
		<meta name="Keywords" content="">
		<meta name="Description" content="">
		<title>仿淘宝logo图标的实现</title>
		<style type="text/css">
			*{
				margin:0;
				padding:0;
			}
			div{
				margin:0 auto;
				width:240px;
				height:80px;
				border:1px solid black;
				background:url(logo.png) no-repeat;
				
				
			}
			div a{
				display:inline-block;
				width:100%;
				height:80px;
				text-decoration:none;
				color:#424242;
				/* 首行缩进 */
				text-indent:240px;
				/* 文字不换行 */
				white-space:nowrap;
				/* 溢出隐藏 */
				overflow:hidden;
			}
		</style>
	</head>
	<body>
		<div>
			<a href="http://mall.auicyh.com/mall" target="_blank">
				天元商城
			</a>
		</div>
	</body>
</html>

方式二

<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="Generator" content="EditPlus®">
		<meta name="Author" content="ydj">
		<meta name="Keywords" content="">
		<meta name="Description" content="">
		<title>Document</title>
		<style type="text/css">
			*{margin:0;padding:0;}
			ul,ol{list-style:none;}
			a{text-decoration:none;}
			a{
				display:inline-block;
				width:220px;
				/* 高度设置为 0 */
				height:0px;
				/* 给图片撑开内容，文字不占padding的空间  */
				padding-top:40px;
				border:1px solid black;
				background-image:url(logo.png);
				text-decoration:none;
				color:#424242;
				/* 溢出隐藏 */
				overflow:hidden;
			}
		</style>
	</head>
	<body>
		<a href="http://www.mall.auicyh.com/mall" target="_blank">天元商城</a>
	</body>
</html>

说说淘宝网logo的双重保险

猜你喜欢