这次给大家带来使用html和css实现康奈尔笔记，使用html和css实现康奈尔笔记的注意事项有哪些，下面就是实战案例，一起来看一下。
缘起
人家都说 康奈尔笔记 法，很好用呢，能抵抗遗忘曲线，让你的笔记事半功倍，有兴趣的同学自行百度哈。
网上有很多现成的模板，下载下来之后吧，看着好像在上面写英文可能更方便一点，行距很小，而且还有网址在上面，心里不是很乐意的说呢。后来想着自己在word或者excel里面做一个模板出来，后来愣是不会把一个表格的一行设置成占总表格的70%，最终放弃，后来想起来，css里面是可以用cm做单位的呀，为什么不自己写一个呢，只用p就可以了呀
实现
1.先把一个p设置成A4纸的大小，宽21cm，高29.7cm
#abody { width: 21cm; height: 29.7cm; margin: 0 auto; overflow: hidden; padding: 1.5cm 1.2cm 1.2cm 2.5cm;}
登录后复制
2.给A4纸这么大的p里面加两个浮动的p，一个往左，占用29%的空间，一个往右，占用68%的空间
提示
笔记
概要
登录后复制登录后复制
用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.往大框里面写一行一行的横线，用一个p 的aline类实现，html见上面
这里如果你的注意事项支持emmet的话，写一个 p.aline*42 ，就会有42行相同的p出现了。然后用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.再在左右两个大框的后面放一个p，注意事项，放概要部分。
提示
笔记
概要
登录后复制登录后复制
，里面的首行，用实线分出来5R笔记的下部分结构来
.footer {clear: both; overflow: hidden;}.doubleline { border-top: double 3px #666;}
登录后复制
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
注意事项
注意事项
以上就是使用html和css实现康奈尔笔记的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2899453.html
