请首先阅读前几篇教程,才能对本篇文章了解比较深入:
TreeSaver 使用教程整理——Step 1: Getting Started
TreeSaver 使用教程整理——Step 2: Adding Basic UI
TreeSaver 使用教程整理——Step 3: Creating Grids
TreeSaver 使用教程整理——Step 4: Using a Title Figure
TreeSaver 使用教程整理——Step 5: Adding Illustration Figures
我们在上一步的基础上,copy到 step6 作为我们 step6 初始的基础。
Step 6: Simple Typography
内容文件。
标题的修改。我们把章节用CSS属性扩起来,这样我们后面可以控制这个区域
<figure>
<h2 data-sizes="title fallback">
<span class="chapter">Chapter I:</span>
Down the Rabbit-Hole
</h2>
</figure>
这里我们是对章节号使用<span>标签,这样我们就可以对它做一些排版的工作。
我们在样式文件中增加如下样式设置:
body {
font-family: Georgia, Serif;
font-size: 16px;
color: #434;
}
h2 {
font-size: 36px;
line-height: 48px;
font-weight: normal;
margin: 24px 0;
color: #666;
}
h2 .chapter {
display: block;
font-size: 16px;
line-height: 24px;
color: #999;
}
p {
margin: 0;
text-indent: 24px;
}
hr {
margin: 24px 0;
border: none;
padding: 0;
height: 24px;
background: url('../img/horizontal-rule.png') 50% 50% no-repeat;
}
这里是很简单的CSS调整。
修改如下CSS成下面的样子:
.grid {
width: 280px;
margin: 0 72px;
opacity: .25;
min-height: 30px;
}
.cols-2 {
width: 590px;
}
.cols-3 {
width: 910px;
}
.column, .container {
width: 280px;
top: 15px;
bottom: 15px;
left: 0;
}
.col-2 {
left: 305px;
}
.col-3 {
left: 615px;
}
我们删除了每一页的边框,这意味着我们不再需要15px的空间去区分分栏。
页面效果:
参考资料:
https://github.com/Treesaver/treesaver/wiki/Walkthrough