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

2019-10-11 19:58栏目:十大网赌网址
TAG:

缘起

住户都说康奈尔笔记法,很好用啊,能对抗遗忘曲线,令你的笔记一箭双雕,有意思味的同窗自行百度哈。

网络有广大现有的沙盘,下载下来未来呢,望着类似在地点写加泰罗尼亚语大概更便利一点,行距极小,并且还应该有网站在上边,心里不是很乐于的说啊。后来想着自个儿在word或然excel里面做一个模板出来,后来愣是不会把多个报表的一站式设置成占总表格的五分之四,最后甩掉,后来想起来,css里面是足以用cm做单位的呦,为何不和睦写二个吗,只用div就能够了啊

实现

  1. 先把叁个div设置成雅阁纸的尺寸,宽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. 十大网赌网址,给奥迪R18纸这么大的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>
    

    ,里面包车型地铁首行,用实线分出去5安德拉笔记的下部分结构来

    .footer {clear: both; overflow: hidden;}
    .doubleline { border-top: double 3px #666;}
    
  5. 就这么,很简短的哈

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

版权声明:本文由金莎国际发布于十大网赌网址,转载请注明出处:用html和css轻松实现康奈尔笔记