Implement Cornell notes template using html and css

This article mainly introduces the relevant information about using html and css to implement the Cornell Notes (5R Notes) template. Friends who need it can refer to it. I hope you can have better ideas about implementing the Cornell Notes template based on html and css. Complete your own projects.

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 Baidu it by themselves.

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

realization

1. First set a p to the size of A4 paper, 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, and 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 The border is divided into 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, and use a p's aline class to implement it. See the html above.

Here 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 floats, 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 to

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

Related recommendations:

html and css to make QQ Penguin Tutorial

Small examples of html, CSS and JavaScript (pictures)

Detailed explanation of html, CSS and JavaScript front-end naming conventions

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