一个热爱网络的小学教师

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

知更鸟主题的导航条宽度固定为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,并且设置了居中,可以保证网页不会变形。

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

赞(2) 打赏
转载请标明出处:高海鹏老师的博客 » 知更鸟主题修改:调整导航条的宽度
分享到: 更多 (0)

留言 18

Protected by WP Anti Spam
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #0

    请问老师,导航栏的字体怎么修改呀,我想用斜体的,然后把字体大小改改,请问怎么修改,用的知更鸟主题

    yy7年前 (2018-06-15)回复
    • 本站已不再使用知更鸟主题。

      高海鹏7年前 (2018-06-22)回复
  2. #0

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

    水中鱼儿8年前 (2017-05-27)回复
  3. #0

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

    wywzh11年前 (2013-10-01)回复
  4. #0

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

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

      高海鹏12年前 (2013-05-04)回复
  5. #0

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

    阿刚12年前 (2013-05-01)回复
  6. #0

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

    阿刚12年前 (2013-05-01)回复
  7. #0

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

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

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

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

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

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

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

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

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

            元杰12年前 (2013-03-27)
  8. #0

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

    一号站长12年前 (2013-01-31)回复

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