运用html和css实现康奈尔条记的模板

这篇文章主要介绍了使用html和css实现康奈尔笔记(5R笔记)模板的相关材料,需要的伴侣可以参照 下

缘起

人家都说 康奈尔笔记 法，很好用呢，能抵御忘记曲线，让你的笔记一举两得，有乐趣的同学自行baidu哈。

网上有许多现成的模板，下载下来之后吧，看着仿佛在上面写英文大概更利便一点，行距很小，并且还有网址在上面，心里不是很乐意的说呢。后来想着本人在word或者excel里面做一个模板出来，后来愣是不会把一个表格的一行设定成占总表格的70%，终究舍弃，后来想起来，css里面是可以用cm做单位的呀，为什么不本人写一个呢，只用p就可以了呀

实现

1.先把一个p设定成A4纸的大小，宽21cm，高29.7cm

<p id="abody">
    </p>
#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%的空间

<p id="main" class="main le">
        <p class="aline">提醒</p>
        <p class="aline"></p>
</p>
<p id="sider" class="main ri">
        <p class="aline">笔记</p>
        <p class="aline"></p>
</p>
<p id="footer" class="footer">
        <p class="aline doubleline">概要</p>
        <p class="aline"></p>
</p>

用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，清除浮动，放概要部分。

<p id="main" class="main le">
        <p class="aline">提醒</p>
        <p class="aline"></p>
</p>
<p id="sider" class="main ri">
        <p class="aline">笔记</p>
        <p class="aline"></p>
</p>
<p id="footer" class="footer">

        <p class="aline doubleline">概要</p>
        <p class="aline"></p>
</p>

，里面的首行，用实线分出来5R笔记的下部分构造来

.footer {clear: both; overflow: hidden;}
.doubleline { border-top: double 3px #666;}

以上就是本文的全部内容，但愿对大家的学习有所帮忙，更多相关内容请关注PHP中文网！

相关引荐：

HTML5和CSS3 实现灵动画的切换结果

怎样利用html2canvas 将html代码转为图片

以上就是使用html和css实现康奈尔笔记的模板的具体内容，更多请关注百分百源码网其它相关文章！