用html和css轻松实现康奈尔笔记(5R笔记)模板

缘起

人家都说康奈尔笔记法，很好用呢，能抵抗遗忘曲线，让你的笔记事半功倍，有兴趣的同学自行百度哈。

网上有很多现成的模板，下载下来之后吧，看着好像在上面写英文可能更方便一点，行距很小，而且还有网址在上面，心里不是很乐意的说呢。后来想着自己在word或者excel里面做一个模板出来，后来愣是不会把一个表格的一行设置成占总表格的70%，最终放弃，后来想起来，css里面是可以用cm做单位的呀，为什么不自己写一个呢，只用div就可以了呀

实现

先把一个div设置成A4纸的大小，宽21cm，高29.7cm

    <div id="abody">

    </div>

，

#abody { width: 21cm; height: 29.7cm; margin: 0 auto; overflow: hidden; padding: 1.5cm 1.2cm 1.2cm 2.5cm;}

给A4纸这么大的div里面加两个浮动的div，一个往左，占用29%的空间，一个往右，占用68%的空间

<div id="main" class="main le">

        <div class="aline">提示</div>

        <div class="aline"></div>

</div>

<div id="sider" class="main ri">

        <div class="aline">笔记</div>

        <div class="aline"></div>

</div>

<div id="footer" class="footer">

        <div class="aline doubleline">概要</div>

        <div class="aline"></div>

</div>

用css的border分开两栏

.main {height: 75%; overflow: hidden;}

    .le { width: 28.99999%; border-right: double 3px #666; float: left; }

    .ri { width: 69.99999%; float: right; }

往大框里面写一行一行的横线，用一个div 的aline类实现，html见上面

这里如果你的编辑器支持emmet的话，写一个div.aline*42，就会有42行相同的div出现了。然后用css的border属性画出一条条的线出来。
```
.aline { height: 0.9cm; border-bottom: 1px; border-bottom-style: dashed; border-bottom-color: #999;

            margin-right: 8px; color: #eee; line-height: 0.9cm;}
```

再在左右两个大框的后面放一个div，清除浮动，放概要部分。

<div id="main" class="main le">

        <div class="aline">提示</div>

        <div class="aline"></div>

</div>

<div id="sider" class="main ri">

        <div class="aline">笔记</div>

        <div class="aline"></div>

</div>

<div id="footer" class="footer">

        <div class="aline doubleline">概要</div>

        <div class="aline"></div>

</div>

，里面的首行，用实线分出来5R笔记的下部分结构来

.footer {clear: both; overflow: hidden;}

.doubleline { border-top: double 3px #666;}

就这样，很简单的哈

再见2017，你好，2018。

想拿着直接打印着用的话，在这里https://files.cnblogs.com/files/nimeiz/0011.pdf

巴特西

用html和css轻松实现康奈尔笔记(5R笔记)模板

缘起

实现

最新文章

热门文章