《《Web前端设计案例教程》 第7章 CSS3浮动与布局教学课件.pptx》由会员分享，可在线阅读，更多相关《《Web前端设计案例教程》 第7章 CSS3浮动与布局教学课件.pptx（29页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、Web前端设计案例教程 第第7 7章章 CSS3CSS3浮动与布局浮动与布局Web前端设计案例教程 CSS3浮动与布局-学习目标学习目标Web前端设计案例教程使用弹性布局技术实现如图7-1所示的典型网页布局。1）顶部是主菜单，通过边距设置菜单项之间的间隔。2）左侧是侧边菜单，菜单项具有一致的宽度。3）鼠标悬停于菜单项时菜单项背景色变化。CSS3浮动与布局7.1 设计网站首页布局项目需求Web前端设计案例教程浮动能够使元素框脱离普通流，向左或向右移动，直到元素框外边缘碰到包含框或另一个浮动框的边框为止。与定位流一样，浮动流中元素框脱离了普通文档流，在普通文档流中不占有位置，所以在普通文档流中浮动
2、元素会堆叠到其他元素上面。CSS3浮动与布局7.2 CSS3浮动7.2.1浮动原理元素右浮动示例a)浮动后元素堆叠b)浮动后元素一行显示c)简单浮动d)浮动后元素卡顿Web前端设计案例教程浮动的特点：l元素浮动后会脱离普通流，漏掉元素原来占有的位置。l浮动可以使块级元素一行显示，呈现出一种特殊的显示效果，因此浮动也经常用于网页的布局设计。l浮动框高度不同会出现元素卡顿现象。CSS3浮动与布局7.2 CSS3浮动7.2.1浮动原理7.2.2浮动定义CSS使用float属性定义元素的浮动。Web前端设计案例教程 CSS3浮动与布局-7.2 CSS3浮动【例7-1】用浮动设计文档格式，实现文字环绕图
3、像的效果。img/*设置图像左浮动*/float:left;/*设置图像右边距为10px*/margin-right:10px;/*设置图像大小*/width:175px;height:116px;中华人民共和国国旗是五星红旗Web前端设计案例教程 CSS3浮动与布局-7.2 CSS3浮动【例7-2】修改例7-1，为图像增加标题和边框。img/*设置图像大小*/width:175px;height:116px;div/*设置元素左浮动*/float:left;width:175px;/*设置元素上右下左外边距分别为5px 12px 0 0*/margin:5px 12px 0 0;/*设置元素
4、内边距为10px*/padding:10px;/*设置元素边框宽度为1px,点线,黑色*/border:1px dashed black;/*设置文本居中对齐,字号为16px*/text-align:center;font-size:16px;五星红旗中华人民共和国国旗是五星红旗Web前端设计案例教程 CSS3浮动与布局-7.2 CSS3浮动【例7-3】用浮动设计文档格式，实现文字浮动的效果。span/*设置元素左浮动*/float:left;/*设置元素宽度,字号,字体(含备选字体),行高,颜色*/width:1.3em;font-size:400%;font-family:algerian
5、,courier;line-height:83%;color:#FF0000;中华人民共和国国旗是五星红旗Web前端设计案例教程 CSS3浮动与布局7.3 浮动布局与清除浮动7.3.1浮动布局【例7-4】用浮动设计网页菜单，显示效果如图7-7所示。ul/*设置元素宽度与内外边距*/width:100%;padding:0;margin:10px;/*去掉列表默认样式,不显示项目符号*/list-style-type:none;a/*去掉超链接默认样式,不显示下划线*/text-decoration:none;/*设置元素前景色*/color:white;浮动使元素紧密地排列在一起的特点使得浮动
6、后元素能够显示在一行，因此，经常用浮动将分区元素显示在一行进行页面排版。li/*设置元素左浮动*/float:left;/*设置元素背景色与对齐方式*/background-color:purple;text-align:center;/*设置元素宽度、内边距与边框样式*/width:150px;padding:0.2em 0.6em;border-right:1px solid white;Web前端设计案例教程 CSS3浮动与布局7.3 浮动布局与清除浮动个人及家庭产品商用产品及方案服务支持合作伙伴与开发者关于华为Web前端设计案例教程 CSS3浮动与布局7.3 浮动布局与清除浮动【例7-
7、5】将例4-2元素进行浮动，实现三行两列布局。.top/*设置元素高度为60px,宽度默认100%*/height:60px;/*设置元素背景色,上下外边距为0,水平居中*/background-color:pink;margin:0 auto;.main/*设置元素高度为300px,宽度默认100%*/height:300px;margin:0 auto;.left/*设置元素高度为300px,宽度为25%*/height:300px;width:25%;background-color:orange;/*设置元素左浮动*/float:left;.right/*设置元素高度为300px,宽度
8、为72%，与左边元素间隔3%宽度*/height:300px;width:72%;background-color:orange;/*设置元素右浮动*/float:right;.footer/*设置元素高度为60px,宽度默认100%*/height:60px;/*设置元素背景色,上下外边距为0,水平居中*/background-color:darkcyan;margin:0 auto;Web前端设计案例教程 CSS3浮动与布局7.3 浮动布局与清除浮动topleftrightfooterWeb前端设计案例教程 CSS3浮动与布局7.3 浮动布局与清除浮动【例7-6】修改例7-5，为其增加横幅
9、广告位置和版心设计。headbannerleftrightfootWeb前端设计案例教程 CSS3浮动与布局7.3 浮动布局与清除浮动.top/*设置元素高度为50px,宽度默认100%*/height:50px;background-color:pink;margin:auto;.top-inner/*设置元素高度为50px,宽度为版心宽度340px*/width:340px;height:50px;margin:0 auto;.banner/*设置元素高度为60px,宽度为版心宽度340px*/width:340px;height:60px;background-color:greenye
10、llow;margin:auto;.main/*设置元素高度为300px,宽度为版心宽度340px*/width:340px;height:300px;background-color:skyblue;margin:auto;.left/*设置元素高度与父级高度一样300px,宽度100px*/width:100px;height:300px;background-color:orange;/*设置元素左浮动*/float:left;.right/*设置元素高度与父级高度一样300px,宽度235px，与左元素留5px间距*/width:235px;height:300px;backgroun
11、d-color:orange;/*设置元素右浮动*/float:right;.footer/*设置元素高度为50px,宽度为100%*/height:50px;background-color:darkcyan;margin:auto;Web前端设计案例教程 CSS3浮动与布局7.3 浮动布局与清除浮动7.3.2隔墙法清除浮动为浮动元素父级设置合适的高度是一种有效的清除浮动的方法，这种方法就好像为浮动元素打了一堵墙，将浮动和后续元素分别分隔在墙内与墙外，互不干扰，所以也称为隔墙法清除浮动。a)父级不设置高度 b)父级高度小于浮动元素高度 c)父级高度大于浮动元素高度Web前端设计案例教程 CS
12、S3浮动与布局7.3 浮动布局与清除浮动7.3.3 clear属性清除浮动clear属性专门用于清除浮动对其他元素的影响。1 相邻元素清除浮动【例7-7】修改例7-5，清除页脚元素左侧浮动，消除浮动对页脚元素位置的影响。为浮动后续元素设置不允许元素左侧浮动可以清除浮动对后续元素排列的影响。去掉例7-5浮动父级main盒子元素的高度，在页脚盒子增加清除左浮动的代码，修改后代码如下。.main margin:auto;.footer/*清除元素左侧浮动*/clear:left;height:60px;background-color:darkcyan;margin:0 auto;Web前端设计案例
13、教程 CSS3浮动与布局7.3 浮动布局与清除浮动7.3.3 clear属性清除浮动2 额外元素清除法【例7-8】修改例7-7，通过增加额外元素清除浮动对后续页脚元素的影响。增加额外的元素专门用于清除浮动对相邻元素的影响。1）在例7-7浮动元素父级main盒子后面增加一个专门用于清除浮动的元素，代码如下。2）为专门用于清除浮动影响的元素添加样式代码如下。.clearfix/*清除元素两侧浮动*/clear:both;3）去掉页脚盒子清除浮动的代码，修改后样式代码如下。.footer height:60px;background-color:darkcyan;Web前端设计案例教程 CSS3浮动
14、与布局7.3 浮动布局与清除浮动7.3.3 clear属性清除浮动3 伪元素清除浮动【例7-9】修改例7-8，用伪元素清除浮动对相邻的影响。用伪元素清除浮动对相邻元素的影响。1）去掉页面中专门用于清除浮动的元素clearfix及其样式代码。2）增加清除浮动代码如下。/*伪元素*/.main:after/*清除元素两侧浮动*/content:;clear:both;display:block;Web前端设计案例教程 CSS3浮动与布局7.4 Flex弹性布局7.4.1 Flex布局概述Flex是弹性布局为框模型提供最大的灵活性，任何一个容器都可以指定为Flex布局。定义语法如下。display:
15、flex;或 display:inline-flex;（针对行内元素）使用Flex布局的元素称为Flex容器（flex container），简称“容器”。其所有子元素自动成为容器成员，称为Flex项目（flex item），简称“项目”。设置Flex布局以后，子元素的float、clear和vertical-align属性都不再有效。容器默认有两根轴：水平主轴（main axis）和垂直交叉轴（cross axis）。Web前端设计案例教程 CSS3浮动与布局7.4 Flex弹性布局7.4.2容器属性Web前端设计案例教程 CSS3浮动与布局7.4 Flex弹性布局7.4.2容器属性Web前
16、端设计案例教程 CSS3浮动与布局7.4 Flex弹性布局7.4.3项目属性Web前端设计案例教程 CSS3浮动与布局7.4 Flex弹性布局7.4.3项目属性Web前端设计案例教程 CSS3浮动与布局7.4 Flex弹性布局【例7-10】用弹性布局将容器宽度均等分为三份。#main/*设置元素大小,外边距*/margin:auto;width:80%;height:100px;/*设置元素边框宽度为1px,黑色实线*/border:1px solid black;/*设置元素弹性布局显示*/display:flex;#main div/*设置弹性布局项目缩放比例*/flex:1;红色div蓝
17、色div绿色divWeb前端设计案例教程 CSS3浮动与布局7.4 Flex弹性布局【例7-11】用弹性布局修改用户注册界面设计。.form-row/*设置元素大小与内、外边距*/width:80%;padding:10px,0;margin:auto;margin-top:5px;/*设置元素弹性布局显示*/display:flex;margin:auto;margin-top:5px;.form-row label/*将元素转换为行内块元素*/display:inline-block;/*设置元素宽度60px,右内边距10px*/padding-right:10px;width:60px;.form-row input/*设置弹性布局项目缩放比例*/flex:1;用户名密码Web前端设计案例教程1）将行内元素转换为块级元素可以设置宽度，使菜单项具有一致的宽度，显示更为美观。2）使用弹性布局能够让元素占满剩余空间宽度。3）使用伪类加样式设计实现鼠标悬停效果。CSS3浮动与布局7.5 项目实施技术分析Web前端设计案例教程 CSS3浮动与布局本章小结本章小结感 谢！