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

Click to edit Master title style,Click to edit Master text styles,Second level,Third level,Fourth level,Fifth level,11/7/2009,#,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,WEB,应 用 开 发,单元,2,：网站的规划与设计,任务,2,：网页设计与制作基础（,html+css+js,）,(3),WEB 应 用 开 发单元2：网站的规划与设计任务2：网页,主要内容,标准流布局与浮动布局,1,盒子的定位方式,2,网页布局方法,3,主要内容标准流布局与浮动布局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;,#block2,position: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,