http://www.forfreezone.com

用html和css轻松实现康奈尔笔记澳门金沙官网网址

缘起

居家都在说康奈尔笔记法,很好用啊,能对抗遗忘曲线,令你的笔记渔人之利,有意思味的同学自行百度哈。

网络有为数不菲现存的模版,下载下来之后呢,瞅着看似在上面写塞尔维亚共和国语可能更实惠一点,行距相当的小,何况还会有网站在地点,心里不是很愿意的说呢。后来想着本人在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. 给PASSAT纸这么大的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本田CR-V笔记的下局地构造来

    .footer {clear: both; overflow: hidden;}
    .doubleline { border-top: double 3px #666;}
    
  5. 就这么,相当粗略的哈

    再见2017,你好,2018。
    想拿着一贯打印着用的话,在那处

郑重声明:本文版权归澳门新葡8455最新网站所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。