您的位置:银河国际手机网址2949 > 银河国际手机网址2949 > 用html和css轻松实现康奈尔笔记(5R笔记)模板

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

发布时间:2019-11-22 22:27编辑:银河国际手机网址2949浏览(138)

    缘起

    用html和css轻松实现康奈尔笔记(5R笔记)模板。人家都在说康奈尔笔记法,很好用呢,能抵御遗忘曲线,让您的笔记一本万利,风趣味的同室自行百度哈。

    用html和css轻松实现康奈尔笔记(5R笔记)模板。英特网有广大现有的沙盘,下载下来以往呢,望着就疑似在上面写德文恐怕更便利一点,行距十分小,並且还会有网站在上头,心里不是很情愿的说呢。后来想着自个儿在word可能excel里面做二个模板出来,后来愣是不会把三个报表的一整套设置成占总表格的十分九,最后放任,后来想起来,css里面是足以用cm做单位的呦,为啥不协和写多个吧,只用div就足以了呀

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

    1. 先把一个div设置成Fox纸的大小,宽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. 给凌度纸这么大的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>
      

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

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

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

    本文由银河国际手机网址2949发布于银河国际手机网址2949,转载请注明出处:用html和css轻松实现康奈尔笔记(5R笔记)模板

    关键词:

上一篇:Swift

下一篇:没有了