《CSS教学课件》CSS应用.pptxVIP

HTML教程CSS应用回顾CSS的定义文字的各种设置模块边框的设置背景设置学习目标理解区域和层的概念理解DIV+CSS进行网页布局的原理和基本结构掌握层的运用掌握DIV+CSS布局的基本应用区域和层的概念 随着Web2.0的出现，人们开始更关注使用DIV+CSS来进行网页的设计。相比较table，DIV+CSS布局更具有优势，它可以减少页面代码，加载速度得到很大的提高。 在网页上划出特定的一块，在这个块可以包含文字、图片和表格等各种网页组件，这个块就是区域。 区域的作用是划分网页——把密切相关的组件组织在一起，以便集体设置；并把它们同别的组件区分开来——各区域之间彼此独立。 “div/div”标记就是区域标记。区域的定义区域的定义必须配合CSS样式，否则就没有意义了。 页面上放置3个相邻的区域如下示图：区域的定位(绝对位置) 区域也可以设置不同的位置。通过使用CSS样式的定位属性来给区域定位。 如下示图： 区域的定位(相对位置)如下示图：网页组件的分段管理 前面讲解了区域的概念以及它的简单应用。网页中可以对组件进行分段管理。 如下示图：层的定义 什么是层？其实一个区域就可以被看作是一个层，是一个总处于统一平面中的层。 如下示图：区域的重叠顺序 接下来我们看一下改变层的堆叠次序。 如下示图：三维空间的建立 建立一个3D空间，需要x,y,z坐标。前面提到的”top”和”left”属性，其实就是x,y坐标，而”z-index”属性就是三维空间中的z坐标。它用来设置区域的上、下层关系，取值为整数，数值越大越靠上层。 如下示图：浮动 CSS中的一些元素是块级元素，表示它们会自动另起一行。属性float浮动可以让一个元素移到它所在行的某一边，使得其他内容沿着该元素的边缘向下流。(见CSS浮动.docx文档详解) 如下示图：Table+CSS与DIV+CSS优缺点table+css布局的缺点：不宜于修改和控制。结构混乱，难以阅读。不利于有哪些信誉好的足球投注网站引擎优化。可访问性差。冗余代码量大，加大服务器的负载。div+css布局的优点：便于修改和控制结构清晰，便于阅读。便于有哪些信誉好的足球投注网站引擎的有哪些信誉好的足球投注网站。表现和内容分离减少冗余代码，减少服务器的负载。 盒子模型 如果想熟练掌握DIV和CSS的布局方法，首先要对盒子模型有足够的了解。每个HTML元素都可以看作一个装了东西的盒子，盒子模型主要定义四个区域：content(盒子里面的内容)padding(内容到盒子的边框之间的距离即填充)border(盒子本身有边框)margin(而盒子边框外和其它盒子之间还有边界)盒子模型平面示意图盒子模型3D示意图网页布局基本结构div+css设计思路：用div来定义语义结构。用CSS来定义显示位置与大小，以及美化网页，如加入背景、线条边框、对齐方式等。在这个CSS定义的盒子内加上内容，如文字、图片等(没有表现属性的标记)。Header层pagebody层mainbody层sidebar层image层Footer层页面区域划分介绍Header层(顶部部分)：其中包括了网站LOGO、菜单、图片等内容。Pagebody层(内容部分)：又可以主体内容(mainbody层)、侧边栏(sidebar层)、图片分享(image层)。Footer层(底部部分)：包括版权、合作企业、友情链接网站等。总结层(DIV)就是网页上的一个区域，在这个区域中可以包含文字、图片和表格等各种网页组件。使用DIV可以将网页划分不同的区域，以分段管理网页内容。DIV通常和CSS配合使用，通过CSS样式来给DIV定位，及显示DIV中的内容。DIV+CSS布局就是将表现与结构分离：用DIV来设计网页的结构和内容，而用CSS来描述以何种方式来显示页面的结构与内容。理解盒子模型有助于学习DIV+CSS布局方法。盒子模型主要定义了四个区域：内容(content)、填充(padding)、边框(border)、边界(margin)DIV+CSS设计的思路：用DIV定义语义结构；用CSS来定义显示位置和大小；在CSS定义的盒子内加上内容。感谢聆听CSS绝对定位:位置将依据浏览器左上角的0点开始计算，绝对定位使元素与文档流无关，因此不占据空间。普通文档流中其这元素的布局就像绝对定位的元素不存在时一样。它相对于最近的已定位的祖先元素。如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。CSS 相对定位相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。