青少年编程与数学 01-006 设计网页的外观 20课题、多列布局
CSS3 可以将文本内容设计成像报纸一样的多列布局。
“布局是信息的框架，它决定了内容的呈现方式。”
“Layout is the framework of information, it determines how the content is presented.”
—— 威廉·阿德斯 (William Addles) | 美国平面设计师 | 年代未知
“在网页设计中，布局是王道，它决定了用户的导航和体验。”
“In web design, layout is king, it determines the user’s navigation and experience.”
—— 雅各布·尼尔森 (Jakob Nielsen) | 美国用户体验专家 | 1957 ~ 至今
课题摘要
CSS3 可以将文本内容设计成像报纸一样的多列布局。
课题要求
掌握CSS3多列布局的方法。
一、CSS3 多列属性
下表列出了所有 CSS3 的多列属性：
属性 描述
column-count 指定元素应该被分割的列数。
column-fill 指定如何填充列
column-gap 指定列与列之间的间隙
column-rule 所有 column-rule-* 属性的简写
column-rule-color 指定两列间边框的颜色
column-rule-style 指定两列间边框的样式
column-rule-width 指定两列间边框的厚度
column-span 指定元素要跨越多少列
column-width 指定列的宽度
columns column-width 与 column-count 的简写属性。
二、实例
<!DOCTYPE html>
<html lang = "zh-cn">
<title>CSS多列 编程笔记 html5&css&js</title>
<meta charset = "utf-8"/>
<style>
body {
color: cyan;
background-color: teal;
}
h1 {
text-align: center
}
.newspaper {
margin: auto;
width: 80%;
column-count: 3;
}
</style>
<body>
<h1>多列显示</h1>
<div class = "newspaper">
你来了，什么也没有带来，光着身子、空着手就来了！
你哭了，预感到一个苦难的历程？
当然，你走的时候也是什么都不会带走，甚至是那一副躯壳！
你睁开眼晴，看见了一个陌生的世界，不曾有任何事先的约定，你和你的父母、亲人就这样邂逅了。
你无从抱怨，你来到的是一个什么样的家庭、地域、气候、时代，那都是大自然的随机分配，没机会石头剪子布。
既来之，则安之！
如果你已经长到10岁以上（35岁以下），那本文接下来的内容就是为你准备的。你想活出怎样的人生？可能本文会对你有所帮助。至少作者希望是这样的。
下面这段，先写给家长吧。如果家长不能看到，孩子自己看看也行，都是一个问题，立场不同，结论可以不一样，大家都自己思考吧，我不替别人下结论。
孩子要生了还没生之前，这青年男女有段时间还是很兴奋的，可能孩子出生以后呢，那滋味可不是事先都想到了的。各种问题就来了。
我们这里要探讨的成长管理，当然都是和孩子有关的。那么我们分析这些问题呢，就要从孩子出生以后开始。
如果你的孩子问你：你为什么要生孩子呢？那你如何回答呢？
“我们事先就就知道你这么可爱呀，所有你就来了呀！”。
“就是有一天吧哈，哈哈哈，你长大自然就明白了，我们俩吧，未经得住诱惑，就有了你了！”。
“要说这事吧，主要你得感谢你爷爷奶奶了，都是他们逼的，不然你恐怕还有等几年！”。
“也没有为什么，人都这样，大家都生孩子，也就有了你。”。
“意外，其实就是个意外”。
无论是哪种情况，父母和孩子都是一场邂逅。就是意外的相遇。在孩子没有来到这个世上之前，互相没有打过招呼，也没有事先进行一场谈判。
有的父母抱怨孩子的天赋不够好，立刻就被打脸打回来，现代科学早就证实，孩子的天赋主要是由父母的基因决定的。
有的孩子抱怨自己的家庭条件差，这也只能怪他命不好了。
假设事情可以事先商量的话，这事会怎么样呢？
那孩子肯定要问哪，“你家在几线城市呀？住多大的房子呀？是不是学区房啊？你俩啥学历呀？有多少资产哪？身体健康不？”。
这样的话人类就无法延续了。
虽然孩子事先没有机会问，但你要做父母之前，的确自己要回答一下这些问题，毕竟这生或不生孩子，对于你来说一定程度上是可控的。
很多人生了孩子以后就容易想起“时间都去哪儿了？”。显然，为孩子的付出可能超出了预料。
一旦你做了这个决策并产生了结果，就是这里要说的“当你生了孩子”，那你可不能反悔呀！
结论是，你不能“让世界充满爱”，但你必须“让家庭充满爱”。父母必须无条地爱自己的孩子，“无论他是出色还是平庸，无论他是漂亮还是丑陋，无论他是健康还是病患，无论他是温柔还是暴躁”。
就有人偏偏不是这样的，很多事例，这里就不说了。
转身再次面向孩子，我很无耐，人生之不如意十之八九，不可能每一个孩子都那么幸运，总是有的孩子家境没有那么富裕、知性、幸福；没有尽如人意的健康、聪慧、漂亮。
“成长管理”是为人父母的职责。对于孩子，如果能够尽早地实现“自我管理”，那就更好了。
</div>
</body>
</html>
需要多列的场景好像不多。
课题作业
- 完成文档中的代码练习。
- 是不是可以完成杂志文章排版了？试一试吧。
附录一、人物介绍：瑞安·达尔
瑞安·达尔（Ryan Dahl）是Node.js的创始人。他并非传统意义上的计算机科学专业出身，而是在2004年于纽约罗彻斯特大学攻读数学博士。2006年，他退学并移居到智利的瓦尔帕莱索小镇。在那里，达尔开始接触网站开发，并逐渐走上了编程之路。他的生活方式转变为接项目并到客户的地方工作。
达尔在成为高性能Web服务器专家的过程中，遇到了主流服务器的瓶颈问题，并尝试自行解决这些问题。2008年，Google的Chrome V8引擎发布，JavaScript脚本语言的执行效率因此得到显著提升，这激发了达尔的灵感。2009年2月，他基于新的想法提交了Node.js项目的第一行代码，并于同年5月正式向外界宣布这个项目。2009年底，在柏林举行的JSConf EU会议上，达尔发表了关于Node.js的演讲，这标志着Node.js开始流行于世。
2010年，达尔加入了Joyent公司，全职负责Node.js项目的开发，此时Node.js已经从个人项目转变为公司组织下的项目。Node.js是一个能够在服务器端运行JavaScript的开放源代码、跨平台的JavaScript运行环境。它采用Google开发的V8引擎运行JS代码，并使用事件驱动、非阻塞和异步I/O模型等技术来提高性能。Node.js的设计理念是希望像节点一样通过不断接入新的节点来无限扩充功能，使其越来越完善、越来越强大。
达尔在2012年1月离开了Node.js项目，但Node.js继续由社区和其他贡献者维护和发展。Node.js已经被IBM、Microsoft、Yahoo!、Walmart、Groupon、SAP、LinkedIn、Rakuten、PayPal、Voxer和GoDaddy等公司采用。达尔的创新和贡献对JavaScript在服务器端的应用产生了深远的影响。
本单元结束。
