HTML5系列代码：列与列之间的分隔线

153 阅读 0 评论 101 点赞

我是靠谱客的博主悦耳鱼，最近开发中收集的这篇文章主要介绍HTML5系列代码：列与列之间的分隔线，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

column-rule 属性
column-rule属性是一个速记属性设置所有column-rule-*属性。column-rule属性设置列之间的宽度，样式和颜色。

<!DOCTYPEHTML>
<html>
<head>
<meta charset="utf-8">
<title>列与列之间的分隔线</title>
<style type="text/css">
body {
border:1px solid #f90;
padding:10px;
-webkit-column-count:3;
/* 指定列的数目 */
-moz-column-count:3;
/* 指定列的数目 */
column-count:3;
/* 指定列的数目 */
-webkit-column-rule:1px solid #666;
/* 设置分割线 */
-moz-column-rule:1px solid #666;
/* 设置分割线 */
column-rule:1px solid #666;
/* 设置分割线 */
}
h1 {font-size:24px;padding:5px 10px;background-color:#CCC;}
h2 {font-size:14px;text-align:center;}
p {text-indent:2em;	font-size:12px;line-height:20px;}
</style>
</head>
<body>
<h1>背影</h1>
<h2>朱自清</h2>
<p>我与父亲不相见已二年余了，我最不能忘记的是他的背影。</p>
<p>那年冬天，祖母死了，父亲的差使也交卸了，正是祸不单行的日子。我从北京到徐州打算跟着父亲奔丧回家。到徐州见着父亲，看见满院狼籍的东西，又想起祖母，不禁簌簌地流下眼泪。父亲说："事已如此，不必难过，好在天无绝人之路！"</p>
<p>回家变卖典质，父亲还了亏空；又借钱办了丧事。这些日子，家中光景很是惨淡，一半因为丧事，一半因为父亲赋闲。丧事完毕，父亲要到南京谋事，我也要回北京念书，我们便同行。</p>
<p>到南京时，有朋友约去游逛，勾留了一日；第二日上午便须渡江到浦口，下午上车北去。父亲因为事忙，本已说定不送我，叫旅馆里一个熟识的茶房陪我同去。他再三嘱咐茶房，甚是仔细。但他终于不放心，怕茶房不妥帖；颇踌躇了一会。其实我那年已二十岁，北京已来往过两三次，是没有什么要紧的了。他踌躇了一会，终于决定还是自己送我去。我两三回劝他不必去；他只说："不要紧，他们去不好！"</p>
<p>我们过了江，进了车站。我买票，他忙着照看行李。行李太多了，得向脚夫行些小费才可过去。他便又忙着和他们讲价钱。我那时真是聪明过分，总觉他说话不大漂亮，非自己插嘴不可，但他终于讲定了价钱；就送我上车。他给我拣定了靠车门的一张椅子；我将他给我做的紫毛大衣铺好座位。他嘱我路上小心，夜里要警醒些，不要受凉。又嘱托茶房好好照应我。我心里暗笑他的迂；他们只认得钱，托他们只是白托！而且我这样大年纪的人，难道还不能料理自己么？唉，我现在想想，那时真是太聪明了！</p>
</body>
</html>