单元2网页设计与制作基础(html+css+js)课件.ppt
WEB 应 用 开 发,单元2：网站的规划与设计,任务2：网页设计与制作基础（html+css+js）(3),WEB 应 用 开 发单元2：网站的规划与设计任务2：网页,主要内容,主要内容标准流布局与浮动布局1盒子的定位方式2网页布局方法3,学习目标,知识目标：CSS样式的核心原理：浮动与定位能力目标：能够使用CSS样式布局网页,学习目标知识目标：,技术应用的背景,在HTML文档里使用CSS样式可以美化页面的外观，改变页面的布局。使用外部样式可以解决网站内容与表现分离的问题，另外外部样式表可以极大提高工作效率，能轻松的为网页进行改版或维护。,技术应用的背景在HTML文档里使用CSS样式可以美化页面的外,一、标准流布局与浮动布局,1. CSS布局方式：标准流CSS有三种基本的布局方式，分别是标准流、浮动和定位。所谓标准流是指页面元素按照所在XHTML文档的位置顺序排列的布局方式。在没有添加其他布局方式的情况下，页面遵循标准流的布局方式。,一、标准流布局与浮动布局1. CSS布局方式：标准流,（1）标准流布局方式下行内元素的间距,行内元素之间的左右距离 左元素的右边距+右元素的左边距,一、标准流布局与浮动布局（续）,（1）标准流布局方式下行内元素的间距行内元素之间的左右距离,一、标准流布局与浮动布局（续）,（2）标准流布局方式下块元素的上下间距,两块之间的上下间距 max 上一个块元素的下边距，下一个块元素的上边距 ,一、标准流布局与浮动布局（续）（2）标准流布局方式下块元素的,一、标准流布局与浮动布局（续）,（3）标准流布局方式下嵌套块元素的边界,子块元素是以父元素为基准定位的。,一、标准流布局与浮动布局（续）（3）标准流布局方式下嵌套块元,一、标准流布局与浮动布局（续）,2. CSS布局方式：浮动使用浮动布局是目前网页制作中最为常用的方式。应用了浮动的元素全部都会成为块级元素，并且脱离原来的常规流模式。应用了浮动的元素可以向页面的左边或者右边移动，直到其边缘接触到其父元素的边框或者另外一个浮动元素的边框。,一、标准流布局与浮动布局（续）2. CSS布局方式：浮动,一、标准流布局与浮动布局（续）,盒子的浮动属性盒子拥有一个float属性，可以设置为向左或向右浮动要点：float属性让盒子浮动起来，自动贴靠于其父元素的左或右边缘。设置了float属性的盒子自身宽度由其内部保持标准流布局的元素宽度决定。,一、标准流布局与浮动布局（续）盒子的浮动属性,一、标准流布局与浮动布局（续）,盒子的浮动属性（续）,Box-2的左边框,标准流效果,将Box-1左浮动后的效果,一、标准流布局与浮动布局（续）盒子的浮动属性（续）Box-2,一、标准流布局与浮动布局（续）,盒子的浮动属性（续）,标准流效果,将Box-1、 Box-2左浮动后的效果,Box-1和Box-2之间的空白是由二者的margin构成的,一、标准流布局与浮动布局（续）盒子的浮动属性（续）标准流效果,一、标准流布局与浮动布局（续）,盒子的浮动属性（续）,标准流效果,将Box-1、 Box-2 、 Box-3左浮动后的效果,一、标准流布局与浮动布局（续）盒子的浮动属性（续）标准流效果,一、标准流布局与浮动布局（续）,盒子的浮动属性（续）,清除段落左浮动后的效果,将Box-1、 Box-2 、 Box-3左浮动后的效果,一、标准流布局与浮动布局（续）盒子的浮动属性（续）清除段落左,二、盒子的定位方式,1. 元素的定位问题主要影响网页布局的是块元素。块元素有两种主要的显示方式：标准流式布局与浮动布局标准流式布局比较简单：块元素分行显示行内元素在同一行内显示，一行显示不下则折行对于浮动布局，情况就复杂得多，盒子模型中定义了一个position属性用于指定元素的布局方式。,二、盒子的定位方式1. 元素的定位问题,二、盒子的定位方式（续）,1. 元素的定位问题主要影响网页布局的是块元素。块元素有两种主要的显示方式：标准流式布局与浮动布局标准流式布局比较简单：块元素分行显示行内元素在同一行内显示，一行显示不下则折行对于浮动布局，情况就复杂得多，盒子模型中定义了一个position属性用于指定元素的布局方式。,二、盒子的定位方式（续）1. 元素的定位问题,二、盒子的定位方式（续）,（1）静态定位方式position=static这是默认的属性值，表明盒子中的元素按照标准流方式进行定位，“该在哪就在哪”。,二、盒子的定位方式（续）（1）静态定位方式,二、盒子的定位方式（续）,（2）相对定位方式position=relative要点：使用相对定位方式的盒子，会相对于它原本的位置有一个偏移，到达一个新位置。使用相对定位方式的盒子仍在标准流中，因此会影响其后继元素的定位关键：弄清楚以什么为基准定位,二、盒子的定位方式（续）（2）相对定位方式,二、盒子的定位方式（续）,（2）相对定位方式（续）,#block1 position:relative; bottom:30px; right:30px; ,#block2position:relative;top:30px;left:30px;,二、盒子的定位方式（续）（2）相对定位方式（续）#block,二、盒子的定位方式（续）,（3）绝对定位方式position=absolute要点：使用绝对定位的盒子以它“最近”的一个已经定位的父元素为基准进行定位，如果没有这样的元素，则以浏览器窗口为基准。绝对定位的盒子从标准流中脱离，它们对其后元素的定位没有影响。,注意：“已经定位”指position属性被设置为除static以外的所有值之一。,二、盒子的定位方式（续）（3）绝对定位方式注意：“已经定位”,二、盒子的定位方式（续）,（3）绝对定位方式（续）,#block2 position:absolute; top:0px; right:0px; ,二、盒子的定位方式（续）（3）绝对定位方式（续）#block,二、盒子的定位方式（续）,#father position:relative;#block2 position:absolute; top:0px; right:0px; ,（3）绝对定位方式（续）,二、盒子的定位方式（续）#father （3）绝对,二、盒子的定位方式（续）,(4) 固定定位position=fixed要点：采用固定定位方式的盒子以浏览器窗口为基准定位；采用固定定位方式的盒子脱离了原来的标准流，它的兄弟盒子定位时将其视为“不存在”。采用固定定位的盒子不理会父盒子的定位方式。,二、盒子的定位方式（续）(4) 固定定位,三、网页布局,网页布局要点：在设计前要分析并确定网页的逻辑结构，用div进行界定然后通过CSS规则定义出基本块（block）的显示效果使用定义好的基本块布局网页，在具体设计时要灵活应用块元素的浮动和定位方式在各种版本的浏览器中进行测试,三、网页布局网页布局要点：,四、小结：,本节主要介绍使用CSS样式布局网站的相关知识，包括标准流布局与浮动布局方式、盒子的定位方式等，能够根据网站的主题设计合适的网页布局。,四、小结： 本节主要介绍使用CSS样式布局网站,THANK YOU,THANK YOU,
