网页设计与制作教程Web前端开发（第7版）课件：CSS3的盒模型-CSS3多列属性_第1页
网页设计与制作教程Web前端开发（第7版）课件：CSS3的盒模型-CSS3多列属性_第2页
网页设计与制作教程Web前端开发（第7版）课件：CSS3的盒模型-CSS3多列属性_第3页
网页设计与制作教程Web前端开发（第7版）课件：CSS3的盒模型-CSS3多列属性_第4页
网页设计与制作教程Web前端开发（第7版）课件：CSS3的盒模型-CSS3多列属性_第5页
已阅读5页，还剩12页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

CSS3的多列属性可以将文本内容设计成像报纸一样的多列布局。

CSS3的盒模型CSS3多列属性目录

CSS的盒模型6.1CSS盒模型的组成和大小6.2CSS盒模型的属性6.3CSS布局属性6.4CSS盒子定位属性 6.5CSS3多列属性6.6CSS基本布局样式 6.7实训——制作社区网网页6.8练习6.5CSS3多列属性6.5.1列数属性column-count语法：column-count:<integer>|auto示例：<styletype="text/css">.newspaper{column-count:3;}</style><body><divclass="newspaper">

文字…</div></body>6.5CSS3多列属性6.5.2列宽属性column-width语法：column-width:

<length>|auto示例：.newspaper{column-width:100px;column-count:3;column-gap:40px;column-rule-style:outset;column-rule-width:1px;}6.5CSS3多列属性6.5.3列宽属性column语法：columns:

[column-width]|[column-count]示例：.newspaper{columns:100px3;}6.5CSS3多列属性6.5.4列之间的间隔属性olumn-gap语法：column-gap:<length>|normal示例：.newspaper{column-count:3;column-gap:40px;}6.5CSS3多列属性6.5.5是否横跨所有列属性column-span语法：column-span:

none|all示例：.newspaper{column-count:3;}h2{column-span:all;}6.5CSS3多列属性6.5.6列间隔样式属性column-rule-style语法：column-rule-style:

none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset示例：.newspaper{column-count:3;column-gap:40px;column-rule-style:dotted;}6.5CSS3多列属性6.5.7列之间间隔颜色属性column-rule-color语法：column-rule-color:<color>.newspaper{column-count:3;column-gap:40px;column-rule-style:outset;column-rule-color:#ff0000;}6.5CSS3多列属性6.5.8列之间宽度属性column-rule-width语法：column-rule-width:<length>|thin|medium|thick示例：.newspaper{column-count:3;column-gap:40px;column-rule-style:outset;column-rule-width:1px;}6.5CSS3多列属性6.5.9列之间间隔所有属性column-rule语法：column-rule:

[column-rule-width]|[column-rule-style]|[column-rule-color]示例：.newspaper{column-count:3;column-gap:40px;column-rule:4pxoutset#ff00ff;}6.5CSS3多列属性【例6-24】多列属性示例，本例文件6-24.html在浏览器中的显示效果，如图6-34所示。6.5CSS3多列属性<!DOCTYPEhtml><html> <head> <metacharset="utf-8"> <title>多列属性</title> <styletype="text/css"> .newspaper1{ column-count:4; column-width:auto; column-rule-style:dashed; column-rule-width:thick; column-rule-color:green; } .newspaper2{ column-count:5; column-width:auto; column-rule-style:none; column-gap:10px; } .h3_span{6.5CSS3多列属性 .h3_span{ column-span:all; } p{ text-indent:2em; margin:0px;/*p标签段落距离设置为0px*/ } </style> </head>6.5CSS3多列属性

<body> <divclass="newspaper1"> <h3>古埃及文明</h3> <p>大约两万年前，埃及出现了旧石器时代的原始人类，住在现撒哈拉大沙漠和阿拉伯沙漠地区。</p> <p>约从公元前4500年（至今6500年），埃及进入新石器时代或铜石并用时代。根据考古材料，埃及铜石并用文化的典型代表是巴达里文化（约公元前4500—前4000年），涅加达文化Ⅰ（约公元前4000—前3500年）和涅加达文化Ⅱ（约公元前3500—前3100年）。习惯上把这三种文化称为前王朝文化。</p> <p>公元前2480年（距今4500年）的古埃及，是胡夫王的统治初期。与每个法老一样，上任伊始他就准备建造百年后的坟墓。于是，在每个夏天，皇室成员走遍尼罗河流域，从每个村落中选择身强体健的男子，作为建造大金字塔的劳力，为君王服务。他们被分成10万人的大群来工作，每一大群人要劳动3个月。这些劳动者中有奴隶，也有许多普通的农民和手工业者。古埃及奴隶是借助畜力和滚木，把巨石运到建筑地点的，他们又将场地四周天然的沙土堆成斜面，把巨石沿着斜面拉上金字塔。就这样，堆一层坡，砌一层石，逐渐加高金字塔。建造胡夫金字塔花了整整20年的时间。</p> </div> <hr/>

6.5CSS3多列属性 <divclass="newspaper2"> <h3class="h3_span">几何之父——欧几里得</h3> <p>我们现在学习的几何学，就是由古希腊数学家欧几里得（公元前330—前275年，此时是中国的战国时期）创立的。他在公元前300年编写的《几何原本》，2300多年来都被看作学习几何的标准课本，所以称欧几里得为几何之父。</p> <p>在公元前337年，马其顿国王菲力二世用武力征服了希腊各城邦。次年亚历山大即位，在很短的时间内，他继承父业，开创了一个横跨欧、亚、非三大陆的马其顿王国。在地中海沿岸的尼罗河三角洲上，亚历山大建立了以他名字命名的城市——亚历山大城，并把它作为这个庞大帝国的文化、商业和工业中心，同时也是科学思想的中心。这儿有称誉世界，拥有70万卷藏书的图书馆，还有博物馆、天文台和闻名天下的博学园，成为当时欧洲乃至世界数学的中心。欧几里得就是被亚历山大的后继者——托勒密一世重金聘请到博学园的教师。</p> <p>古希腊的数学研究有着十分悠久的历史，曾经出版过一些几何学著作，但都是讨论某一方面的问题，内容不够系统。欧几里得汇集了前人的成果，采用前所未有的独特编写方式，先提出定义、公理、公设，然后由简到繁地证明了一系列定理，讨论了平面图形和立体图形，还讨论了整数、分数、比例等，终于完成了《几何原本》这部巨著，此书至今还是几何学的权威著作。在欧美国家，《几何原本》是学习数学必读的原著之一。在编写此书时，他一开始就推出一系列令人钦佩的简要而精致的公理和公式。然后他将定理一一排列，其逻辑性非常强，几乎无须改进。</p> <p>后来的哥白尼、开普勒、伽利略、牛顿这些卓越的科学人物，统统都接受了欧几里得的传统。他们都认真地学习过欧几里得的《几何原本》，并使之成为他们数学知识的基础。

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论