CSS盒子模式详解二

钓钓江湖人

钓钓江湖人

2016-02-19 17:21

图老师设计创意栏目是一个分享最好最实用的教程的社区,我们拥有最用心的各种教程,今天就给大家分享CSS盒子模式详解二的教程,热爱PS的朋友们快点看过来吧!

  自本人教程《CSS盒子模式详解》发表以来,一直获得各位网友的好评与支持,今天应各位网友的要求,也为了答谢各位网友的支持,本人将推出续篇教程,以加深各位网友对CSS盒子模式的理解。此教程面向读者还是DIV排版入门者,如果你是高手,那就不要浪费自己时间了。

  本人这次将讲解一个纵向CSS导航栏实例的制作,在讲解过程中将会延用之前发表教程所讲到的盒子概念,如果你没有看过本人之前的那篇教程,又或者你还不理解什么是盒子这一概念,请先通过下面的两个链接阅读本人之前发表的教程,看完之后再回来看此教程,如有不便敬请原谅。

  用CSS做导航栏也是轻而易举的事情,在本人之前发表的教程中其实也有一个简单的横向导航栏制作,那时只给出了样式代码并没有作太多的解释,这次要做一个相对复杂点的导航栏,为了加深大家对CSS盒子模式的理解,特别选做一个有多层DIV嵌套实现的导航栏。

  先看实现原理动画演示:

  

  示例代码运行浏览: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

展开更多 50%)
分享

猜你喜欢

CSS盒子模式详解二

Web开发
CSS盒子模式详解二

CSS盒子模式详解三

Web开发
CSS盒子模式详解三

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

CSS盒子模式详解一

Web开发
CSS盒子模式详解一

CSS盒子模式详解五

Web开发
CSS盒子模式详解五

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

CSS盒子模式详解四

Web开发
CSS盒子模式详解四

进阶:彻底弄懂CSS盒子模式之二

Html CSS布局 Div+CSS XHTML
进阶:彻底弄懂CSS盒子模式之二

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

DIV+CSS布局中如何组织样式表以便于简化和维护

DIV+CSS布局中如何组织样式表以便于简化和维护

跟我学SQL

跟我学SQL
下拉加载更多内容 ↓