缘起

人家都说康奈尔笔记法,很好用呢,能抵抗遗忘曲线,让你的笔记事半功倍,有兴趣的同学自行百度哈。

网上有很多现成的模板,下载下来之后吧,看着好像在上面写英文可能更方便一点,行距很小,而且还有网址在上面,心里不是很乐意的说呢。后来想着自己在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;}
  5. 就这样,很简单的哈

    再见2017,你好,2018。

    想拿着直接打印着用的话,在这里https://files.cnblogs.com/files/nimeiz/0011.pdf

用html和css轻松实现康奈尔笔记(5R笔记)模板的更多相关文章

  1. 美国康奈尔大学BioNB441元胞自动机MATLAB应用

    美国康奈尔大学BioNB441在Matlab中的元胞自动机 介绍 元胞自动机(CA)是用于计算计划利用当地的规则和本地通信.普遍CA定义一个网格,网格上的每个点代表一个有限数量的状态中的细胞.过渡规则 ...

  2. phalcon(费尔康)框架学习笔记

    phalcon(费尔康)框架学习笔记 http://www.qixing318.com/article/phalcon-framework-to-study-notes.html 目录结构   pha ...

  3. 使用 CSS 轻松实现一些高频出现的奇形怪状按钮

    背景 在群里会有同学问相关的问题,怎么样使用 CSS 实现一个内切角按钮呢.怎么样实现一个带箭头的按钮呢? 本文基于一些高频出现在设计稿中的,使用 CSS 实现稍微有点难度和技巧性的按钮,讲解使用 C ...

  4. CSS 轻松搞定标签(元素)居中问题

    在CSS里,标签位置居中一直是困扰Web前端的难题.在本文中,我对这类问题进行了探究和给出了几点建议,供读者参考. 1 行内标签 1.1 水平居中 在父级标签中使用 text-align: cente ...

  5. 3D 穿梭效果?使用 CSS 轻松搞定

    背景 周末在家习惯性登陆 Apex,准备玩几盘.在登陆加速器的过程中,发现加速器到期了. 我一直用的腾讯网游加速器,然而点击充值按钮,提示最近客户端升级改造,暂不支持充值(这个操作把我震惊了~).只能 ...

  6. 超酷炫的转场动画?CSS 轻松拿下!

    在 WeGame 的 PC 端官网首页,有着非常多制作精良的基于滚动的动画效果. 这里我简单截取其中 2 个比较有意思的转场动画,大家感受感受.转场动画 1: 转场动画 2: 是不是挺有意思的,整个动 ...

  7. 康奈尔大学CFD课程

    先上链接:https://confluence.cornell.edu/display/SIMULATION/Home 如果不会FQ,可以去edx:https://courses.edx.org/co ...

  8. Css定位之relative_慕课网课程笔记

    前言 最近在慕课网上跟着张鑫旭大神重新学习一遍CSS相关的知识,以下是学习的笔记以及个人一些理解 relative对绝对定位的限制 1.限制绝对定位 绝对定位的top.left.right和botto ...

  9. 【HTML XHTML CSS基础教程(第6版)】笔记之CSS笔记(7~25章)

      第7章 CSS构造块   1.在样式表中添加注释 /*内容*/   2.CSS颜色 rgb(红,黄,蓝) 这三个参数可以用百分号:rgb(35%,0%,50%); 也可以用数字,如上代码就相当于r ...

随机推荐

  1. 创建简单的Python列表

    比如给出电影列表: The Holy Grail The Life of Brian The Meaning of Life 转换为Python可读的列表,需要遵循以下4个步骤: 1.在数据两边加引号 ...

  2. JDK自带VM分析工具jps,jstat,jmap,jconsole

    一.概述 SUN 的JDK中的几个工具,非常好用.秉承着有免费,不用商用的原则.以下简单介绍一下这几种工具.(注:本文章下的所有工具都存在JDK5.0以上版本的工具集里,同javac一样,不须特意安装 ...

  3. 《HelloGitHub》第 20 期

    前言 HelloGitHub 项目已经累积到 3k+ Stars.本项能够走到今天,帮助到越来越多的人.少不了热爱开源.不断为本项目贡献项目的小伙伴们. 贡献者列表 很多人都有想法,付诸于行动在少数, ...

  4. REMOTE_ADDR,HTTP_CLIENT_IP,HTTP_X_FORWARDED_FOR获取客户端IP

    话不多说,先上代码: /**  * 获得用户的真实IP地址  *  * @access  public  * @return  string  */ function real_ip() {      ...

  5. C++ 将汉字转换成拼音全拼

    #include <string> using std::string; //======================================================= ...

  6. Jquery基础知识01

    1:$(document).ready()function{}和window.onload()的区别.   1:$(document).ready()function{} 该方法等到Dom结构绘制完毕 ...

  7. 应用教程之帕克西AR虚拟试妆3D动态美妆

    帕克西技术团队通过对美妆行业深度调研,凭借自主研发的人脸识别与面部追踪等技术,打造的超现实AR虚拟试妆应用已成功上线,内置万千妆容,包含口红.眉毛.睫毛等,一点即可试妆,就像照镜子一样简单. 那么,帕 ...

  8. codeforces 630C - Lucky Numbers 递推思路

    630C - Lucky Numbers 题目大意: 给定数字位数,且这个数字只能由7和8组成,问有多少种组合的可能性 思路: 假设为1位,只有7和8:两位的时候,除了77,78,87,88之外还哇哦 ...

  9. HDU3790-最短路径问题

    最短路径问题 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Sub ...

  10. eclipse中将本地项目上传到svn库

    转载文章:http://blog.csdn.net/singit/article/details/48972197