《HTML CSS JavaScript网页制作三合一案例教程》教学课件 11第十一章.pptxVIP

主编：徐照兴、谭鸿健、郑宁健;第十一章 CSS定位布局 ——制作企业网站首页;;案例一 对页面进行整体布局 ——CSS定位属性;案例一 对页面进行整体布局 ——CSS定位属性;为便于理解，我们将案例分成2部分来讲解，先在前面制作的网页基础上构建整体HTML结构，再利用CSS设置网页样式。CSS代码单独放在文件名为NewsStyle.css的CSS外部文件中。在制作本案例的过程中，要特别注意如何确定绝对定位元素的祖先元素。;一、认识CSS中的定位属性;position属性有4个属性值，代表不同的定位方式，其各属性值的含义如表11-2所示。;我们重点讨论相对定位relative和绝对定位absolute，在定位的过程中要注意left、top、right和bottom属性只需要定义两个，水平方向：left或right；垂直方向：top或bottom，即X轴与Y轴两点确定位置。不能把4个属性同时进行设置。;二、CSS相对定位;注意，在使用相对定位时，无论是否移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其他元素。;三、CSS绝对定位;四、元素的堆叠顺序、溢出和剪裁;图11-8 改变绝对定位元素的堆叠顺序前后效果;overflow属性用于规定当内容溢出元素框时如何处理，其常用的属性值如表11-3所示。;图11-9 元素的溢出效果;clip属性用来剪裁绝对定位元素，它可以为元素块定义一个矩形裁剪框，裁剪框之内的区域显示，之外的区域不显示（或根据overflow的属性值来处理）。clip属性的基本语法为：clip: rect (top, right, bottom, left)；。例如，clip: rect (2px, 10px, 2px, 10px)；，表示将元素块的上下和左右各裁剪掉2像素和10像素。;五、网页布局经验总结;（4）采用绝对定位法时，首先要找到绝对定位的祖先元素即参考对象，祖先元素必须拥有定位position属性，属性值为relative或absolute。如果祖先元素需要保留在标准流中的位置，通常会设置为relative。其次要设置绝对定位的坐标值，参考点是祖先元素4个顶点中的任意一点，只能设置两个值即水平方向：left或right；垂直方向：top或bottom。 （5）当页面中元素按照标准流方式布局时，需要对自己的位置进行调整而保留原来的位置时，可以采用相对定位。在使用相对定位时，参考点是元素本身在标准流中的位置，坐标值的设置原理与绝对定位相同，因此在使用相对定位时无论是否进行移动，元素仍然占据原来的空间。要特别注意元素移动后可能会导致它覆盖其他框，所以单独使用相对定位的时候比较少，通常是结合绝对定位法使用，即将相对定位元素作为绝对定位的祖先元素使用。;案例二 制作图片新闻栏目;案例二 制作图片新闻栏目;案例三 制作新闻列表栏目;案例三 制作新闻菜单;观察效果图，可以分析出集团新闻栏目的版式结构如图11-15所示。可根据该图示和效果图构建栏目的HTML结构，代码如下。注意各元素的id名或class名，以及包含关系。;案例四 制作企业首页的其他栏目;案例四 制作企业首页的其他栏目;Thank you！