快捷搜索:

用html和css轻松实现康奈尔笔记

日期:2019-11-01编辑作者:二战前线

缘起

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

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

实现

  1. 先把一个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;}
    
  2. 给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分开两栏二战前线 1

    .main {height: 75%; overflow: hidden;}
    
        .le { width: 28.99999%; border-right: double 3px #666; float: left; }
        .ri { width: 69.99999%; float: right; }
    
  3. 往大框里面写一行一行的横线,用一个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;}
    
  4. 二战前线,再在左右两个大框的后面放一个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;}
    
  5. 就这样,很简单的哈

    再见2017,你好,2018。
    想拿着直接打印着用的话,在这里

本文由澳门新普京发布于二战前线,转载请注明出处:用html和css轻松实现康奈尔笔记

关键词:

之间的依赖问题

放弃依赖注入 : singleton 作用域的 Bean 每次都需要 propertype作用域的 Bean 时, 主动向容器请求新的 Bean 实例 ,即可保证每...

详细>>

re模块详解

常用正则表达式符号 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 .       默认匹配除n之外的任意一个字符,若指定f...

详细>>

票据OCR前预处理

发一个去年做的一个去除票据干扰项的demo,核心处理是移除红色印章,不破坏红印叠加处的文字。 只是一个小小de...

详细>>

拉一个小球

一直以来都对物理效果有神秘感,完全不知道怎么实现的.直到看到了周银辉在老早前写的一篇博客: 终于知道是怎么实...

详细>>