HTML5+CSS3+JavaScript+Bootstrap网站开发技术（第3版）课件 第4章 规划页面 使用CSS实现精美布局

第4章规划页面使用CSS实现精美布局CSS布局常用属性2CSS网页布局3应用案例4CSS盒模型1小结54.1CSS盒模型盒模型用于CSS控制页面.页面上的所有元素，文本、图像、超级链接、DIV块等，都可以被看作盒子。盒子将页面元素包含在一个矩形区域内，这个矩形区域也称为“盒模型”。网页页面布局的过程，可以看作在页面空间中摆放盒子的过程。4.1CSS盒模型盒模型由内到外依次分为内容(content)，填充(padding)，边框(border)和边界(margin)四部分。4.1CSS盒模型4.1.1内容(content)内容是盒模型中必须有的部分。内容的大小由属性宽度和高度定义。width:auto|length;height:auto|length;示例：

demo0401.htmldemo0402.html4.1CSS盒模型4.1.2边界(margin)边界是盒子与其他盒子之间的距离，使用margin属性定义。margin:auto|length;length是长度值或百分比值，百分比值是基于父对象的值。长度值可以为负值，实现盒子间的重叠效果。margin有四个子属性margin-top、margin-bottom、margin-left、margin-right。demo0403.html4.1CSS盒模型4.1.3填充(padding)填充用来设置内容和盒子边框之间的距离，使用padding属性。padding:length;length可以是长度值或百分比值。Padding有四个子属性padding-top、padding-bottom、padding-left、padding-right。demo0404.html4.1CSS盒模型4.1.4边框(border)边框是盒模型中介于填充(padding)和边界(margin)之间的分界线用border-width、border-style、border-color属性定义边框的宽度、样式、颜色。4.1CSS盒模型1．边框样式用border-style属性描述，取值如下。·none：无边框，默认值

·hidden：隐藏边框·dashed：点划线构成的虚线边框·dotted：点构成的虚线边框·solid：实线边框

·double：双实线边框·groove：根据color值，显示3D凹槽边框·ridge：根据color值，显示3D凸槽边框·inset：根据color值，显示3D凹边边框·outset：根据color值，显示3D凸边边框4.1CSS盒模型2．边框宽度用border-width属性描述，值可以是关键字medium、thin、thick或长度值或百分比。3．边框颜色用border-color属性描述，值同color属性，可以是RGB值，颜色名等。demo0405.htmldemo0406.html4.2CSS布局常用属性CSS布局完全区别于传统的表格布局。用<div>元素进行将页面整体分为若干个盒子，而后对各个盒子进行定位。布局方式主要有定位式和浮动式两种，布局属性为定位属性(position)和浮动属性(float)。4.2CSS布局常用属性4.2.1定位属性(position)盒子可以分为块内元素和行内元素两种.CSS通过display属性来定义盒子是块内元素还是行内元素。默认情况下，作为块元素的盒子，例如，<div>、<p>，HTML规则约定上下排列；行内元素，例如<span>、<a>，HTML规则约定盒子左右排列。4.2CSS布局常用属性使用position属性可以精确控制盒子的位置.position:static|relative|absolute|fixed;static：静态定位，默认。absolute绝对定位relative相对定位fixed固定定位4.2CSS布局常用属性1.static：静态定位.默认定位值，盒子按照HTML规则定位，定义top、left、bottom、right无意义；示例：demo0407.html2.relative：相对定位。通过top、left、bottom、right等属性值定位元素相对其原本应显示位置的偏移位置，占用原位置空间；示例：demo0408.html4.2CSS布局常用属性3.absolute：绝对定位通过top、left、bottom、right等属性值定位盒子相对其具有position设置的父对象的偏移位置，不占用原页面空间.两种情况父对象具有position属性设置demo0409.html父对象无position属性设置demo0409.html的改进4.2CSS布局常用属性4．层叠定位属性(z-index)层叠定位属性(z-index)定义页面元素的层叠次序。z-index的取值为可以为负的数，表示各元素间层次关系，值大者在上，当为负数时表示该元素位于页面之下。示例demo0410.html4.2CSS布局常用属性4.2.2浮动属性(float)float属性可以控制盒子左右浮动，直到边界碰到父对象或另一个浮动对象。float:none|left|right;none：默认值，元素不浮动；left：元素向父对象的左侧浮动；right：元素向父对象的右侧浮动；4.2CSS布局常用属性1．基本浮动定位向左或向右浮动的盒子，不再占用原本在文档中的位置，其后续元素会自动向前填充，若遇到浮动对象边界则停止。示例demo0411.html2．清除浮动属性demo0412.htmlclear:none|left|right|both;none：默认值，允许浮动；left：清除左侧浮动；right：清除右侧浮动；both：清除两侧浮动；4.3CSS的网页布局

网页布局结构，按照列数划分可分为单列、两列和三列布局。多数网站的网页设计采用多种布局结构混合嵌套。4.3.1单列布局示例4-13是常见的单列三块布局。利用<div>标记划分三个盒子；在各自CSS中定义各盒子的大小边界等属性，实现三块居中自适应布局。4.3CSS的网页布局4.3.2两列布局1.传统的两列布局

使用两个盒子，第一个盒子（第一列）列位置应在左侧，第二个盒子（第二列）应在右侧，可fixed或float设定；宽度可用像素值、百分比设定或用相对于字号设置。demo0414.html4.3CSS的网页布局如果左右两个盒子没有设置统一的高度，页面效果存在问题；设置盒子的padding属性，也将影响显示效果示例存在的问题4.3CSS的网页布局2.改进的盒布局使用盒布局，设置左右两个盒子的外层容器的样式box属性，不再使用float属性。为外层的id为container的div元素样式中应用了box属性。在Firefox浏览器中需要写成 display:-moz-box;在Chrome浏览器中需要写成 display:-webkit-box;4.3CSS的网页布局3.嵌套的2列布局顶部固定，一列固定、一列变宽的布局是常见的布局形式。通常，侧边的导航栏宽度固定，而主体的内容栏宽度是可变的。使用CSS3的盒布局实现。盒布局及相关属性可以很好的解决宽度可变布局及布局顺序问题。4.3CSS的网页布局盒布局及相关属性属性功能box-flex设置弹性盒布局box-ordinal-group设置盒元素的显示顺序box-orient设置盒元素的显示方向box-sizing指定使用width、heignt属性时，指定的值是否包括元素的pading值与border值。4.3CSS的网页布局4.3CSS的网页布局4.3.3三列布局传统三列布局可以使用float属性实现使用CSS3实现，重点以下三个属性display:box;box-ordinal-groupbox-flex4.3CSS的网页布局嵌套的三列布局顶部是一个div盒子，中部是并排2个或3个div盒子，下面还有1个div盒子。示例4-184.4应用案例4.4.1用DIV+CSS实现图文混排案例demo0419.html4.4应用案例2.对示例4-19的改进demo0420.html4.4应用案例4.4.2二级导航菜单制作案例DIV+CSS布局中多通过控制列表样式制作导航菜单，主要用到<ul>、<li>、<a>三组标记。1．建立一级菜单2.定义CSS样式3.创建二级菜单4.4应用案例4．横向二级导航菜单小结本章主要内容如下。盒模型。盒模型是CSS控制页面的最基本、最重要的概念之一，读者必须充分理解其概念和属性设置。常用布局属性，主要包括定位属性和浮动属性。通过不同属性值的设置实现对页面各元素的绝对和相对位置及层叠次序的布局，使页面布局灵活美观。页面整体布局。