梦幻屋

　　看了动画演示和结果图，也了解了用到那些素材，现在就请你带着一股好奇和我一起来完成这个导航栏吧，当做完这个导航栏之后你会发现原来DIV排版那么简单。愿你更有信心学好DIV排版！

　　先来分析一下这个导航栏要用到多少个盒子：最外边一个大盒子(nav)，这个盒子与1像素高的背景图片等宽，里面又有五个小盒子(lanList)分别装着每一个导航栏，这个盒子与“勾月”图形等高，导航栏这个盒子里面又装着一个稍小的盒子(lanBoxIn)，这个盒子又装着一个黄色的修饰盒子 (span)和一个有文字的链接盒子(a)。

网页结构代码：

<div class="nav">

<div class="lanList">
    <div class="lanBoxIn">
        <span></span><a href="#">彻底弄懂CSS盒子模式1</a>
    </div>
</div>

<div class="lanList">
    <div class="lanBoxIn">
        <span></span><a href="#">彻底弄懂CSS盒子模式2</a>
    </div>
</div>

<div class="lanList">
    <div class="lanBoxIn">
        <span></span><a href="#">彻底弄懂CSS盒子模式3</a>
    </div>
</div>

<div class="lanList">
    <div class="lanBoxIn">
        <span></span><a href="#">彻底弄懂CSS盒子模式4</a>
    </div>
</div>

<div class="lanList">
    <div class="lanBoxIn">
        <span></span><a href="#">彻底弄懂CSS盒子模式5</a>
    </div>
</div>

</div>

1．现在正式开始做，做之前初始化一下各签标的边界和填充，这里用样式：

* {
    margin: 0px;
    padding: 0px;
    }

2．组装最外边的大盒子nav，宽200px,高为自动auto或者干脆不要，背景图片为bj.jpg，背景纵向重复，用到样式：

.nav {
    background: url(bj.jpg) repeat-y;
    width: 200px;
    overflow: hidden;
}

3．组装每条导航的盒子lanList，这个盒子与“勾月”图形等高，并把“勾月”图形以背景形式放在这个盒子的左边，并让这个盒子靠左边对齐（因为这个盒子的宽度比外边的大盒子小，如果相等则可以不用考虑对齐方式），这里用到样式float的属性，本人没有写入样式中则取其默认值，样式代码如下：

.lanList {
    background: url(lan.gif) no-repeat left center ;
    height: 50px;
    width: 190px;
}

4．组装比每条导航栏稍小的内部盒子lanBoxIn，这个盒子让它右对齐，并与其父级盒子lanList内容边界上边形成15px边界，目的是让内容块看起来居中（当然你也可以用到下边界来实现，达到目的就可以），样式代码如下：

.lanBoxIn {
    float: right;
    height: 20px;
    width: 170px;
    margin: 15px 0px 0px 0px;
}

5．组装黄色修饰块盒子span，这个盒子与父级盒子lanBoxIn等高，并在lanBoxIn盒子内左对齐，样式代码如下：

.lanBoxIn span {
    float: left;
    height: 20px;
    width: 10px;
    background-color: #ff9900;
}

上一页  [1] [2] [3] 下一页

上一篇文章： 技巧文章：常用CSS修改实际操作技巧