一个热爱网络的小学教师

知更鸟主题修改:调整导航条的宽度

知更鸟主题的导航条宽度固定为980px,我把它修改成了页面宽度,如果浏览器窗口宽度大于980px,则自动延伸(抱歉,本人是代码小白,也不懂网页设计,这样描述或许不准确)。经过这样一改,我觉得现在的页面头部少了点秀气,而多了点大气。

下面是修改方法:

1、打开主题目录下的header.php,把top和header整个提到wrapper之前,方便下一步的修改。

2、修改header的css样式,使之居中显示。具体的代码忘记了哪些了,大家有兴趣的话可以使用chrome浏览器的“审查元素”功能对比一下我的css和原主题有什么不同。

3、修改top的css样式,使之居中显示,同样,具体的css代码大家使用chrome浏览器查看一下就知道了。

这样修改之后导航条是居中了,但宽度还是980px,怎么才能撑满整个浏览器窗口呢?使用chrome的“审查元素”功能查看之后,我发现原主题并没有为top元素指定css样式,我们只需要加上这么一句就行了:

background: url(xxx.png) repeat-x;

这里的xxx.png就是我们指定的整个top的背景图案,可以通过修改原主题的背景图案获得,这里不再赘述。

修改之后,由于top的宽度没有指定,所以会撑满浏览器窗口,而topnav宽度依旧是980px,并且设置了居中,可以保证网页不会变形。

(上面的文字写的真累啊,不懂技术的人想写个技术类的文章真是不容易,看来班门弄斧也是需要有一定功力的,呵呵。如果有什么贻笑大方之处,还请各位高手指正!)

未经允许不得转载:高海鹏老师的博客 » 知更鸟主题修改:调整导航条的宽度

分享到:更多 ()

评论 16

Protected by WP Anti Spam

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #7

    不太喜欢千篇一律的知更鸟站点,主题是好。

    水中鱼儿3个月前 (05-27)回复
  2. #6

    知更鸟的主题,太多了,看得都眼镜疲劳了,哈哈

    wywzh4年前 (2013-10-01)回复
  3. #5

    一直研究到现在都没搞清楚怎么弄的,算了睡觉去了!老师,如果方便的话,直接把您的主题发给我也可以,这样更好,我很喜欢你这个修改后的主题!只可惜自己不会修改

    阿纲4年前 (2013-05-01)回复
    • 抱歉,假期没有看博客,回复比较晚。我的主题改动比较多,自己都记不清到底改了多少地方了。还是把没有修改完的主题给我发一下吧,我改好之后再发给你。

      高海鹏4年前 (2013-05-04)回复
  4. #4

    老师,如果您看到我的留言,那个改过的文件发给我好么。真的非常需要啊,主题我能改的都改了,就剩下这个导航条了,很像变成您这样的,很喜欢这种风格…..

    阿刚4年前 (2013-05-01)回复
  5. #3

    老师,我也是个代码小白!您文中说的不是很清楚啊,可不可以把修改好的发给我啊,很喜欢您的这个修改

    阿刚4年前 (2013-05-01)回复
  6. #2

    哈,终于出来了!非常感谢!

    阿泰5年前 (2013-01-31)回复
    • 文中的描述可能不太清楚,有问题再联系我吧。

      高海鹏5年前 (2013-01-31)回复
      • 没明白,真没明白,有点迷糊了!

        加background: url(xxx.png) repeat-x;段代码的位置 能再详细点吗? 谢谢!

        元杰4年前 (2013-03-15)回复
        • 在css文件中找到“#top”,后面添加就行。

          高海鹏4年前 (2013-03-17)回复
          • 搞定 非常感谢~~爱死你了~~ 😀

            元杰4年前 (2013-03-21)
          • 我没有找到 #top 的CSS文件! 😳

            元杰4年前 (2013-03-21)
          • 修改好的文件已于周六发出,问题解决了没有?

            高海鹏4年前 (2013-03-25)
          • 问题完美解决,多谢高老师 🙂

            元杰4年前 (2013-03-27)
  7. #1

    呵呵,我也不怎么懂技术,一般是看到别人的效果,复杂CSS样式过来,随后自己调整一下了

    一号站长5年前 (2013-01-31)回复
点击这里给我发消息