《CSSDiv布局方法》PPT课件.ppt

第12章 CSS+Div布局方法,教学内容：CSSDiv是网站标准中常用的术语之一，CSS和Div的结构被越来越多的人采用，很多人都抛弃了表格而使用CSS来布局页面，它的好处很多，可以使结构简洁，定位更灵活，CSS布局的最终目的是搭建完善的页面架构。,教学重点 初识Div CSS定位 CSS布局理念 常见的布局类型,12.1 初识Div,在CSS布局的网页中，与都是常用的标记，利用这两个标记，加上CSS对其样式的控制，可以很方便地实现网页的布局。,12.1.1 Div概述,过去最常用的网页布局工具是标签，它本是用来创建电子数据表的，由于标签本来不是要用于布局的，因此设计师们不得不经常以各种不寻常的方式来使用这个标签如把一个表格放在另一个表格的单元里面。,12.1.2 Div与Span的区别 Div标记早在HTML3.0时代就已经出现，但那时并不常用，直到CSS的出现，才逐渐发挥出它的优势。而Span标记直到HTML 4.0时才被引入，它是专门针对样式表而设计的标记。,12.1.3 Div与CSS布局优势 掌握基于CSS的网页布局方式，是实现Web标准的基础。在主页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制。,CSS对元素的定位包括相对定位和绝对定位，同时，还可以把相对定位和绝对定位结合起来，形成混合定位。,12.2 CSS定位,如果想熟练掌握Div和CSS的布局方法，首先要对盒模型有足够的了解。盒子模型是CSS布局网页时非常重要的概念，只有很好地掌握了盒子模型以及其中每个元素的使用方法，才能真正的布局网页中各个元素的位置。,12.2.1 盒子模型的概念,float属性定义元素在哪个方向浮动。以往这个属性应用于图像，使文本围绕在图像周围，不过在CSS中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。,12.2.2 float定位,position的原意为位置、状态、安置。在CSS布局中，position属性非常重要，很多特殊容器的定位必须用position来完成。,12.2.3 position定位,12.3 CSS布局理念 无论使用表格还是CSS，网页布局都把大块的内容放进网页的不同区域里面。有了CSS，最常用来组织内容的元素就是标签。,12.3.1 将页面用Div分块 在利用CSS布局页面时，首先要有一个整体的规划，包括整个页面分成哪些模块，各个模块之间的父子关系等。,当页面的内容已经确定后，则需要根据内容本身考虑整体的页面布局类型，如是单栏、双栏还是三栏等，这里采用的布局如图12.5所示。,12.3.2 设计各块的位置,12.3.3 用CSS定位 整理好页面的框架后，就可以利用CSS对各个板块进行定位，实现对页面的整体规划，然后再往各个板块中添加内容。,12.4 常见的布局类型 现在一些比较知名的网页设计全部采用的DIV+CSS来排版布局，DIV+CSS的好处可以使HTML代码更整齐，更容易使人理解，而且在浏览时的速度也比传统的布局方式快，最重要的是它的可控性要比表格强得多。,12.4.1一列固定宽度 利用CSS可以控制段落的属性，主要包括单词间距、字符间隔、文字修饰、纵向排列、文本转换、文本排列、文本缩进和行高等。,12.4.2 一列自适应 自适应布局是在网页设计中常见的一种布局形式，自适应的布局能够根据浏览器窗口的大小，自动改变其宽度或高度值，是一种非常灵活的布局形式，良好的自适应布局网站对不同分辨率的显示器都能提供最好的显示效果。,12.4.3两列固定宽度 两列固定宽度非常简单，两列的布局需要用到两个div，分别为两个div的id设置为left与right，表示两个div的名称。,下面使用两列宽度自适应性，以实现左右列宽度能够做到自动适应，设置自适应主要通过宽度的百分比值设置。,12.4.4两列宽度自适应,在实际应用中，有时候需要右列固定宽度，右列根据浏览器窗口大小自动适应，在CSS中只要设置在左列的宽度即可，如上例中左右列都采用了百分比实现了宽度自适应，这里只要将左列宽度设定为固定值，右列不设置任何宽度值