当前位置:首页 >> 电脑基础知识 >>

css-盒模型-布局练习

《前端开发基础》



学号:

姓名:

业:



验 名 CSS 样式





验 掌握 CSS 各种选择器的用法;熟练使用 CSS 样式进行格式设计;使用 DIV+CSS 实 目 现页面布局;



CSS3 盒模型相关属性练习

掌握普通文档流、浮动与清除属性的含义

1、思考: 什么是标准文档流? 盒子属性有哪些 ?各包含哪些属性? float 属性的应用场合?有哪些取值? clear 属性的应用场合?有哪些取值?
2、定位:
语法:position:static|absolute|fixed|relative

3、浮动:
知 语法:float:none|left|right 识 4、清除浮动 提 方法一:使用带 clear 属性的空元素 示 优点:简单,代码少,浏览器兼容性好。
缺点:需要添加大量无语义的 html 元素,代码不够优雅,后期不容易维护。

方法二:使用 CSS 的 overflow 属性 方法三:给浮动的元素的容器添加浮动 影响布局,不推荐使用。 方法四:使用邻接元素处理 方法五:使用 CSS 的:after 伪元素
总结: 清除浮动的方法可以分成两类: 一是利用 clear 属性,包括在浮动元素末尾添加一个带有 clear: both 属性的空 div 来闭合元素,其实利用 :after 伪元素的方法也是在元素末尾添加一个内容为一个 点并带有 clear: both 属性的元素实现的。 二是触发浮动元素父元素,使到该父元素可以包含浮动元素。

5、盒模型:

DQ

03-13

《前端开发基础》

布局练习 1:左右两列,左侧固定宽度 200px,右侧自适应占满,效果如下图。
实 验 内 布局练习 2:左中右三列,左右个 200px 固定,中间自适应占满。 容
小提示:实现过程中可能出现的错误效果

DQ

03-13

《前端开发基础》
布局练习 3:上中下三行,头部 200px 高,底部 200px 高,中间自适应占满
布局练习 4:上下两部分,底下这个固定高度 200px,如果上面的内容少,那么这个 footer 就固定在底部,如果内容多,就把 footer 往下挤。
操作提示:在第一个 div 里加入 100 个 br 标签看效果。 技能提示:把 footer 固定在底部,把 foorter 往下挤着走都比较容易实现,但是合到一 起,必要的设置就是 html 要有高度,body 要有最小高度,footer 依照 body 进行绝对定 位。 布局练习 5:分析校园网页面 ,用 CSS+DIV 进行布局。(只实现布局,不做内容)

DQ

03-13

《前端开发基础》

参考效果图:

实例练习:

利用盒模型原理,再次布局以下页面

素材

无修饰页面

效果图

DQ

03-13

《前端开发基础》
202*300 实 验 总 结 教 师 评 阅

DQ

03-13


