金沙澳门网址

当前位置:澳门唯一金莎娱乐 > 金沙澳门网址 > 用html和css轻松实现康奈尔笔记(5R笔记)模板

用html和css轻松实现康奈尔笔记(5R笔记)模板

来源:http://www.savelapetitebande.com 作者:澳门唯一金莎娱乐 时间:2019-10-20 05:24

缘起

用html和css轻松实现康奈尔笔记(5R笔记)模板。每户都说康奈尔笔记用html和css轻松实现康奈尔笔记(5R笔记)模板。法,很好用呢,能抵挡遗忘曲线,令你的笔记一本万利,风野趣的同窗自行百度哈。

用html和css轻松实现康奈尔笔记(5R笔记)模板。英特网有广大现有的模板,下载下来现在呢,望着类似在上头写斯拉维尼亚语或者更便利一点,行距比极小,何况还应该有网站在上边,心里不是很情愿的说吧。后来想着自个儿在word大概excel里面做四个模板出来,后来愣是不会把一个表格的黄金年代行设置成占总表格的70%,最后抛弃,后来想起来,css里面是能够用cm做单位的啊,为何不友善写一个啊,只用div就能够了哟

用html和css轻松实现康奈尔笔记(5R笔记)模板。实现

  1. 先把多少个div设置成西玛纸的朗朗上口,宽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. 给卡罗拉纸这么大的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分开两栏图片 1

    .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>
    

    ,里面包车型大巴首行,用实线分出来5CR-V笔记的下局地结构来

    .footer {clear: both; overflow: hidden;}
    .doubleline { border-top: double 3px #666;}
    
  5. 就如此,异常的粗略的哈

    再见2017,你好,2018。
    想拿着从来打字与印刷着用的话,在这里地

本文由澳门唯一金莎娱乐发布于金沙澳门网址,转载请注明出处:用html和css轻松实现康奈尔笔记(5R笔记)模板

关键词: