编程笔记 html5cssjs 059 css多列

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

  • 一、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>

小结

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/648702.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

没有可用软件包 mysql-community-server

User [rootecm-a08e ~]# sudo yum install -y mysql-community-server 已加载插件&#xff1a;fastestmirror Loading mirror speeds from cached hostfile base: mirrors.aliyun.comepel: mirror.01link.hkextras: mirrors.ustc.edu.cnupdates: mirrors.ustc.edu.cn 没有可用…

k8s的安全机制

k8s的安全机制。分布式集群管理工具&#xff0c;就是容器编排 安全机制的核心&#xff1a;APIserver作为整个内部通信的中介&#xff0c;也是外部控制的入口&#xff0c;所有的安全机制都是围绕API server来进行设计 请求API资源&#xff1a; 1、认证 2、鉴权 3、准入机制 …

如何使用WinSCP公网远程访问本地CentOS服务器编辑上传文件

文章目录 1. 简介2. 软件下载安装&#xff1a;3. SSH链接服务器4. WinSCP使用公网TCP地址链接本地服务器5. WinSCP使用固定公网TCP地址访问服务器 1. 简介 ​ Winscp是一个支持SSH(Secure SHell)的可视化SCP(Secure Copy)文件传输软件&#xff0c;它的主要功能是在本地与远程计…

大创项目推荐 题目:基于FP-Growth的新闻挖掘算法系统的设计与实现

文章目录 0 前言1 项目背景2 算法架构3 FP-Growth算法原理3.1 FP树3.2 算法过程3.3 算法实现3.3.1 构建FP树 3.4 从FP树中挖掘频繁项集 4 系统设计展示5 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 基于FP-Growth的新闻挖掘算法系统的设计与实现…

Mediasoup Demo-v3笔记(五)——Mediasoup 的启动

Mediasoup是由两部分组成的&#xff0c;一部分是js的控制模块&#xff0c;一部分是c的传输模块&#xff0c;在这里我们用mediasoup demo的代码开始&#xff0c;分析整个进程的启动过程 1、在mediasoup-demo-3的server.js中&#xff0c;调用启动方法 mediasoup-demo-3是一个dem…

Zoomit 安装与使用

Zoomit 安装与使用 1&#xff09;工具介绍 ZoomIt 是一款非常实用的投影演示辅助软件 ZoomIt 是一种在所有 Windows 设备上运行的工作的注释和缩放工具 2&#xff09;下载地址 地址&#xff1a;https://zoomit.en.softonic.com/ 3&#xff09;安装教程 第一步 第二步 …

国外服务器全攻略,国外服务器的特点和优势是什么?

随着互联网的快速发展&#xff0c;越来越多的企业和个人选择将网站、应用程序等部署在国外服务器上。那么&#xff0c;国外服务器有哪些特点和优势呢&#xff1f;本文将对这一问题进行详细探讨。 一、国外服务器的特点 1.全球化的网络连接&#xff1a;国外服务器通常拥有全球化…

ThreeJS官方示例

1 月球绕地球旋转 材质贴图的颜色显示可能和原图看起来不一致&#xff0c;需要设置色彩空间&#xff1a; 线性色彩空间&#xff08;LinearSRGBColorSpace&#xff09;&#xff1a;根据光照强度均匀分布sRGB色彩空间&#xff08;SRGBColorSpace&#xff09;&#xff1a;根据人…

svn和git的本质区别是什么

参考&#xff1a; https://blog.csdn.net/feiying0canglang/article/details/126550676 上边图中&#xff0c;跨越了区的箭头&#xff0c;它中间的区数据都会同步。例如&#xff1a;git checkout &#xff0c;它是将本地仓库数据更新到暂存区和工作区的。\ 理解 gitlab和svn都…

计算机网络的体系结构的各层在整个过程中起到什么作用?

ps&#xff1a;本文章的图片内容来源都是来自于湖科大教书匠的视频&#xff0c;声明&#xff1a;仅供自己复习&#xff0c;里面加上了自己的理解 这里附上视频链接地址&#xff1a;1.6 计算机网络体系结构&#xff08;4&#xff09;—专用术语_哔哩哔哩_bilibili 目录 &#x…

