编程笔记 html5&css&js 059 css多列

简介: 编程笔记 html5&css&js 059 css多列


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>

小结

需要多列的场景好像不多。

相关文章
|
21天前
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
102 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
19天前
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
47 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
22天前
html+js+css实现的建筑方块立体数字时钟源码
html+js+css实现的建筑方块立体数字时钟源码
69 33
|
2月前
一个好看的小时钟html+js+css源码
一个好看的小时钟html+js+css源码
115 24
|
JavaScript 前端开发 Go
从头开始学JavaScript 笔记(一)——基础中的基础
原文:从头开始学JavaScript 笔记(一)——基础中的基础 概要:javascript的组成、 各个组成部分的作用 、 一、javascript的组成   javascript   ECMAScript(核心) DOM(文档对象模型) BOM(浏览器对象模型) 1.
1065 0
|
3月前
|
JavaScript 前端开发
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
47 1
JavaScript中的原型 保姆级文章一文搞懂
|
7月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
135 2
|
3月前
JS+CSS3文章内容背景黑白切换源码
JS+CSS3文章内容背景黑白切换源码是一款基于JS+CSS3制作的简单网页文章文字内容背景颜色黑白切换效果。
32 0
|
7月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
186 4
|
7月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
104 4