研究了淘宝网的结构之后不得不佩服马爸爸的研发团队,整个架构即使网络不好的情况下,也是照样实现功能的。并不是想象中的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>