wordpress顶部导航栏相对于浏览器定位浮动(css实现)

作者: 鲁智深 分类: wordpress 发布时间: 2014-02-14 00:19

最近在苦练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浏览器做斗志的场景时那是多么有趣啊”。

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

2条评论
  • 三分热度

    2014 年 11 月 22 日 20:33

    这个还可以再具体一点吗 对于新人实在难解。 可以QQ帮助一下么 56120469

    1. 爱映“疯”

      2014 年 11 月 22 日 21:12

      主要是/*绝对定位浏览器*/ position: fixed;/*堆叠顺序*/ z-index: 1111;

发表评论

电子邮件地址不会被公开。 必填项已用*标注