我们的目标是要做这个一个tab菜单选项，如图： 
讲解的步骤如下：
1.分解图形，我们最先可能不需要完成这么复杂的图片效果，只需要达到如下功能即可：
这部分比较好设计，大概是由两个div组成，每个div内都是无序列表，大体HTML结构如下：
<body id="design">
<ul id="tabnav">
<li>Home</li>
<li>Web Dev</li>
<li>Web Design</li>
<li>Map</li>
</ul>
<ul id="list">
<li>1. There some good news.</li>
<li>2. Not only good news.</li>
<li>3. The text here are examples</li>
<li>4. Not only good news.</li>
</ul>
</body>基本结构有了就需要使用css来控制样式：
2 这部分完成以后，因为每个菜单选项都是一个超链接，所以需要对基本的HTML结构进行修正body{ margin:10px;} ul#tabnav{ list-style:none; font:bold 12px verdana,arial; padding-left:0px; padding-bottom:23px; border-bottom:1px solid #11a3ff; margin:0px; } ul#tabnav li{ float:left; border:solid #11a3ff 1px; background-color:#a3dbff; margin:0px 3px 0px 0px; height:22px; } ul#list{ border-left:solid #11a3ff 1px; border-bottom:solid #11a3ff 1px; border-right:solid #11a3ff 1px; padding-top:15px; padding-bottom:15px; font-size:12px; background-color:fff; margin:0px; }
<body id="design">
<ul id="tabnav">
<li><a href="#">Home</a></li>
<li><a href="#">Web Dev</a></li>
<li><a href="#">Web Design</a></li>
<li><a href="#">Map</a></li>
</ul>
<ul id="list">
<li>1. There some good news.</li>
<li>2. Not only good news.</li>
<li>3. The text here are examples</li>
<li>4. Not only good news.</li>
</ul>
</body>而相应的需要对css添加代码控制链接
ul#tabnav a:link,ul#tabnav a:visited{
text-decoration:none;
display:block;
padding:5px 10px 3px 10px;
color:#006eb3;
}
ul#tabnav a:hover{
background:#006eb3;
color:#fff;
}3.最后一个问题是，如何使得当前菜单的选项是背景是空白的，而且没有下划线。基本思路是，把当前菜单的下边框的线变成白色，覆盖掉下面的蓝色部分。如何知道识别当前菜单呢，需要使用class来识别。因此我们再次对HTML结构进行修正
<body id="design">
<ul id="tabnav">
<li class="home"><a href="home.htm">Home</a></li>
<li class="dev"><a href="dev.htm">Web Dev</a></li>
<li class="design"><a href="design.htm">Web Design</a></li>
<li class="map"><a href="map.htm">Map</a></li>
</ul>
<div id="content">
<ul id="list">
<li>1. There some good news.</li>
<li>2. Not only good news.</li>
<li>3. The text here are examples</li>
<li>4. Not only good news.</li>
</ul>
</div>
</body>而css代码如下：
body#home li.home, body#dev li.dev, /* 当前页面的菜单项 */
body#design li.design, body#map li.map{
border-bottom:1px solid #FFFFFF; /* 白色下边框，覆盖<ul>中的蓝色下边框 */
color:#000000;
background-color:#FFFFFF;
}
body#home li.home a:link, body#home li.home a:visited, /* 当前页面的菜单项的超链接 */
body#dev li.dev a:link, body#dev li.dev a:visited,
body#design li.design a:link, body#design li.design a:visited,
body#map li.map a:link, body#map li.map a:visited{
color:#000000;
background-color:#FFFFFF;
}
body#home li.home a:hover, body#dev li.dev a:hover,
body#design li.design a:hover, body#map li.map a:hover{
color:#006eb3;
text-decoration:underline;
}
讲解思路补充：第一，两个盒子，第二，两个盒子需要边框，第三，去掉列表样式，第四 把垂直的选项变成水平的 第五，把水平选项胡间隔拉开（重点说明为什么要margin-bottom）第五，给每个选项做一个盒子，补充背景颜色和字体样式。第六 最关键的步骤讲解选项页面变化的原理 第七 在变化的基础上改变具体每个选项的颜色。
717
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
