C SS3设置多列显示样式1案例
本文来自 李东博 《HTML5+CSS3从入门到精通》 清华大学出版社 2015年
摘 要:本文档给出了CSS3设置多列显示样式相关案例。
关键词: CSS3.设计多列显示样式.案例
1 案例1
说明:本案例演示使用 column-width 属性定义列宽的具体用法。
源代码如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档<title>
<style type="textcss" media="screen">
body {
-webkit-column-width:300px;
-moz-column-width:300px;
column-width:300px;
}
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%;
text-indent: 2em;
}
<style>
<title><title>
<head>
<body>
<h1>在斯坦福大学 2005 年毕业典礼上的演讲(选段)<h1>
<h2>史蒂夫 乔布斯<h2>
<p> 我今天很荣幸能和你们一起参加毕业典礼,斯坦福大学是世界上最好的大学之一。我从来没有
从大学中毕业。说实话,今天也许是在我的生命中离大学毕业最近的一天了。今天我想向你们讲述我生
活中的三个故事。不是什么大不了的事情,只是三个故事而已。<p>
<p>第一个故事是关于如何把生命中的点点滴滴串连起来。<p>
<p>我在 Reed 大学读了六个月之后就退学了,但是在十八个月以后——我真正的作出退学决定之
1 / 6
CSS3 设置多列显示样式 1 案例