淘宝网css源代码里面url的图片是一张整的未进行切割,上面会集成一些页面用到的图标,它这样做的原因是什

html-css018

淘宝网css源代码里面url的图片是一张整的未进行切割,上面会集成一些页面用到的图标,它这样做的原因是什,第1张

这是CSS sprite技术,可以减少客户端对服务器的请求次数,加快网页打开速度。

通过CSS中的background-position属性控制背景图片的显示位置。

详细参考:http://baike.baidu.com/view/2173476.htm

恐怕不行,淘宝后台因为各种原因过滤了大多数css代码,只支持级少数的东西。你如果看到很多大品牌在淘宝的也面上有很多炫的效果,那是直接付钱给淘宝专门开发的页面,一般付费用户的css支持少得可怜。

先是HTML代码

<div  class="d1">

<ul>

<li><a href="#">首 页惊喜</a></li>

<li><a href="#">所有商品</a></li>

<li><a href="#">空气净化器</a></li>

<li><a href="#">智能门锁</a></li>

<li><a href="#">净化器滤网</a></li>

<li><a href="#">锁架</a></li>

<li><a href="#">配件</a></li>

</ul>

</div>

*{

margin:0px

padding:0px

}

.d1 a{

text-decoration:none

color:whiteheight:28px

line-height:28pxfont-weight:bold

padding:0 20px

}

.d1 li{

list-style-type:nonefloat:left

background:url(../images/forumMenuBg.gif) right center no-repeat

}

.d1 ul{

width:960pxheight:28px

background:#383838

}

.d1 a:hover{

display:block

background:url(../images/forumMenuBg.jpg) 0 0 repeat-x

}

这是我以前写的导航代码,图片和颜色你自己改下,希望能够帮到你!