CSS3设置多列显示样式2案例.pdf
版权申诉
40 浏览量
2022-07-10
11:27:57
上传
评论
收藏 472KB PDF 举报
C SS3设置多列显示样式2案例
本文来自 李东博 《HTML5+CSS3从入门到精通》 清华大学出版社 2015年
摘 要：本文档给出了CSS3设置多列显示样式相关案例。
关键词： CSS3.多列显示样式.案例
1 案例1
说明：本案例演示使用column-rule属性定义每列之间边框宽度、样式和颜色的具体用法。
源代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档<title>
<style type="textcss" media="screen">
body {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-gap: 3em;
-moz-column-gap: 3em;
column-gap: 3em;
line-height: 2.5em;
-webkit-column-rule: dashed 2px gray;
-moz-column-rule: dashed 2px gray;
column-rule: dashed 2px gray;
}
h1 {
color: #333333;
padding: 5px 8px;
font-size: 20px;
text-align: center;
padding: 12px;
}
h2 {
font-size: 16px;
text-align: center;
}
p {
color: #333333;
font-size: 14px;
line-height: 180%;
1 / 6
CSS3 设置多列显示样式 2 案例
资源评论
