cvmachine.com - 申博开户网

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

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

2018-02-25 15:15:03 来源:www.cvmachine.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.cvmachine.com/dnjc/97198.html
Tags: 实现 css html
编辑:申博开户网
m88 188bet uedbet 威廉希尔 明升 bwin 明升88 bodog bwin 明升m88.com 18luck 188bet unibet unibet Ladbrokes Ladbrokes casino m88明升 明升 明升 m88.com 188bet m88 明陞 uedbet赫塔菲官网 365bet官网 m88 help
188bet www.188bet.com bwin 平博 unibet 明升 188bet uk Ladbrokes 德赢vwin 188bet m88.com w88 平博88 uedbet体育 188bet 188bet 威廉希尔 明升体育app 平博88 M88 Games vwin德赢 uedbet官网 bodog fun88 188bet
关于我们 | 联系我们 | 友情链接 | 网站地图 | Sitemap | App | 返回顶部