Implement Cornell notes using html and css

This time I will bring you the use of html and css to implement Cornell notes. What are the precautions for using html and css to implement Cornell notes? The following is a practical case, let's take a look.

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 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 the p as big as A4 paper, one to the left, occupying 29% of the space, and one to the right, occupying 68% 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 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, html see above

Here, if your

editor supports emmet, write a p.aline*42, and 42 lines of the same p will appear. Then use the CSS border attribute 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;}

I believe you have read the case in this article I have mastered the method. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to use the calc() method of CSS3

Detailed explanation of CSS positioning attributes

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