单元2网页设计与制作基础(html+css+js)课件.ppt

1、WEB 应 用 开 发单元单元2 2：网站的规划与设计：网站的规划与设计任务2：网页设计与制作基础（html+css+js）(3)主要内容标准流布局与浮动布局1 1盒子的定位方式2 2网页布局方法3 3学习目标学习目标知识目标：知识目标：CSS样式的核心原理：浮动与定位能力目标：能力目标：能够使用CSS样式布局网页技术应用的背景技术应用的背景在HTML文档里使用CSS样式可以美化页面的外观，改变页面的布局。使用外部样式可以解决网站内容与表现分离的问题，另外外部样式表可以极大提高工作效率，能轻松的为网页进行改版或维护。一、标准流布局与浮动布局1.CSS布局方式：标准流布局方式：标准流 CSS有三

2、种基本的布局方式，分别是标准流、浮动和定位。所谓标准流是指页面元素按照所在XHTML文档的位置顺序排列的布局方式。在没有添加其他布局方式的情况下，页面遵循标准流的布局方式。（1 1）标准流布局方式下行内元素的间距）标准流布局方式下行内元素的间距行内元素之间的左右距离 左元素的右边距+右元素的左边距一、标准流布局与浮动布局（续）一、标准流布局与浮动布局（续）（2 2）标准流布局方式下块元素的上下间距）标准流布局方式下块元素的上下间距两块之间的上下间距 max 上一个块元素的下边距，下一个块元素的上边距 一、标准流布局与浮动布局（续）（3）标准流布局方式下嵌套块元素的边界）标准流布局方式下嵌套块元

3、素的边界子块元素是以父元素为基准定位的。一、标准流布局与浮动布局（续）2.CSS布局方式：浮动布局方式：浮动 使用浮动布局是目前网页制作中最为常用的方式。应用了浮动的元素全部都会成为块级元素，并且脱离原来的常规流模式。应用了浮动的元素可以向页面的左边或者右边移动，直到其边缘接触到其父元素的边框或者另外一个浮动元素的边框。一、标准流布局与浮动布局（续）盒子的浮动属性盒子的浮动属性 盒子拥有一个float属性，可以设置为向左或向右浮动 要点：1.float属性让盒子浮动起来，自动贴靠于其父元素的左或右边缘。2.设置了float属性的盒子自身宽度由其内部保持标准流布局的元素宽度决定。一、标准流布局与

4、浮动布局（续）盒子的浮动属性（续）盒子的浮动属性（续）Box-2Box-2的的左边框左边框标准流效果将Box-1左浮动后的效果一、标准流布局与浮动布局（续）盒子的浮动属性（续）盒子的浮动属性（续）标准流效果将Box-1、Box-2左浮动后的效果Box-1Box-1和和Box-2Box-2之间之间的空白是由二者的的空白是由二者的marginmargin构成的构成的一、标准流布局与浮动布局（续）盒子的浮动属性（续）盒子的浮动属性（续）标准流效果将Box-1、Box-2、Box-3左浮动后的效果一、标准流布局与浮动布局（续）盒子的浮动属性（续）盒子的浮动属性（续）清除段落左浮动后的效果将Box-1、

5、Box-2、Box-3左浮动后的效果二、盒子的定位方式1.元素的定位问题元素的定位问题 主要影响网页布局的是块元素。块元素有两种主要的显示方式：标准流式布局与浮动布局 标准流式布局比较简单：1.块元素分行显示2.行内元素在同一行内显示，一行显示不下则折行 对于浮动布局，情况就复杂得多，盒子模型中定义了一个position属性用于指定元素的布局方式。二、盒子的定位方式（续）1.元素的定位问题元素的定位问题 主要影响网页布局的是块元素。块元素有两种主要的显示方式：标准流式布局与浮动布局 标准流式布局比较简单：1.块元素分行显示2.行内元素在同一行内显示，一行显示不下则折行 对于浮动布局，情况就复杂

6、得多，盒子模型中定义了一个position属性用于指定元素的布局方式。二、盒子的定位方式（续）（1 1）静态定位方式）静态定位方式position=static这是默认的属性值，表明盒子中的元素按照标准流方式进行定位，“该在哪就在哪”。二、盒子的定位方式（续）（2 2）相对定位方式）相对定位方式position=relative要点：1.1.使用相对定位方式的盒子，会相对于它原本的位置有一个偏使用相对定位方式的盒子，会相对于它原本的位置有一个偏移，到达一个新位置。移，到达一个新位置。2.2.使用相对定位方式的盒子仍在标准流中，因此会影响其后继使用相对定位方式的盒子仍在标准流中，因此会影响其后继

7、元素的定位元素的定位关键：弄清楚以什么为基准定位二、盒子的定位方式（续）（2 2）相对定位方式（续）相对定位方式（续）#block1 position:relative;bottom:30px;right:30px;#block2position:relative;top:30px;left:30px;二、盒子的定位方式（续）（3）绝对定位方式）绝对定位方式 position=absolute 要点：1.使用绝对定位的盒子以它“最近”的一个已经定位已经定位的父元素为基准进行定位，如果没有这样的元素，则以浏览器窗口为基准。2.绝对定位的盒子从标准流中脱离，它们对其后元素的定位没有影响。注意：注意

8、：“已经定位已经定位”指指position属性被设置为除属性被设置为除static以外的所有值之一。以外的所有值之一。二、盒子的定位方式（续）（3）绝对定位方式（续）绝对定位方式（续）#block2 position:absolute;top:0px;right:0px;二、盒子的定位方式（续）#father position:relative;#block2 position:absolute;top:0px;right:0px;（3）绝对定位方式（续）绝对定位方式（续）二、盒子的定位方式（续）(4)(4)固定定位固定定位position=fixed要点：1.采用固定定位方式的盒子以浏览器窗口为基准定位；2.采用固定定位方式的盒子脱离了原来的标准流，它的兄弟盒子定位时将其视为“不存在”。3.采用固定定位的盒子不理会父盒子的定位方式。三、网页布局 网页布局要点：网页布局要点：在设计前要分析并确定网页的逻辑结构，用div进行界定 然后通过CSS规则定义出基本块（block）的显示效果 使用定义好的基本块布局网页，在具体设计时要灵活应用块元素的浮动和定位方式 在各种版本的浏览器中进行测试四、小结：本节主要介绍使用CSS样式布局网站的相关知识，包括标准流布局与浮动布局方式、盒子的定位方式等，能够根据网站的主题设计合适的网页布局。