wordpress顶部导航栏相对于浏览器定位浮动(css实现)
最近在苦练div+css技术,对于一个半路出家人来说,自学技术真的需要喜欢才可以,尤其这半年时间里,明显感觉写网页的速度加快了,以前做网站找主题、套模版,去谷歌搜代码,现在感觉可以自己设计网页了。
div+css是网站建设的基础,作为互联网从业者是一门必学的基础内容。
下面就来介绍
css浏览器窗口进行定位属性
在谷歌上面搜,有非常多的js实现导航浮动属性,但大家都知道一个网站使用了太多js就会拖慢网站打开速度,而且是wordpress这样的网站,那就更加不合适了,博主也一直没有用过(ps:网站太多js了)。
上面说到本人最近苦练css的事情,在学到position属性时,感觉到这正是我要的。通过position:fixed实现绝对浏览器定位元素。
代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 | /*背景色*/ background: none repeat scroll 0 0 #07426A; /*高度*/ height: 35px; /*行高*/ line-height: 45px; /*绝对定位浏览器*/ position: fixed; /*宽度100%*/ width: 100%; /*堆叠顺序*/ z-index: 1111; |
案例展示站:渤海商品交易所
参考表
值 | 描述 |
---|---|
absolute | 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。 |
fixed | 生成绝对定位的元素,相对于浏览器窗口进行定位。
元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。 |
relative | 生成相对定位的元素,相对于其正常位置进行定位。
因此,”left:20″ 会向元素的 LEFT 位置添加 20 像素。 |
static | 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。 |
inherit | 规定应该从父元素继承 position 属性的值。 |
上面的参数已经明了用法,喜欢研究的朋友可以去尝试一下,这对你做网站非常有用。
注意点
所有主流浏览器都支持 position 属性(ie6不支持);
这里其实大家没有必要纠结ie6了,自从微软宣布2014年开始不再更新xp系统时就已经注定了ie6和ie7将退出浏览器行列,将被放进博物馆中。想象一下当我们老了和00后的程序员谈起“当年我们是怎么和ie6浏览器做斗志的场景时那是多么有趣啊”。
三分热度
2014 年 11 月 22 日 20:33
这个还可以再具体一点吗 对于新人实在难解。 可以QQ帮助一下么 56120469
爱映“疯”
2014 年 11 月 22 日 21:12
主要是/*绝对定位浏览器*/ position: fixed;/*堆叠顺序*/ z-index: 1111;