css创建一个导航列表
导读：图像拼合-创建一个导航列表 我们想使用拼合图像("img_navsprites.gif" ，以创建一个导航列表。 我们将使用一个HTML列表，因为它可以链接，同时还支持背景图像： 实例 #navlist{positi...
图像拼合-创建一个导航列表
我们想使用拼合图像("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的分隔线）
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： css创建一个导航列表
本文地址： https://pptw.com/jishu/664027.html