css 导航菜单背景不重复

html-css023

css 导航菜单背景不重复,第1张

这个不仅仅是靠css实现的。 实现的思路是

设置两个样式,一个是.curr 一个是li.hover 第一个是控制当前栏目,比如说当前是门户这个页面,那么门户这个li 的class就是curr 还有一个就是鼠标滑过的时候显示白色背景,这个用li:hover来控制,这两个是相同的css代码。都是改变一下背景图片,控制一下超文本链接颜色。

我大概看了一下你的代码。 我觉得怎么挺简单的事,咋被弄的这么复杂。

在我看就需要这几个样式就行了。

//父容器

.main{display:blockwidth:666pxposition:absolutetop:36pxright: 0pxz-index:300}

//导航栏容器

.main .menu{ height:40px}

//导航内容分层

.main .menu li{ widht:105pxfloat:left}

//被选中样式

.main .menu .curr{}

//第一个内容分层样式

.main .menu .friest{}

//最后一个内容分层样式

.main .menu .last{}

//鼠标滑过效果

.main .menu li:hover{}

这几个样式就足够。

background-repeat: no-repeat /* 不平铺 */

然后是铺满容器的问题,如果忽略IE内核的浏览器,用css3属性background-size: 100%轻松解决,要兼容的话可以设一个背景层放在容器的下方,背景层里面放你的背景图片,宽高设为跟容器一样,然后把容器的背景设为透明即可。

body{background:#FFF url(背景图片地址) no-repeat 50% 0}

no-repeat不重复

50% 0(水平位置 垂直位置) 水平50%既居中,垂直0px

center center也可