示例代码运行浏览:http://tech.ddvip.com/yssl/29811/29811.html
在再看结果图:
这个导航栏中的链接用到了背景图片的切换效果,鼠标移到链接上导航栏背景图片和文字颜色都会跟着改变,整个导航用到下列4幅图片素材:
即链接不同状态的两张背景图片,每条导航左边的勾月图形,最外边大盒子1像素高的背景图片。
看了动画演示和结果图,也了解了用到那些素材,现在就请你带着一股好奇和我一起来完成这个导航栏吧,当做完这个导航栏之后你会发现原来DIV排版那么简单。愿你更有信心学好DIV排版!
先来分析一下这个导航栏要用到多少个盒子:最外边一个大盒子(nav),这个盒子与1像素高的背景图片等宽,里面又有五个小盒子(lanList)分别装着每一个导航栏,这个盒子与勾月图形等高,导航栏这个盒子里面又装着一个稍小的盒子(lanBoxIn),这个盒子又装着一个黄色的修饰盒子 (span)和一个有文字的链接盒子(a)。
(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)网页结构代码:
(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)div class="nav"div class="lanList" div class="lanBoxIn" span/spana href="http://cms.ddvip.com/index.php#"彻底弄懂CSS盒子模式1/a /div/divdiv class="lanList" div class="lanBoxIn" span/spana href="http://cms.ddvip.com/index.php#"彻底弄懂CSS盒子模式2/a /div/divdiv class="lanList" div class="lanBoxIn" span/spana href="http://cms.ddvip.com/index.php#"彻底弄懂CSS盒子模式3/a /div/divdiv class="lanList" div class="lanBoxIn" span/spana href="http://cms.ddvip.com/index.php#"彻底弄懂CSS盒子模式4/a /div/divdiv class="lanList" div class="lanBoxIn" span/spana href="http://cms.ddvip.com/index.php#"彻底弄懂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;}.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;}
6.组装链接盒子a,这里用到样式: display: block;让链接以块状方式呈现,并为链接安排背景图片,为了安全起见设置背景不重复,垂直居中(如果浏览器出错解释错误,而你的背景又不是纯色的,那么盒子过大导致的背景重复将会影响网页美观),链接文字样式去除下划线,样式如下:
.lanBoxIn a { background: url(lanbj2.gif) no-repeat left center; text-decoration: none; height: 20px; width: 155px; display: block; float: right; padding: 0px 0px 0px 5px; font-weight: bold; font-size: 9pt; line-height: 20px; color: #663300;}
7.最后简单为鼠标移到链接上时,链接风格的改为指定一个样式:
.lanBoxIn a:hover { background-image: url(lanbj3.gif); color: #FFFFFF;}
至此完成样式代码编写,下面给出内容部分的结构代码,当然我们并不是先把样式代码都写好了再写结构代码的,一般是由外到里,一边写样式一边组织内容结构的,本人只是为了讲解方便而先全部给出样式代码。
像这种列表式导航栏用无序列表(ul/li)来实现更科学,结构代码如下:
ul class="nav"li class="lanList" div class="lanBoxIn" span/spana href="http://cms.ddvip.com/index.php#"彻底弄懂CSS盒子模式1/a /div/lili class="lanList" div class="lanBoxIn" span/spana href="http://cms.ddvip.com/index.php#"彻底弄懂CSS盒子模式2/a /div/lili class="lanList" div class="lanBoxIn" span/spana href="http://cms.ddvip.com/index.php#"彻底弄懂CSS盒子模式3/a /div/lili class="lanList" div class="lanBoxIn" span/spana href="http://cms.ddvip.com/index.php#"彻底弄懂CSS盒子模式4/a /div/lili class="lanList" div class="lanBoxIn" span/spana href="http://cms.ddvip.com/index.php#"彻底弄懂CSS盒子模式5/a /div/li/ul