导航样式 母栏目并列两行子栏目CSS写法

<div id="zongk">

<div class="zongka">

<div class="zonga" id="zonga-n"><a href="#" target="_blank">男士</a></div>

<div class="zongb" id="zongb-n">

<ul>

<li><a href="#" target="_blank">男士腕表</a></li>

<li><a href="#" target="_blank">绅士男士</a></li>

<li><a href="#" target="_blank">男士腕表</a></li>

<li><a href="#" target="_blank">男士腕表</a></li>

<li><a href="#" target="_blank">绅士男士</a></li>

<li><a href="#" target="_blank">男士腕表</a></li>

</ul>

</div>

</div>

<div class="zongkb">

<div class="zonga" id="zonga-nv"><a href="#" target="_blank">女士</a></div>

<div class="zongb" id="zongb-nv">

<ul>

<li><a href="#" target="_blank">女士包包</a></li>

<li><a href="#" target="_blank">女士发型</a></li>

<li><a href="#" target="_blank">女士香水</a></li>

<li><a href="#" target="_blank">女士饰品</a></li>

<li><a href="#" target="_blank">减肥塑性</a></li>

<li><a href="#" target="_blank">流行前沿</a></li>

</ul>

</div></div>

<div class="zongkc">

<div class="zonga" id="zonga-y"><a href="#" target="_blank">养生</a></div>

<div class="zongb" id="zongb-y">

<ul>

<li><a href="#" target="_blank">运动养生</a></li>

<li><a href="#" target="_blank">饮食养生</a></li>

<li><a href="#" target="_blank">男士保健</a></li>

<li><a href="#" target="_blank">女士保健</a></li>

<li><a href="#" target="_blank">两性健康</a></li>

<li><a href="#" target="_blank">中医养生</a></li>

</ul>

</div></div>

</div>

           这样一个全部的整体布局就写完全了，下面我们来添加CSS样式，使他达到我们最终要求。上面我都已经给每个div定义了选择符。

           一般类型网站width都是960px，我给“zongk”一个宽度960px，width：960px,我又想使他居中怎么办？别急我在给他一个左右浮动：margin：auto；这样这个“zongk”就会按照我的要求居中显示。

          剩下三个“zongka”"zongkb""zongkc"层，每一个宽度给960px/3=320px;这个是我没有给边框以及padding情况下的宽度数，如果你要添加边框border或者padding，需要那960px减去添加的border和padding，之后才是他的宽度，比如说我要他宽度一定要是960px;我给了他边框是1px,padding：5px;那再给zongk宽度的时候就要960-10-2=948px;（宽度要算上左右两边的边框border以及padding，勿忘记！）如果添加的是margin就要另算了（一处div最好不要padding和margin都给值，不然有的浏览器会算上双倍的值，导致布局错位）。

          好了入正题，三个“zongka”"zongkb""zongkc" width值都给了320px;然后让他们并列布局在给一个浮动float：left；他们会按照以左边div按顺序排列。到这里“zongk”也已经居中显示了，三个“zongka”"zongkb""zongkc"也都已经并列显示了，如果有错位的地方检查给的宽度width是否合适有没有超过外部div的宽度，不然会跳到下面。

         “zongka”"zongkb""zongkc"三个div内部的两个div 也是按照这种方式宽度合适给一个float：left；浮动使其并列显示，至于“男士”“女士”“养生”我是用所在div宽度“挤”出来的竖着显示，后面自定义文字竖着显示，我们后面再给一篇文章给予讲。

         现在我们来看无序列表<ul><li></li></ul>怎么使<li>并列排序，ul所在的div宽度是确定的，我这里一行有3个li，那我用该层div宽度除3即：293/3=97.66主意小数点不够一定省去，为了方便千万别都轻易进一位四舍五入，最后导致整个宽度超出父div宽度造成错位,这里我取值97px.后面再给li一个浮动float：left；当第四个li出现的时候会自动换入下一行，就达成了两行显示的效果。

        后续为了美观给了超链接颜色以及鼠标移动覆盖到超链接上面的一个颜色变化CSS样式，这个在后面文章在详细写，有兴趣可以自己看下可以先看下CSS用户手册。

         总结：这篇自己写感就在于：float：left；浮动的使用，在div适用在无序列表<ul><li></li></ul> 同样适用。

下面给予我写的代码源文件下载：