45fan.com - 路饭网

搜索: 您的位置主页 > 电脑频道 > 电脑教程 > 阅读资讯:怎么样使用Html和css实现康奈尔笔记?

怎么样使用Html和css实现康奈尔笔记?

2018-02-25 15:15:03 来源:www.45fan.com 【

怎么样使用Html和css实现康奈尔笔记?

缘起

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

网上有很多现成的模板,下载下来之后吧,看着好像在上面写英文可能更方便一点,行距很小,而且还有网址在上面,心里不是很乐意的说呢。后来想着自己在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;}

总结

以上所述是小编给大家介绍的使用html和css实现康奈尔笔记(5R笔记)模板,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对路饭网站的支持!


本文地址:http://www.45fan.com/dnjc/97198.html
Tags: 实现 css html
编辑:路饭网
关于我们 | 联系我们 | 友情链接 | 网站地图 | Sitemap | App | 返回顶部