Springboot项目启动报错:Command line is too long问题解决

启动项目报错:Error running ‘xxxxxxxx’: Command line is too long. Shorten command line for ‘xxxxxxxx’ or also for Application default configuration 方法一 点击提示中的&#xff1a;default&#xff1a;然后在弹出窗口中选择&#xff1a;JAR xxxx xxx&#xff0…

DataKit迁移MySQL到openGauss

前言 本文将分享DataKit迁移MySQL到openGauss的项目实战&#xff0c;供广大openGauss爱好者参考。 1. 下载操作系统 https://www.openeuler.org/zh/download https://support.huawei.com/enterprise/zh/doc/EDOC1100332931/1a643956 https://support.huawei.com/enterprise…

mysql优化,and和where的区别

前情提要&#xff1a;and 则是在表连接前过滤A表或B表里面哪些记录符合连接条件&#xff0c;同时会兼顾是left join还是right join。即 假如是左连接的话&#xff0c;如果左边表的某条记录不符合连接条件&#xff0c;那么它不进行连接&#xff0c;但是仍然留在结果集中&#xf…

JOSEF约瑟 静态中间继电器 RZY-600D 110VDC 六常开 导轨安装

RZ-D系列中间继电器 系列型号&#xff1a; RZY-004D中间继电器 RZL-004D中间继电器 RZY-022D中间继电器 RZL-022D中间继电器 RZY-112D中间继电器 RZL-112D中间继电器 RZY-202D中间继电器 RZL-202D中间继电器 RZY-002D中间继电器 RZL-002D中间继电器 RZY-060D中间继电器 RZL-060…

mysql学习打卡day17

今日成果&#xff1a; insert into products (name,quantity_in_stock,unit_price) values(t1,10,1.1),(tom,20,1.23),(t2,11,12.2); -- 一次插入多条数据 -- 字符串和日期需要加引号 -- PK代表主键记录的唯一标识 -- NN表示非空 -- AI表示自动增长 感谢各位读者查阅&#x…

锂电池基础知识

锂电池基础知识 锂电池容量 电池容量用**毫安时&#xff08;mAh&#xff09;**表示&#xff0c;如5200mAh电池&#xff0c;表示电池以5200mA5.2A的电流放电&#xff0c;可持续放电1小时。锂电池上标的电容量是4.2V放电至2.75V所获得的电量。 锂电池节数 锂电池的节数用几S来…

从CNN ,LSTM 到Transformer的综述

前情提要&#xff1a;文本大量参照了以下的博客&#xff0c;本文创作的初衷是为了分享博主自己的学习和理解。对于刚开始接触NLP的同学来说&#xff0c;可以结合唐宇迪老师的B站视频【【NLP精华版教程】强推&#xff01;不愧是的最完整的NLP教程和学习路线图从原理构成开始学&a…

互斥锁/读写锁(Linux)

一、互斥锁 临界资源概念&#xff1a; 不能同时访问的资源&#xff0c;比如写文件&#xff0c;只能由一个线程写&#xff0c;同时写会写乱。 比如外设打印机&#xff0c;打印的时候只能由一个程序使用。 外设基本上都是不能共享的资源。 生活中比如卫生间&#xff0c;同一…

YOLOv8加入AIFI模块,附带项目源码链接

YOLOv8" 是一个新一代的对象检测框架&#xff0c;属于YOLO&#xff08;You Only Look Once&#xff09;系列的最新版本。YOLOv8中提及的AIFI&#xff08;Attention-based Intrascale Feature Interaction&#xff09;模块是一种用于增强对象检测性能的机制&#xff0c;它是…

Windows 上面双网卡网络,配置为优先IPV4

多数网络游戏加速器是不支持IPV6的&#xff0c;即便支持IPV6也不好用&#xff0c;原因是IPV6在大陆并不是普及的状态&#xff0c;很多资源是没有的。 所以本文会教大家怎么让双IP栈的用户&#xff0c;怎么配置优先适用IPV4&#xff0c;并且IPV6也还可以用。 跟着我的步骤来&am…