8 css3布局样式.ppt
《8 css3布局样式.ppt》由会员分享,可在线阅读,更多相关《8 css3布局样式.ppt(13页珍藏版)》请在得力文库 - 分享文档赚钱的网站上搜索。
1、CSS3布局样式Html5与css3学习内容掌握多栏布局的使用方法,为什么要使用多栏布局,多栏布局解决的问题。掌握盒布局的使用方法,为什么使用盒布局,盒布局解决的问题,与多栏布局的区别。掌握弹性布局的概念和使用方法课题目录多栏布局盒布局多栏布局1、float和position的缺点讨论总结float和position的缺点。复习一下页面清除浮动的方法。多栏布局2、使用多栏布局方式1)column-count:number 将一个元素中的内容分为多栏显示;2)column-width:number 设置每一栏的宽度;3)column-gap:number 每栏之间的间隔;4)column-rul
2、e:border 每栏之间插入一条线。报纸排版课题目录多栏布局盒布局盒布局1、基础知识1)float和position的缺点2)使用盒布局语法:display:-webkit-box|-moz-box总结多栏布局和盒布局的区别盒布局2、弹性盒布局1)自适应窗口的弹性布局2)使用弹性盒布局语法:-webkit-box-flex|-moz-box-flex:1;1的意义?什么是自适应,自适应的运用。float和position的实现方法。盒布局2、弹性盒布局3)改变元素的显示顺序4)元素排列方向语法:box-orient:vertical|horizontal语法:box-ordinal-grou
3、p:number;改变显示序号观察规律。盒布局2、弹性盒布局5)对多个元素使用box-flex语法:box-flex:number;理解number值的意思。画出box-flex的分配原理图。盒布局2、弹性盒布局6)水平方向与垂直方向的对齐方式语法:-moz-box-pack -webkit-pack或 -moz-box-align -webkit-align实验找出各个方向每种对齐方式的区别对齐方式:start|center|end盒布局2、弹性盒布局解决的问题:1)文字垂直居中说说css2的实现方式2)图片居中显示说说css2的实现方式作业:找一个以前CSS2的网站用盒布局或多栏布局来实现。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- css3布局样式 css3 布局 样式
限制150内