相关文章:
实训四:CSS盒模型练习.doc
实训四:CSS盒模型练习 - 实训四:盒子模型练习三 实训目的: ? 1. 深刻理解盒子模型的的概念; ? 2. 掌握孤立盒子的内部结构; ? 3. 掌握理解多个盒子的相互...
XHTML + CSS 布局的核心---盒模型.doc
XHTML + CSS 布局的核心---盒模型_其它语言学习_外语学习_教育专区。XHTML + CSS 布局的核心 盒模型 布局的核心---盒模型盒模型 ,是 XHTML + CSS 布局 ...
运用盒模型网页布局_图文.ppt
运用盒模型网页布局 - 网页设计与制作(HTML+CSS+Javascript) 运用盒模型网页布局 网页设计与制作课程组 目标 TARGET 知识目标 ? 掌握盒子模型的原理; ? 掌...
掌握盒模型轻松DIV css网页布局.doc
掌握盒模型轻松DIV css网页布局 - 掌握盒模型轻松 DIV css 网页布局 若是想谙练把握 DIV 和 CSS 的结构体例,首先要对盒模子有足够的体味。每个 HTML 元素 都 ...
css样式之盒布局_图文.ppt
练习: 3、两栏布局 #div1{ width:800px ; margin:0px auto; column-...三、弹性盒布局 Flex是Flexible Box的缩写,意为"弹性布局",用来为模型提供...
盒子模型及布局.ppt
Web前端开发 河南省骨干教师培训 第一部分 CSS入门 第二部分 盒子模型布局 ?...8 阶段练习 Web前端开发 河南省骨干教师培训 8 阶段练习 Web前端开发 河南省...
CSS盒子模型(2h)讲解_图文.ppt
第2章 CSS盒子模型 2.1 “盒子”与“模型”的...元素构成的盒子按照这种标 准的方式排列布局,这种...代码见文件夹:css1 课下练习: 文档贡献者 亚娴汐...
CSS盒子模型教程_图文.ppt
CSS盒子模型教程 - CSS盒子模型教程--网页制作... 第四讲: 第四讲: DIV+CSS布局 布局--DIV+CSS布局--CSS盒子模型 CSS盒子模型 1 “盒子模型”的概念 盒子模型...
第6章盒模型与布局样式_图文.ppt
第6章盒模型布局样式 - 第六章盒模型布局样式 ? ? ? ? ? ? ? ? ? 6.1元素区域与背景样式 6.2块级元素的盒模型 6.3块级元素的边框 6.4块级元素...
任务6 运用盒模型网页布局.doc
任务6 运用盒模型网页布局_计算机软件及应用_IT/计算机_专业资料。《网页设计与...实践练习 课堂 总结 (1)CSS3 新增属性 (2)元素的类型与转换方法 教师讲解 多...
CSS(盒子模型)_图文.ppt
盒子模型CSS的基石之一,它指定元素如何显 示以及(在某种程度上)如何相互交互...电子信息学院 吴克文 浮动(float)浮动模型是在布局中用到的最重要的概念之一 ,...
KC003050000006单元设计-任务6运用盒模型网页布局.精品....doc
KC003050000006单元设计-任务6运用盒模型网页布局.精品资料_计算机软件及应用_IT/...法 多媒体 教师:辅导交流 学生:实践练习 知识 讲解 CSS3 新增属性:阴影效果 ...
CSS盒子模型与浮动讲解_图文.ppt
CSS盒子模型与浮动讲解 - CSS盒子模型与定位 主讲教师:李勤实 数字媒体技术系 主要内容 知识回顾 CSS盒子模型 CSS网页布局与定位 总结 1 2 3 4 知识回顾 1 什...
彻底弄懂CSS盒子模式(DIV布局快速入门).doc
盒子模式(DIV 布局快速入门 布局快速入门) 彻底弄懂 CSS 盒子模式 2007-03-19...理解 CSS 盒子模型什么是 CSS 的盒子模式呢?为什么叫它是盒子?先说说我们在...
KC003050000006单元设计_任务6运用盒模型网页布局..doc
KC003050000006单元设计_任务6运用盒模型网页布局._其它_职业教育_教育专区。KC...实践练习 课堂 总结 (1)CSS3 新增属性 (2)元素的类型与转换方法 教师讲解 多...
CSS盒模型详解.pdf
CSS盒模型详解 - 千锋教育 www.qfedu.com 精品课程 全程面授 CSS 盒模型详解 CSS 层叠 我们知道文档中的一个元素可能同时被多个 css 选择器选中,...
深入理解CSS盒子模型.doc
深入理解CSS盒子模型 - 深入理解 CSS 盒子模型 核心提示:前阵子在做一个项目时,在页面布局方面遇到了一点小问题,于是上 stackoverflow 上求助。ifaou 在帮助我...
CSS盒子模式(DIV布局精华).doc
CSS 盒子模式(DIV 布局快速入门) 前言如果你想尝试一下不用表格来排版网页,...理解 CSS 盒子模型什么是 CSS 的盒子模式呢?为什么叫它是盒子?先说说我们在...
网页设计与制作案例教程(HTML5+CSS3) 第9章 盒子模型_图文.ppt
网页设计与制作案例教程(HTML5+CSS3) 第9章 盒子模型_计算机软件及应用_IT/计算机_专业资料。第9章 盒子模型 9.1 基础项目:根据布局图创建简单的盒模型页面 ...
第5章 Div+CSS布局方法_图文.ppt
第5章 Div+CSS布局方法 - 网页设计与制作教程 (HTML+CSS+JavaScript) 第5章 Div+CSS布局方法 5.1 Div布局理念 5.2 CSS盒模型 5.3 C...