Web前端开发案例教程第9章
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
width: 300px; height: 200px; background-color: #E08789; } #two { /*定义第二个盒子的样式*/ width: 300px; height: 200px; background-color: #FF0000; } </style>
此时浏览网页的效果图
此时网页浏览效果如下图所示：
可以看出，块元素设置浮动属性后，会形成文字与块环绕的效果。 若要清除浮动，则需要使用clear属性。
德才兼备 知行合一
12
9.2.1 元素的浮动
清除浮动属性对段落元素的影响，修改CSS样式表代码如下：
<style type="text/css"> #one { /*定义第一个盒子的样式*/
德才兼备 知行合一
11
9.2.1 元素的浮动
若给两个盒子添加浮动属性，修改CSS样式表代码如下：
<style type="text/css"> #one { /*定义第一个盒子的样式*/
width: 300px; height: 200px; background-color: #E08789; } #two { /*定义第二个盒子的样式*/ width: 300px; height: 200px; background-color: #F00; } #one,#two{float:left;} /*设置左浮动*/ </style>
10
9.2.1 元素的浮动
搭建HTML结构如下：
CSS样式表代码如下：
<body>
<div id="one"></div>
<div id="two"></div> <p>这里是段落文字，这里是段落文字， 这里是段落文字，这里是……</p> </body>
<style type="text/css"> #one { /*定义第一个盒子的样式*/
德才兼备 知行合一
6
9.2.1 元素的浮动
所谓元素的浮动是指设置了浮动属性的元素会脱离标准流的控制，移动到指定位置。 在CSS中，通过float属性来设置左浮动或右浮动。其语法格式如下。
选择器{float:left|right|none;}
注意：设为left或right，使浮动的元素可以向左或向右移动，直到它的外边缘碰到父 元素或另一个浮动元素的边框为止。若不设置float属性，则float属性值默认为none，即 不浮动。
width: 300px; height: 200px; background-color: #E08789; } #two { /*定义第二个盒子的样式*/ width: 300px; height: 200px; background-color: #F00; } #one,#two{float:left;} /*设置左浮动*/ p{clear:both;} /*清除浮动的影响*/ </style>
德才兼备 知行合一
7
9.2.1 元素的浮动
例9-1 在网页中定义两个盒子，文件名：9-1.html，代码如下：
<body> <div id="one"></div> <div id="two"></div> </body>
<style type="text/css"> #one { /*定义第一个盒子的样式*/
此时网页浏览效果如下图所示：
德才兼备 知行合一
13
9.2.1 元素的浮动
需要注意的是，clear属性只能清除元素左右两侧浮动的影响，但是在制作网页 时，经常会遇到一些特殊的浮动影响。例如，对子元素设置浮动时，如果不对其父 元素定义高度，则子元素的浮动会对父元素产生影响，下面举例说明。
德才兼备 知行合一
德才兼备 知行合一
8ຫໍສະໝຸດ Baidu
9.2.1 元素的浮动
若给两个盒子添加浮动属性，代码如下：
<style type="text/css"> #one { /*定义第一个盒子的样式*/
width: 300px; height: 200px; background-color: #E08789; } #two { /*定义第二个盒子的样式*/ width: 300px; height: 200px; background-color: #FF0000; } #one,#two{float:left;} </style>
德才兼备 知行合一
3
9.1 案例：学院网站主页布局
根据学院网站主页效果图，对主页的布局进行划分。创建网页，对学院网站的主页 进行布局。布局浏览效果如图所示。
德才兼备 知行合一
4
第9章 HTML5+CSS3布局网页 9.2 知识准备
德才兼备 知行合一
5
9.2.1 元素的浮动
学院网站主页中的块，有的是水平排列，有的竖直排 列。但默认情况下，网页中的块元素会以标准流的方式进 行竖直排列，即将块元素从上到下一一罗列。但在网页实 际排版时，有时需要将块元素进行水平排列，这就需要为 元素设置浮动属性。
14
9.2.1 元素的浮动
例9-3 在网页中定义一个大盒子，在其中包含两个子盒子。文件名：9-3.html，代码如下：
width: 300px; height: 200px; background-color: #E08789; } #two { /*定义第二个盒子的样式*/ width: 300px; height: 200px; background-color: #F00; } </style>
此时网页中的元素按标准流的方式自上而下排列。
添加浮动属性后的网页的效果图
设置浮动属性后，盒子水平排列。浮动元素不再占用原文档流的位置，它会对页面中其他元
素的排版产生影响。
德才兼备 知行合一
9
9.2.1 元素的浮动
例9-2 在网页中定义两个盒子，在盒子下面再显示一段段落文字。文件名：9-2.html。浏览网页时效 果图如下所示。
德才兼备 知行合一
第9章 HTML5+CSS3布局网页
※ 理解元素的浮动属性； ※ 掌握元素的各种定位方法； ※ 掌握常用的HTML5+CSS3布局方式。
德才兼备 知行合一
第9章 HTML5+CSS3布局网页
9.1
案例：学院网站主页布局
9.2
知识准备
9.3
案例实现
德才兼备 知行合一
2
第9章 HTML5+CSS3布局网页 9.1 案例：学院网站主页布局
此时浏览网页的效果图
此时网页浏览效果如下图所示：
可以看出，块元素设置浮动属性后，会形成文字与块环绕的效果。 若要清除浮动，则需要使用clear属性。
德才兼备 知行合一
12
9.2.1 元素的浮动
清除浮动属性对段落元素的影响，修改CSS样式表代码如下：
<style type="text/css"> #one { /*定义第一个盒子的样式*/
德才兼备 知行合一
11
9.2.1 元素的浮动
若给两个盒子添加浮动属性，修改CSS样式表代码如下：
<style type="text/css"> #one { /*定义第一个盒子的样式*/
width: 300px; height: 200px; background-color: #E08789; } #two { /*定义第二个盒子的样式*/ width: 300px; height: 200px; background-color: #F00; } #one,#two{float:left;} /*设置左浮动*/ </style>
10
9.2.1 元素的浮动
搭建HTML结构如下：
CSS样式表代码如下：
<body>
<div id="one"></div>
<div id="two"></div> <p>这里是段落文字，这里是段落文字， 这里是段落文字，这里是……</p> </body>
<style type="text/css"> #one { /*定义第一个盒子的样式*/
德才兼备 知行合一
6
9.2.1 元素的浮动
所谓元素的浮动是指设置了浮动属性的元素会脱离标准流的控制，移动到指定位置。 在CSS中，通过float属性来设置左浮动或右浮动。其语法格式如下。
选择器{float:left|right|none;}
注意：设为left或right，使浮动的元素可以向左或向右移动，直到它的外边缘碰到父 元素或另一个浮动元素的边框为止。若不设置float属性，则float属性值默认为none，即 不浮动。
width: 300px; height: 200px; background-color: #E08789; } #two { /*定义第二个盒子的样式*/ width: 300px; height: 200px; background-color: #F00; } #one,#two{float:left;} /*设置左浮动*/ p{clear:both;} /*清除浮动的影响*/ </style>
德才兼备 知行合一
7
9.2.1 元素的浮动
例9-1 在网页中定义两个盒子，文件名：9-1.html，代码如下：
<body> <div id="one"></div> <div id="two"></div> </body>
<style type="text/css"> #one { /*定义第一个盒子的样式*/
此时网页浏览效果如下图所示：
德才兼备 知行合一
13
9.2.1 元素的浮动
需要注意的是，clear属性只能清除元素左右两侧浮动的影响，但是在制作网页 时，经常会遇到一些特殊的浮动影响。例如，对子元素设置浮动时，如果不对其父 元素定义高度，则子元素的浮动会对父元素产生影响，下面举例说明。
德才兼备 知行合一
德才兼备 知行合一
8ຫໍສະໝຸດ Baidu
9.2.1 元素的浮动
若给两个盒子添加浮动属性，代码如下：
<style type="text/css"> #one { /*定义第一个盒子的样式*/
width: 300px; height: 200px; background-color: #E08789; } #two { /*定义第二个盒子的样式*/ width: 300px; height: 200px; background-color: #FF0000; } #one,#two{float:left;} </style>
德才兼备 知行合一
3
9.1 案例：学院网站主页布局
根据学院网站主页效果图，对主页的布局进行划分。创建网页，对学院网站的主页 进行布局。布局浏览效果如图所示。
德才兼备 知行合一
4
第9章 HTML5+CSS3布局网页 9.2 知识准备
德才兼备 知行合一
5
9.2.1 元素的浮动
学院网站主页中的块，有的是水平排列，有的竖直排 列。但默认情况下，网页中的块元素会以标准流的方式进 行竖直排列，即将块元素从上到下一一罗列。但在网页实 际排版时，有时需要将块元素进行水平排列，这就需要为 元素设置浮动属性。
14
9.2.1 元素的浮动
例9-3 在网页中定义一个大盒子，在其中包含两个子盒子。文件名：9-3.html，代码如下：
width: 300px; height: 200px; background-color: #E08789; } #two { /*定义第二个盒子的样式*/ width: 300px; height: 200px; background-color: #F00; } </style>
此时网页中的元素按标准流的方式自上而下排列。
添加浮动属性后的网页的效果图
设置浮动属性后，盒子水平排列。浮动元素不再占用原文档流的位置，它会对页面中其他元
素的排版产生影响。
德才兼备 知行合一
9
9.2.1 元素的浮动
例9-2 在网页中定义两个盒子，在盒子下面再显示一段段落文字。文件名：9-2.html。浏览网页时效 果图如下所示。
德才兼备 知行合一
第9章 HTML5+CSS3布局网页
※ 理解元素的浮动属性； ※ 掌握元素的各种定位方法； ※ 掌握常用的HTML5+CSS3布局方式。
德才兼备 知行合一
第9章 HTML5+CSS3布局网页
9.1
案例：学院网站主页布局
9.2
知识准备
9.3
案例实现
德才兼备 知行合一
2
第9章 HTML5+CSS3布局网页 9.1 案例：学院网站主页布局