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

作者:Davidszhou   来源:Davidszhou博客   时间:2014-05-12 22:37:18   点击:

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

        导航有时候想做成一个前面一个大栏目,后面跟着两行子栏目,就像艾丽时尚网那样以及一下健康类站点使用比较多这点。这种导航用DIV布局CSS如何写?
导航样式
        首先我们要在脑海中先把大致的布局规划出来,一个大的DIV里面套用3个并列DIV,三个并列DIV里面还要套嵌入两个div,好了有了这个布局思绪我们就好写了。
        先把一个整体div写出来,
<div>
<div></div>
<div></div>
<div></div>
</div>    
css样式我后面再加,上面是一个大致的布局,“男士”在一个div,后面两行子栏目在一个div,那么全部div布局就是
<div>
<div>
<div></div>
<div></div>
</div>
<div>
<div></div>
<div></div>
</div>
<div>
<div></div>
<div></div>
</div>
</div>  
男士,女士和养生放在一个div里面那后面两列子栏目怎么写呢?这里我使用<ul><li></li></ul>无序列表写,无序列表怎么使他像上面按要求的两行显示呢?别急后面我们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> 同样适用。
下面给予我写的代码源文件下载:
导航样式 母栏目并列两行子栏目CSS写法
文件类型: .zip 6fc2c13bf87c8f253c8b76a600a4f440.zip (1.36 KB)

TAGS:导航样式 , 母栏目 , 子栏目

来自Davids zhou博客原创文章请尊重作者:http://www.zongk.com/zongk/3.html转载请标注此链接

文章推荐
网站统计
文章总数:129
今天发布:0
软件资源数:18