




全文预览已结束
VIP免费下载
版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
学IT技能上我学院网CSS3 Columns 分列式布局详解CSS里一直有一个让我们头疼的问题,就是创建布局很麻烦。当然,有很多方式,有很多技术都可以创建各种布局,但我们总觉得CSS里应该提供一些新属性,让我们能更好的管理布局。幸运的是,CSS3里提供了一批新的创建列式布局的column属性,有了这些属性,我们不需要再使用float,clear,margin等属性进行调控,避免了很多麻烦。CSS代码CSS3里的column系列属性提供了各种不同的功能,通过组合使用它们,你能得到相应的任何分栏式布局:l column-count: 列数目l column-gap: 各列之间间隙宽度l column-width: 建议宽度;未必会使用,浏览器基于此数值进行计算l column-rule-width:列之间分割线宽度l column-rule-style:列之间分割线风格l column-rule-color:列之间分割线演示l column-span: 允许一个元素的宽度跨越多列l column-fill: 分列方式要想制作出一个漂亮的分列布局,你至少需要用到column-count和column-gap:/* 3 列,每列之间10px间距 */ul.col-3 column-count: 3;column-gap: 10px;如果你想美化一下列之间的空隙,这也很简单:/* 3 列,每列之间10px间距 ,带有金色的隔离线 */ul.col-3 column-count: 3;column-gap: 10px;column-rule: 1px solid #fc0;指定的元素还可以横跨多列:/* 以下面的HTML为例:表头!列 1列 2列 3列 4列 5列 6列 7列 8列 9列 10列 11列 12 */div.col-3 column-count: 3;column-gap: 5px;div.col-3 h2 column-span: all;text-align:center;background: #eee;非常的简单,而且显示结果完全符合我们的预期!使用CSS3的columns制作页面布局有很多优势:你不需要计算宽
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 眼科护理品管圈提升实践
- EAU前列腺癌指南更新解读2025
- 智慧港口AI大模型顶层设计方案
- 中央空调系统操作员专业知识考试题库(含各题型)
- 传输网络技术李世银习题答案
- 销售统计试题及答案
- 河南省南阳市六校联考2024-2025学年高一下学期第二次联考英语试题含答案
- 2025年山西省吕梁市部分学校中考模拟语文试题(含答案)
- 历史●全国甲卷丨2024年普通高等学校招生全国统一考试历史试卷及答案
- 2025设备租赁合同书范本(合同版本)
- (正式版)SHT 3551-2024 石油化工仪表工程施工及验收规范
- JTGT H21-2011 公路桥梁技术状况评定标准
- 汽车式起重机检修保养记录表
- 国家开放大学《Python语言基础》形考任务4参考答案
- 第六单元测试卷B卷高中语文单元测试AB卷()(高教·基础模块下册)
- 灭火器材的选用和配置要求
- 酒店新业态(酒店业发展趋势)课件
- 高山陡坡地区输电线路建设关键技术
- 纹眉市场分析报告
- 公共服务满意度指数调查
- 建设有特色的学校课程体系课件
评论
0/150
提交评论