应用html和css完成康奈尔笔记(5R笔记)模版

日期:2021-03-02 类型:科技新闻 

关键词:网页设计,移动端网页设计,大一网页设计作业成品,网页编辑软件,网页在线编辑

缘起

人家都说 康奈尔笔记 法,很功能强大呢,能抵御忘却曲线图,让你的笔记事倍功半,有兴趣爱好的同学自主百度搜索哈。

在网上有许多现成的模版,免费下载下来以后吧,看着仿佛在上面写英文将会更便捷1点,行距很小,并且也有网站地址在上面,内心并不是很乐意的说呢。后来想着自身在word或excel里边做1个模版出来,后来愣是不容易把1个报表的1行设定成占总报表的70%,最后舍弃,后来想起来,css里边是能够用cm做企业的呀,为何不自身写1个呢,只用div便可以了呀

完成

1.先把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,1个往左,占有29%的室内空间,1个往右,占有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.往大框里边写1行1行的横线,用1个div 的aline类完成,html见上面

这里假如你的编写器适用emmet的话,写1个 div.aline*42 ,就会有42行同样的div出現了。随后用css的border特性画出1条条的线出来。

.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.再在上下两个大框的后边放1个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笔记)模版,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!