HTML与CSS前台页面设计许莉第11章使用CSS样式完成网页布局课件教学.pptVIP

PPT研究院 POWERPOINT ACADEMY * * HTML与CSS前台页面设计 第十一章 HTML与CSS前台页面设计 使用CSS样式完成网页布局 第十一章 使用CSS样式完成网页布局 HTML与CSS前台页面设计 本章要点 网页居中的实现方式 基于FLOAT的网页布局的实现方式 图文混排复杂布局的的实现方式 第十一章 使用CSS样式完成网页布局 HTML与CSS前台页面设计 目录： 11.1 CSS网页布局介绍 11.2 网页居中 11.3 基于FLOAT的网页布局 11.4 复杂布局 11.5 综合实例 1. CSS网页布局的意义 用CSS进行网页布局使网站的信息更丰富、网页表现更美观，意义体现在如下方面： （1）使页面载入得更快 （2）修改设计时更有效率 （3）保持一致性 （4）对浏览者和浏览器更具亲和力 11.1 CSS网页布局介绍 2. CSS盒模型 W3C组织建议把所有网页上的对象都放在一个盒(box)中，可以通过创建定义来控制这个盒的属性。盒模型主要定义四个区域：内容(content)、填充(padding)、边界(border)和边距(margin)。margin，padding，content，border之间的层次相互影响。 11.1 CSS网页布局介绍 3. CSS网页布局的基本思路 用CSS进行网页布局时，主要考虑的是页面内容的语义和结构，因为一个用CSS控制的网页，在做好网页后，还可以轻松的调整网页风格。用CSS进行布局的一个目的是让代码易读，区块分明，强化代码重用，所以结构很重要。 11.1 CSS网页布局介绍 1.自动空白边居中设计 以固定宽度的一列布局代码为例，为其增加居中的CSS样式，主要是要对margin属性进行设置： margin:0px auto; margin属性用于控制对象的上、右、下、左四个方向的外边距，当margin使用两个参数时，第一个参数表示上下边距，第二个参数表示左右边距。 11.2 网页居中 2.定位居中设计 使用自动空白边进行居中的方法是最常用的，但也可以使用定位和负值空白边来实现居中对齐的效果。 首先定义容器的宽度 。 然后将容器的position属性设置为absolute，将left属性设置为50%。这会把容器的左边缘定位在页面的中间，但需要的是让容器居中。所以需要对容器的左边应用一个负值的空白边，宽度等于容器宽度的一半，这会把容器向左边移动它的宽度的一半，从而让它在页面上居中。 11.2 网页居中 基于float的网页布局是设定希望定位的元素的宽度，然后将它们向左或向右浮动。因为浮动的元素不再占据文档流中的空间，就不再对包围它们的边框产生影响，因此需要对布局中各个点上的浮动元素进行清理。 1. 两列布局 要想使用float创建两列布局，首先需要有一个基本的框架。在下面的示例中，HTML页面由头部区域、主页面区域和的页脚组成。其中主页面区域分成左右两列，左列用作导航页面，右列用作显示页面。主页面区域就是用float实现的两列布局。整个设计放置在一个div中，这个div使用前面介绍的方法进行水平居中。 11.3 基于FLOAT的网页布局 2. 多列布局 一种方法是在设置两列布局时，左右两列的宽带之和不占满整个父容器，然后再放入第三列，会浮动到空余的空间，就是中间位置，这样就可以实现三列布局了。 另外一种方法是在刚才两列布局中的右边列的div中再添加firstright和secondright这两个新的div，将右边列再分成两列。 接着可以使用与两列布局相同的样式进行设置，即为新增加的每个列设置相应的宽度和高度，然后将firstright列向左浮动，将secondright列向右浮动。本质上就是将右边的列再分成两列，形成三列的效果。 11.3 基于FLOAT的网页布局 3. 多列布局 一种方法是在设置两列布局时，左右两列的宽带之和不占满整个父容器，然后再放入第三列，会浮动到空余的空间，就是中间位置，这样就可以实现三列布局了。 另外一种方法是在刚才两列布局中的右边列的div中再添加firstright和secondright这两个新的div，将右边列再分成两列。 接着可以使用与两列布局相同的样式进行设置，即为新增加的每个列设置相应的宽度和高度，然后将firstright列向左浮动，将secondright列向右浮动。本质上就是将右边的列再分成两列，形成三列的效果。 11.3 基于FLOAT的网页布局 1. 动态布局 动态布局时，主体部分尺寸是用百分数而不是像素设置的，因此可以自适应用户的分辨率。这使动态布局能够相对于浏览器窗口