HTML5与CSS3 Web前端开发技术第15章 CSS3的盒模型及网页布局.pptVIP

15.3 CSS的网页布局 示例15-20是一个典型的嵌套2列布局，用到了盒布局中的弹性布局属性-webkit-box-flex。 15.3 CSS的网页布局 15.3.3 使用CSS3盒布局的三列布局 三列布局可以使用float属性实现，对3个盒子（列）对象分别设定位置和宽度，再设置浮动属性即可。 #left{ height: 400px; width: 120px; float: left; } #right{ background:#FFC; height: 400px; width: 100px; float: right; } #main{ background: #D0FFFF; height: 400px; margin-left:120px; } 15.3 CSS的网页布局 15.3.3 使用CSS3盒布局的三列布局 1．简单的三列布局 示例15-21是一个使用盒布局实现的三列布局。左右两列宽度固定，中间列自适应。 15.3 CSS的网页布局 嵌套的三列布局 前面布局采用的策略是将盒子（div块）从上到下、从左到右依次排列。 15.3 CSS的网页布局 15.4 DIV+CSS布局的应用 在设计网页之前，首先对网页布局有一个总体思路，然后就可以用盒子对网页进行大致分块设定。 15.4.1 图文混排的实现 1．用DIV+CSS布局方式实现图文混排效果 15.4 DIV+CSS布局的应用 1．用DIV+CSS布局方式实现图文混排效果 15.4 DIV+CSS布局的应用 15.4 DIV+CSS布局的应用 15.4.1 图文混排的实现 2．对示例15-23的改进 15.4 DIV+CSS布局的应用 15.4.2 制作二级导航菜单 导航菜单通常分为横向导航菜单和纵向导航菜单。DIV+CSS布局中多通过控制列表样式制作导航菜单，主要用到ul、li、a等3组标记。 1．建立一级菜单 15.4 DIV+CSS布局的应用 2．定义CSS样式 创建样式#menu，设置菜单整体大小等属性，并添加到div标记中；创建样式#menu ul，设置隐藏列表符号、清除边距等属性,代码如下。 15.4 DIV+CSS布局的应用 3．创建二级菜单 二级导航菜单是指当鼠标经过一级菜单项时，会弹出相应的二级菜单，鼠标离开该项后二级菜单自动消失。接下来在上例的基础上制作二级菜单，以一级菜单项“CSS”为例，在其下添加二级菜单。 15.4 DIV+CSS布局的应用 15.4.2 制作二级导航菜单 15.4 DIV+CSS布局的应用 4．横向二级导航菜单 作业 HTML5+CSS3 Web前端开发技术 LOGO HTML5+CSS3 Web前端开发技术 * 第15章CSS3的盒模型及网页布局 CSS盒模型 1 CSS布局常用属性 2 CSS的网页布局 3 DIV+CSS布局的应用 4 15.1 CSS盒模型 盒模型是CSS控制页面布局的一个非常重要的概念，页面上的所有元素，包括文本、图像、超级链接、div块等，都可以被看作盒子。由盒子将页面中的元素包含在一个矩形区域内，这个矩形区域则称为“盒模型”。 15.1 CSS盒模型 网页页面布局的过程可以看作在页面空间中摆放盒子的过程。通过调整盒子的边框、边界等参数控制各个盒子，实现对整个网页的布局。 盒模型由内到外依次分为内容（content）、填充（padding）、边框（border）和边界（margin）4部分。盒子的实际大小为这几部分之和，图15-1所示的盒子宽度为：左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。 15.1 CSS盒模型 15.1.1 盒模型的组成 1.内容 内容（content）是盒子里的“物品”，是盒模型中必须有的部分，可以是网页上的任何元素，如文本、图片、视频等各种信息。 定义盒模型语法格式如下： width: auto | length; height: auto | length; overflow: auto | visible | hidden | scroll; 15.1 CSS盒模型 示例15-1对2个含有文字信息的盒模型进行了内容设置 15.1 CSS盒模型 2. 边界 边界（margin）是盒模型与其他盒模型之间的距离，使用margin属性定义。示例15-2演示了边界设置. margin: auto | length; 15.1 CSS盒模型 3.填充 填充（padding）用来设置内容和盒