用html和css輕鬆實現康奈爾筆記(5R筆記)模板

緣起

人家都說康奈爾筆記法，很好用呢，能抵抗遺忘曲線，讓你的筆記事半功倍，有興趣的同學自行百度哈。

網上有很多現成的模板，下載下來之後吧，看著好像在上面寫英文可能更方便一點，行距很小，而且還有網址在上面，心裡不是很樂意的說呢。後來想著自己在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分開兩欄

   .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。
   想拿著直接列印著用的話，在這裡https://files.cnblogs.com/files/nimeiz/0011.pdf