图像拼合-创建一个导航列表

 

    我们想使用拼合图像("img_navsprites.gif")，以创建一个导航列表。

 

    我们将使用一个HTML列表，因为它可以链接，同时还支持背景图像：

 

    实例

 

    #navlist{position:relative;}

 

    #navlistli{margin:0;padding:0;list-style:none;position:absolute;top:0;}

 

    #navlistli,#navlista{height:44px;display:block;}

 

    #home{left:0px;width:46px;}

 

    #home{background:url('img_navsprites.gif')00;}

 

    #prev{left:63px;width:43px;}

 

    #prev{background:url('img_navsprites.gif')-47px0;}

 

    #next{left:129px;width:43px;}

 

    #next{background:url('img_navsprites.gif')-91px0;}

 

    实例解析：

 

    #navlist{position:relative;}-位置设置相对定位，让里面的绝对定位

 

    #navlistli{margin:0;padding:0;list-style:none;position:absolute;top:0;}-margin和padding设置为0，列表样式被删除，所有列表项是绝对定位

 

    #navlistli,#navlista{height:44px;display:block;}-所有图像的高度是44px

 

    现在开始每个具体部分的定位和样式：

 

    #home{left:0px;width:46px;}-定位到最左边的方式，以及图像的宽度是46px

 

    #home{background:url(img_navsprites.gif)00;}-定义背景图像和它的位置（左0px，顶部0px）

 

    #prev{left:63px;width:43px;}-右侧定位63px（＃home宽46px+项目之间的一些多余的空间），宽度为43px。

 

    #prev{background:url('img_navsprites.gif')-47px0;}-定义背景图像右侧47px（＃home宽46px+分隔线的1px）

 

    #next{left:129px;width:43px;}-右边定位129px(#prev63px+#prev宽是43px+剩余的空间),宽度是43px.

 

    #next{background:url('img_navsprites.gif')no-repeat-91px0;}-定义背景图像右边91px（＃home46px+1px的分割线+＃prev宽43px+1px的分隔线）