使用html和css实现康奈尔笔记的模板


本文摘自PHP中文网,作者不言,侵删。

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

缘起

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

网上有很多现成的模板,下载下来之后吧,看着好像在上面写英文可能更方便一点,行距很小,而且还有网址在上面,心里不是很乐意的说呢。后来想着自己在word或者excel里面做一个模板出来,后来愣是不会把一个表格的一行设置成占总表格的70%,最终放弃,后来想起来,css里面是可以用cm做单位的呀,为什么不自己写一个呢,只用p就可以了呀

实现

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

1

2

3

<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%的空间

1

2

3

4

5

6

7

8

9

10

11

12

<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分开两栏

1

2

3

4

.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属性画出一条条的线出来。

1

2

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

1

2

3

4

5

6

7

8

9

10

11

12

13

<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笔记的下部分结构来

1

2

.footer {clear: both; overflow: hidden;}

.doubleline { border-top: double 3px #666;}

以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

相关推荐:

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

如何利用html2canvas 将html代码转为图片

以上就是使用html和css实现康奈尔笔记的模板的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

Html menu标签怎么用

css文字不环绕怎么办

css中的“计算属性”是什么

深入理解px、rem、em、vh、vw之间的区别

input输入框只能输入数字、字母相关组合(正则表达式)

什么是css伪类

css的四种引入方式分别是什么

Html背景图片怎么设置大小

css中的长度单位的应用介绍

Html如何实现文本上下居中

更多相关阅读请进入《Html》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...