CSS3设计多列布局案例
本文来自 李东博 《HTML5+CSS3从入门到精通》 清华大学出版社 2015年
摘 要:本文档给出了CSS3设计多列布局相关案例。
关键词: CSS3,多列布局,案例
案例
说明:本案例演示使用 columns 设计多列布局的具体用法。
源代码如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档<title>
<style type="textcss" media="screen">
body {
columns: 250px 3;
}
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 大学读了六个月之后就退学了,但是在十八个月以后——我真正的作出退学决定之
前,我还经常去学校。我为什么要退学呢?<p>
<p>故事从我出生的时候讲起。我的亲生母亲是一个年轻的,没有结婚的大学毕业生。她决定让别
1 / 2
CSS3 设计多列布局案例