传统的处理方式
直接在图片上加上目标链接，然后按要求排版
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<TITLE>基于Sprite的图片导航的优化处理_yo1s.com</TITLE>
<style type="text/css">
<!--
/*general*/
ul,ol,dl,dt,dd,p,span {margin: 0;padding: 0;font: normal 12px Tahoma;}
.cls {clear: both;display: block;font: normal 0/0 Arial;}
img {border: 0;}
dl {width: 320px;margin:8px;}
dt {font:bold 14px/28px Tahoma;}
/*extral*/
.gsort {height:1%;background: #eee;}
.gsort ul {margin:3px 0 0 4px;}
.gsort li {float: left;padding:3px;list-style:none outside;}
-->
</style>
</HEAD>
<BODY>
<dl><dt>传统方法处理的效果</dt><dd class="gsort"><ul>
<li><a href=""><img alt="动作类" src="" /></a></li>
<li><a href=""><img alt="体育类" src="" /></a></li>
<li><a href=""><img alt="益智类" src="" /></a></li>
<li><a href=""><img alt="射击类" src="" /></a></li>
<li><a href=""><img alt="综合类" src="" /></a></li>
<li><a href=""><img alt="搞笑类" src="" /></a></li>
<li><a href=""><img alt="冒险类" src="" /></a></li>
<li><a href=""><img alt="棋牌类" src="" /></a></li>
<li><a href=""><img alt="策略类" src="" /></a></li>
<li><a href=""><img alt="敏捷类" src="" /></a></li>
<li><a href=""><img alt="装扮类" src="" /></a></li>
<li><a href=""><img alt="休闲类" src="" /></a></li>
<li><a href=""><img alt="儿童类" src="" /></a></li>
<li><a href=""><img alt="测试类" src="" /></a></li>
<li><a href=""><img alt="MTV类" src="" /></a></li>
<span class="cls"></span></ul><span class="cls"></span></dd></dl>
</BODY>
</HTML>
初步改进的处理
利用css sprite技术，将各个图片按排版方式输出到一张图片上,再用一个透明的gif图片替代原来的位置。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<TITLE>基于Sprite的图片导航的优化处理_yo1s.com</TITLE>
<style type="text/css">
<!--
/*general*/
ul,ol,dl,dt,dd,p,span {margin: 0;padding: 0;font: normal 12px Tahoma;}
.cls {clear: both;display: block;font: normal 0/0 Arial;}
img {border: 0;}
dl {width: 320px;margin:8px;}
dt {font:bold 14px/28px Tahoma;}
textarea {width:99%;height:90px;}
p {font:normal 14px/28px Tahoma;}
/*extral*/
.gsort {height:1%;background: #eee url() no-repeat center;}
.gsort ul {margin:3px 0 0 4px;}
.gsort li {float: left;padding:3px;list-style:none outside;}
.gsort li img {width:56px;height: 69px;}
-->
</style>
</HEAD>
<BODY>
<dl><dt>初步改进后的效果</dt><dd class="gsort"><ul>
<li><a href=""><img alt="动作类" src="" /></a></li>
<li><a href=""><img alt="体育类" src="" /></a></li>
<li><a href=""><img alt="益智类" src="" /></a></li>
<li><a href=""><img alt="射击类" src="" /></a></li>
<li><a href=""><img alt="综合类" src="" /></a></li>
<li><a href=""><img alt="搞笑类" src="" /></a></li>
<li><a href=""><img alt="冒险类" src="" /></a></li>
<li><a href=""><img alt="棋牌类" src="" /></a></li>
<li><a href=""><img alt="策略类" src="" /></a></li>
<li><a href=""><img alt="敏捷类" src="" /></a></li>
<li><a href=""><img alt="装扮类" src="" /></a></li>
<li><a href=""><img alt="休闲类" src="" /></a></li>
<li><a href=""><img alt="儿童类" src="" /></a></li>
<li><a href=""><img alt="测试类" src="" /></a></li>
<li><a href=""><img alt="MTV类" src="" /></a></li>
<span class="cls"></span></ul><span class="cls"></span></dd></dl>
</BODY>
</HTML>
相关文章
精彩导读
热门资讯
关注我们
