用html和css轻松实现康奈尔笔记(5R笔记)模板
缘起
人家都说康奈尔笔记
法,很好用呢,能抵抗遗忘曲线,让你的笔记事半功倍,有兴趣的同学自行百度哈。
网上有很多现成的模板,下载下来之后吧,看着好像在上面写英文可能更方便一点,行距很小,而且还有网址在上面,心里不是很乐意的说呢。后来想着自己在word或者excel里面做一个模板出来,后来愣是不会把一个表格的一行设置成占总表格的70%,最终放弃,后来想起来,css里面是可以用cm做单位的呀,为什么不自己写一个呢,只用div就可以了呀
实现
先把一个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;}
给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; }
往大框里面写一行一行的横线,用一个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;}
再在左右两个大框的后面放一个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;}
就这样,很简单的哈
再见2017,你好,2018。
想拿着直接打印着用的话,在这里https://files.cnblogs.com/files/nimeiz/0011.pdf
用html和css轻松实现康奈尔笔记(5R笔记)模板的更多相关文章
- 美国康奈尔大学BioNB441元胞自动机MATLAB应用
美国康奈尔大学BioNB441在Matlab中的元胞自动机 介绍 元胞自动机(CA)是用于计算计划利用当地的规则和本地通信.普遍CA定义一个网格,网格上的每个点代表一个有限数量的状态中的细胞.过渡规则 ...
- phalcon(费尔康)框架学习笔记
phalcon(费尔康)框架学习笔记 http://www.qixing318.com/article/phalcon-framework-to-study-notes.html 目录结构 pha ...
- 使用 CSS 轻松实现一些高频出现的奇形怪状按钮
背景 在群里会有同学问相关的问题,怎么样使用 CSS 实现一个内切角按钮呢.怎么样实现一个带箭头的按钮呢? 本文基于一些高频出现在设计稿中的,使用 CSS 实现稍微有点难度和技巧性的按钮,讲解使用 C ...
- CSS 轻松搞定标签(元素)居中问题
在CSS里,标签位置居中一直是困扰Web前端的难题.在本文中,我对这类问题进行了探究和给出了几点建议,供读者参考. 1 行内标签 1.1 水平居中 在父级标签中使用 text-align: cente ...
- 3D 穿梭效果?使用 CSS 轻松搞定
背景 周末在家习惯性登陆 Apex,准备玩几盘.在登陆加速器的过程中,发现加速器到期了. 我一直用的腾讯网游加速器,然而点击充值按钮,提示最近客户端升级改造,暂不支持充值(这个操作把我震惊了~).只能 ...
- 超酷炫的转场动画?CSS 轻松拿下!
在 WeGame 的 PC 端官网首页,有着非常多制作精良的基于滚动的动画效果. 这里我简单截取其中 2 个比较有意思的转场动画,大家感受感受.转场动画 1: 转场动画 2: 是不是挺有意思的,整个动 ...
- 康奈尔大学CFD课程
先上链接:https://confluence.cornell.edu/display/SIMULATION/Home 如果不会FQ,可以去edx:https://courses.edx.org/co ...
- Css定位之relative_慕课网课程笔记
前言 最近在慕课网上跟着张鑫旭大神重新学习一遍CSS相关的知识,以下是学习的笔记以及个人一些理解 relative对绝对定位的限制 1.限制绝对定位 绝对定位的top.left.right和botto ...
- 【HTML XHTML CSS基础教程(第6版)】笔记之CSS笔记(7~25章)
第7章 CSS构造块 1.在样式表中添加注释 /*内容*/ 2.CSS颜色 rgb(红,黄,蓝) 这三个参数可以用百分号:rgb(35%,0%,50%); 也可以用数字,如上代码就相当于r ...
随机推荐
- 创建简单的Python列表
比如给出电影列表: The Holy Grail The Life of Brian The Meaning of Life 转换为Python可读的列表,需要遵循以下4个步骤: 1.在数据两边加引号 ...
- JDK自带VM分析工具jps,jstat,jmap,jconsole
一.概述 SUN 的JDK中的几个工具,非常好用.秉承着有免费,不用商用的原则.以下简单介绍一下这几种工具.(注:本文章下的所有工具都存在JDK5.0以上版本的工具集里,同javac一样,不须特意安装 ...
- 《HelloGitHub》第 20 期
前言 HelloGitHub 项目已经累积到 3k+ Stars.本项能够走到今天,帮助到越来越多的人.少不了热爱开源.不断为本项目贡献项目的小伙伴们. 贡献者列表 很多人都有想法,付诸于行动在少数, ...
- REMOTE_ADDR,HTTP_CLIENT_IP,HTTP_X_FORWARDED_FOR获取客户端IP
话不多说,先上代码: /** * 获得用户的真实IP地址 * * @access public * @return string */ function real_ip() { ...
- C++ 将汉字转换成拼音全拼
#include <string> using std::string; //======================================================= ...
- Jquery基础知识01
1:$(document).ready()function{}和window.onload()的区别. 1:$(document).ready()function{} 该方法等到Dom结构绘制完毕 ...
- 应用教程之帕克西AR虚拟试妆3D动态美妆
帕克西技术团队通过对美妆行业深度调研,凭借自主研发的人脸识别与面部追踪等技术,打造的超现实AR虚拟试妆应用已成功上线,内置万千妆容,包含口红.眉毛.睫毛等,一点即可试妆,就像照镜子一样简单. 那么,帕 ...
- codeforces 630C - Lucky Numbers 递推思路
630C - Lucky Numbers 题目大意: 给定数字位数,且这个数字只能由7和8组成,问有多少种组合的可能性 思路: 假设为1位,只有7和8:两位的时候,除了77,78,87,88之外还哇哦 ...
- HDU3790-最短路径问题
最短路径问题 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Sub ...
- eclipse中将本地项目上传到svn库
转载文章:http://blog.csdn.net/singit/article/details/48972197