请选择 进入手机版 | 继续访问电脑版

驱动 化学 物理论文 酒店管理系统 08cms 第七章 qq空间 放大电路 英语论文 下载 脆梨漫画 起诉 精品课 奇迹MU 站帮网 片资源库 爱家 智能门铃 数据库清空 翻译软件

查看: 1745|回复: 0

教你了解DIV+CSS系列教程(第5讲)

[复制链接]
发表于 2012-4-25 00:44:49 | 显示全部楼层 |阅读模式
  第5讲 实例分析讲解CSS中的float及其相关属性
  Float这个属性在网页设计制作中起很关键的作用.
  举个例子:
  我们写一段menu的代码
  CSS如下:
  #menu{width:100%; line-height:20px; height:20px; padding-left:5%;}
  #menu li{float:left; padding-right:5px; list-style:none;}
  .clear{clear:both;}
  相关的HTML代码如下:
  <div id=\"menu\">
  <div>
  <li>菜单1</li><li>菜单2</li><li>菜单3</li>
  <div class=\"clear\"></div>
  </div></div>
  示范效果页面参见附录里的1.htm
  下面来解释一下这段代码
  先是menu这个ID,我们定义了它的总宽度width为100%宽,即宽度覆盖整个网页,设定了它的高度height为20px,它的书写高度为line-height为20px,整个内容向左浮动了5%
  这里说明一下,记得上次某人问我h3标记中,用CSS让题目竖直居中就是靠line-height
  Line-height定义了书写的高度,如果你没有定义的话,它就是默认的100%高度,当然它是默认居中的,但是你不可能看得出来的,如果定义了它的高度的话就能明显的了解到了.
  在CSS中,我们定义了在#menu这个ID中的li标记向左浮动,为了美观,我用了两个修饰,一个是内容的右部分向左偏移了5px,另外一个是list-style,定义了li这个列表标记的样式为无样式,方便我们用背景图之类的东西来美化
  然后在HTML中我们就会发现,以前默认的li标记是默认一个行的,现在变成了在一行,这个就是float的作用,浮动.
  作为CSS中最为常用的属性,float主要用于双栏甚至3栏布局中,也常用于某些需要几个一行的地方.
  需要注意的是,在HTML的第2行以及第4行,我们定义了一个限制层,层内用了一个新的层,class为clear,这个class的作用就是清除浮动.
  因为float这个属性虽然非常的好用,但是容易引起错误,所以需要用清除浮动来消除这些错误.
  很多时候网页写完后检查时的错位现象都是因为没有清除浮动而造成的.
  这点希望大家要牢记.
  下面我们来说明下float的一个特性,就是表现多样性
  我们来看段例子,参看附录2中的2.htm
  我们可以看到,float我们运用了不同的方法,实现了相同的部分,注意看源代码的话我们可以看出排布是不同的。
  下面来说下原理,float:left是让层向左浮动,它的指挥顺序是从左到右。float:right正好相反,它的指挥顺序是从右到左,这个就可以解释1行和2行的排布区别为什么一个是div1,div2,div3而另外一个是div3,div2,div1。
回复

使用道具 举报

使用 高级模式(可批量传图、插入视频等)
您需要登录后才可以回帖 登录 | 立即注册

快速回复 返回顶部 返回列表