Use html and css to implement a template for Cornell notes

This article mainly introduces the relevant information about using html and css to implement the Cornell Notes (5R Notes) template. Friends in need can refer to it

Origin

People say that the Cornell note-taking method is very useful. It can resist the forgetting curve and make your notes more effective with half the effort. Interested students can search it on Baidu.

There are many ready-made templates on the Internet. After downloading them, it seems that it may be more convenient to write English on them. The line spacing is very small, and there is a URL on it. I am not very happy to say that. Later I thought about making a template in word or excel, but then I was surprised that I couldn't set one row of a table to account for 70% of the total table, so I finally gave up. Then I remembered that cm can be used as the unit in css. , why not write one yourself, just use p

implementation

1. First set a p to A4 paper The size is 21cm wide and 29.7cm high

<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. Add two floating p’s to a p as big as A4 paper, one to the left, occupying 29% of the space, one to the right, occupying 68% of the space

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

Use css border to separate the two columns

.main {height: 75%; overflow: hidden;}

    .le { width: 28.99999%; border-right: double 3px #666; float: left; }
    .ri { width: 69.99999%; float: right; }

3. Write horizontal lines line by line in the big box, use a p's aline class to implement it, see the html above

If your editor supports emmet, write A p.aline*42, there will be 42 lines of the same p appearing. Then use the border attribute of CSS to draw lines one by one.

.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. Then put a p behind the two large boxes on the left and right, clear the float, and put the summary part.

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

, the first line inside, use a solid line to separate the lower part of the 5R note structure

.footer {clear: both; overflow: hidden;}
.doubleline { border-top: double 3px #666;}

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

HTML5 and CSS3 Realize the switching effect of smart animation

How to use html2canvas to convert html code into pictures

The above is the detailed content of Use html and css to implement a template for Cornell notes. For more information, please follow other related articles on the PHP Chinese website!