网页制作DIV+css之导航布局

             要完成这个导航效果，重点是鼠标经过时文字下边出现图片  ，

导航代码，抱歉，博客不可以让我发布效果

<style type="text/css"><!--
.container {
        width: 500px;
        padding: 15px;
        margin: 3px 0 20px 0;
        border: 1px solid #ccc;
        background: #fff;
}

/* circle */

#navCircle {
        margin: 0;
        padding: 0 0 20px 10px;
        border-bottom: 1px solid #9FB1BC;
}

#navCircle li {
        margin: 0;
        padding: 0;
        display: inline;
        list-style-type: none;
}

#navCircle a:link, #navCircle a:visited {
        float: left;
        font-size: 10px;
        line-height: 14px;
        font-weight: bold;
        padding: 0 12px 6px 12px;
        text-decoration: none;
        color: #708491;
}

#navCircle a:link.active, #navCircle a:visited.active, #navCircle a:hover {
        padding-bottom: 6px;
        color: #000;
        background: url(circle.gif) no-repeat bottom center;
}
--></style><style type="text/css"><!--
/* code for presentation purpose (CSS preview) */
body {
        font-family: verdana, sans-serif;
        font-size: 11px;
        background: #eeeeee;
}

h4 {
        font-size: 100%;
        color: #999;
        margin: 0;
}
                --></style> 
<h4>
Circle Tabs
</h4>
<div class="container">
<ul id="navCircle"><!-- CSS Tabs -->
<li>
<a class="active" href="主页.html">主页</a>
</li>
<li>
<a href="产品    .html">产品 </a>
</li>
<li>
<a href="服务    .html">服务 </a>
</li>
<li>
<a href="支持   .html">支持 </a>
</li>
<li>
<a href="命令 .html">命令 </a>
</li>
<li>
<a href="新闻.html">新闻</a>
</li>
<li>
<a href="关于 .html">关于 </a>
</li>
</ul>
</div>

 

                                 图片文件：

 

 

 

  只要在 a:hover 定义背景 并且水平位置：居中和垂直位置底部：对齐

 

 值得一提的是在本例中首页下面的图片是始终显示的

                      这是怎么做到的呢！呵呵看了代码你就明白了：

                                  <div class="container">
                                                     <ul id="navCircle">    

                                    .....       

                                            <li><a class="active" href="主页.html">主页</a></li>

                                                .......      

     #navCircle a:link.active, #navCircle a:visited.active, #navCircle a:hover {
        background: url(circle.gif) no-repeat bottom center;
}

绝艳你就一笨蛋，用你的一句话来概括 ：在代码中定义首页字段超链接 A为一个类名active的容器，  在CSs中用 #navcircle a:link.active 定位到这个类添加属性

#navCircle a:link.active和#navCircle a:visited.active 这两句子话的意思是 在navcircle大容器中，所有超连接未访问（a:link）时和访问后(a:visited)样式，作用在activer容器内。

                            #navcircle a:hover  鼠标放在超链接上时的样式 作用在navcircle大容器中

 

顺带一笔  a:link a:active(连接被按下时) a:visited a:hover