jimdo代码:诸葛草帽电脑工作室(四)导航栏的修饰

最近比较忙,好几天没有更新文章了,按照之前说过的从上到下的顺序共享我的网站“诸葛草帽电脑工作室”的模板代码,现在到了导航栏的部分了,这部分也是我花费时间最多的部分,但是现在还是有些问题。

谷歌浏览器下不限制蓝色立体背景,那个小图片不显示,没办法,只有在使用普通背景放在图片背景下面了,这样还能好些。之前还有位置的问题,阿里妈妈截图时我发现有错位现象,现在修正了。代码如下:

 

html部分:

    <table width="955" bgcolor="#000000" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td>

                <div id="navigation">
                    <var>navigation[1|2|3]</var>
                </div>
            </td>
        </tr>
    </table>

 

之前的代码没有红色的部分,导致严重错位。

 

css部分:

 

#navigation
{
       margin:0 auto;
       width:955px;
       background: url(http://zhugecaomao.jimdo.com/s/cc_images/cache_1463958555.jpg?t=1261052840) #000000;
}

 

红色部分是导航栏宽度和背景图片下的背景色(谷歌浏览器下显示的),可自行修改。另外和导航栏有关的css部分:

 

/*  Navigation
----------------------------------------------- */

ul#mainNav1
{
        margin: 0px auto;
}

ul#mainNav1 li
{
        float:left;
        margin:0px auto;
        list-style:none;
}

ul#mainNav1 li a
{
        font:bold 14px/200% 微软雅黑;
        text-decoration: none;
        display:block;
        border-right:0px solid #fff;
        color:#FFFF00;
}

ul#mainNav1 li a { padding:5px 5px 5px 5px; }

ul#mainNav1 a:hover

{
        color:#FF00FF;
        background:#1EBBFF;

}

ul#mainNav1 a.current { font-weight:bold; color:#FF00FF;}

 

红色部分是导航栏正常显示时的字体、颜色、字间距等。

绿色部分是当鼠标放在导航栏时其背景颜色和字体样色。

蓝色部分是当点击导航栏之后字体颜色等。

 

Write a comment

Comments: 7
  • #1

    Access爱好者 (Thursday, 07 January 2010 21:48)

    这个模板界面确实不错,但还有个问题,请你看我的网站http://accfans.jimdo.com,如果导航栏下有二级栏目的话(例如“作品展示”)就会出现界面挤破移位。请看看有什么方法解决吗?

  • #2

    诸葛草帽 (Thursday, 07 January 2010 21:54)

    回复Access爱好者:嗯,这个问题一直困扰我,如果导航栏不分离好像无法解决这个错位问题,网上邻居也正在研究分离的二级导航栏问题,所以我都改为了一级导航栏。

  • #3

    独星 (Sunday, 04 July 2010 12:56)

    我用IE看导航栏背景图片没事,用火狐看图片却少了一半。怎么处理?

  • #4

    诸葛草帽 (Thursday, 08 July 2010 14:50)

    回复独星:应该是兼容问题,修改代码吧,我现在正在弄,把所有table尽可能都用div+css代替

  • #5

    斯通国王 (Monday, 06 June 2011 19:34)

    谢谢分享!

  • #6

    Palmira Godwin (Tuesday, 31 January 2017 10:16)


    Hello there! This blog post couldn't be written much better! Looking through this post reminds me of my previous roommate! He continually kept preaching about this. I am going to send this post to him. Fairly certain he will have a good read. Thank you for sharing!

  • #7

    Theron Poplawski (Tuesday, 31 January 2017 19:13)


    Excellent beat ! I wish to apprentice while you amend your web site, how can i subscribe for a blog site? The account helped me a acceptable deal. I had been a little bit acquainted of this your broadcast offered bright clear concept