网页设计-DIV CSS网页布局课件.ppt

布局属性float 浮动 如下是设置第1个和第3个div向左浮动float:left; 第2个div向右浮动float:right; 布局属性float 浮动 以下有若干个div，它们都向左浮动，则它们会像流水一样，依次排开 布局属性float 浮动 如果其中某个元素的高度超出了其他元素的正常高度，则会将其他元素挤走. 布局属性clear 清除浮动 两个div正常显示 第一个div左浮 有何异常，淡蓝色盒子哪去了 布局属性clear 清除浮动 现在就正常了，此时是设置第2个盒子有清除左浮动属性。clear:left; 布局属性clear 清除浮动 现在又是什么情况呢，明明蓝色盒子在下边，现在怎么又跑上边来了呢? 是橘色右浮动，蓝色盒子顺势就跑上来了。 如何让蓝色盒子保持原来的位置呢。(请看下页) 布局属性clear 清除浮动 如何让现在图中的蓝色盒子保持原地不动。 这时需要设置清除右浮动元素，clear:right; 如果这样写麻烦，一会左一会右的，可以这样clear:both; 两边同时清除。 布局属性clear clear clear:none; 默认值 clear:left; 某元素的左边不允许有浮动元素 clear:right; 某元素的右边不允许有浮动元素 clear:both; 某元素的两边都不允许有浮动元素 布局课堂练习 实现如下整体网站的布局效果（不要求有内容） 内联元素和块元素总结 1.行内元素就好像一个单词；块级元素就好像一个段落。 2.每个块级元素默认都是从一个新行开始显示，行内元素在一行上连续显示。 3.行内元素相当一个小容器，块级元素是大容器，div相当于一个大容器，。span就是小容器，大容器可以放一个小容器。 4.块元素会顺序以每次另起一行的方式一直往下排。而有了css以后，我们可以改变这种html的默认布局模式，把块元素摆放到你想要的位置上去 5.常用的块元素：div、hr、table、form、p、ul/li， ol/li、dl/dt/dd、h1-h6、 pre、blockquote 6.常用的行内元素：span，a、img、input、select、textarea 上述红色表示典型分区元素（2个），绿色为无可替代的功能性元素，其余为表意元素（不多的几个）。 内联元素和块元素 区别： 内联元素与块状并不是完全无关的东西,其实是可以相互转换的： Display:block——变为块元素 Display:inline——变为内联元素 超链接使用，可以转化为block img行级元素的下边有空白，需要转化为block解决 布局属性overflow 溢出处理属性overflow使用方法 Overflow: hidden --------屏蔽溢出内容 scroll --------始终有滚动条 Auto --------视内容的多少而定，内容多，超出了容器，就会出现滚动条，否则就没有滚动条 布局属性overflow 溢出处理属性overflow分类 Overflow (水平和垂直均设置) Overflow-x (设置水平方向) Overflow-y (设置垂直方向) 布局属性overflow 溢出处理属性overflow-x 未设置溢出处理属性 设置水平滚动条(overflow-x:scroll) 布局属性overflow 溢出处理属性overflow-y 未设置溢出处理属性 设置水平滚动条(overflow-y:scroll) 布局属性overflow 溢出处理属性overflow-y 和 overflow-x; 未设置溢出处理属性 设置水平滚动条(overflow-x:auto;overflow-y:hidden;) 思考:只设置overflow-x:auto;会是什么情况 布局属性overflow 溢出处理属性overflow; 未设置溢出处理属性： 设置水平滚动条：(overflow:hidden;) 知识点运用场合 网页设计布局：网页设计是一门新兴的边缘性的行业，在网络产生以后应运而生。网页如门面，小到个人主页，大到大公司、大的政府部门以及国际组织等在网络上无不以网页作为自己的门面。当点击到网站时，首先映入眼帘的是该网页的界面设计，如内容的介绍、按钮的摆放、文字的组合、色彩的应用、使用的引导等等。这一切都是网页设计的范畴，都是网页设计师的工作。 项目制作 头部 html head meta http-equiv=Content-Type content=text/html; charset=utf-8 / titleborder、padding和ma