HTML+CSS+JavaScript网站开发实用技术第5章.pptVIP

小结 本章介绍使用DIV+CSS对网页进行布局，主要内容如下。 （1）盒模型。盒模型是CSS控制页面的最基本、最重要的概念之一，读者必须充分理解其概念和属性设置。 （2）常用布局属性，主要包括定位属性和浮动属性。通过不同属性值的设置实现对页面各元素的绝对和相对位置及层叠次序的布局，使页面布局灵活美观。 （3）页面整体布局。介绍了多种常见的页面整体布局方式，使页面整体结构清晰规整。在实际网站开发中，网页页面布局多采用多种布局方式结合的复杂布局方式，以满足页面信息量大、便于用户查看等需求。 （4）导航菜单。介绍了横、纵两种二级导航菜单的制作。 作业 1. 简答题 （1）什么是CSS盒模型概念，如何计算其宽度？ （2）请简述下列代码的含义：border-style:solid outset ridge dotted; （3）简述绝对定位的设置效果。 Your Text Your Text Your Text Your Text Your Text Your Text Your Text Your Text 2001 2002 2003 2004 HTML+CSS+JS网站开发实用技术 LOGO HTML+CSS+JS网站开发实用技术 * * 第5章 使用DIV+CSS实现精美布局 CSS布局常用属性 2 DIV+CSS网页布局 3 应用案例 4 CSS盒模型 1 小结 5 5.1 CSS盒模型 盒模型是CSS控制页面的一个非常重要的概念. 页面上的所有元素，包括文本、图像、超级链接、DIV块等，都可以被看作盒子。 盒子将页面中的元素包含在一个矩形区域内，这个矩形区域则称为“盒模型”。 网页页面布局的过程，可以看作在页面空间中摆放盒子的过程。 5.1 CSS盒模型 盒模型由内到外依次分为内容(content)，填充(padding)，边框(border)和边界(margin)四部分。 5.1 CSS盒模型 5.1.1 内容(content) 内容是盒模型中必须有的部分。 内容的大小由属性宽度和高度定义，格式： width: auto | length; height: auto | length; 示例： demo0501.html demo0502.html 5.1 CSS盒模型 5.1.2边界(margin) 边界是盒模型与其他盒模型之间的距离，利用margin属性定义： margin: auto | length; length是长度值或百分比值，百分比值是基于父对象的值。长度值可以为负值，实现盒子间的重叠效果。 利用margin的四个子属性margin-top、margin-bottom、margin-left、margin-right分别定义盒子四周各边界值，语法同margin。 demo0503.html 5.1 CSS盒模型 5.1.3填充(padding) 填充是用来设置内容和盒子边框之间的距离，可用padding属性设置 padding: length; length可以是长度值或百分比值。 利用padding的四个子属性padding-top、padding-bottom、padding-left、padding-right分别定义盒子4个方向的填充值。长度值不可以为负。 demo0504.html 5.1 CSS盒模型 5.1.4边框(border) 边框是盒模型中介于填充(padding)和边界(margin)之间的分界线，可用border-width、border-style、border-color属性定义边框的宽度、样式、颜色。 5.1 CSS盒模型 1．边框样式 边框样式用border-style属性描述，其值可取的关键字如下。 ·none：无边框，默认值 ·hidden：隐藏边框 ·dashed：点划线构成的虚线边框 ·dotted：点构成的虚线边框 ·solid：实线边框 ·double：双实线边框 ·groove：根据color值，显示3D凹槽边框 ·ridge：根据color值，显示3D凸槽边框 ·inset：根据color值，显示3D凹边边框 ·outset：根据color值，显示3D凸边边框 5.1 CSS盒模型 2．边框宽度 边框宽度用border-width属性描述，值可以是关键字medium、thin、thick或长度值或百分比。 3．边框颜色 边框颜色用border-color属性描述，值同color属性，可以是RGB值，颜色名等。 demo0505.html demo0506.html 5.2 CSS布局常用属性 CSS布局完全区别于传统的表格布局。 CSS布局先利用div标记进行将页面整体分为若干个盒子，而后对各个盒子进行定位。 常用的布局方