css创建一个导航列表

2024-01-16 14:49 小编

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

 

    我们想使用拼合图像("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的分隔线)


在线咨询 拨打电话

电话

13363039260

内部绝密传真282期

微信二维码