Home > Web Front-end > CSS Tutorial > Implement Cornell notes using html and css

Implement Cornell notes using html and css

php中世界最好的语言
Release: 2018-03-20 15:20:42
Original
1775 people have browsed it

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;}
Copy after login
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>
Copy after login
Copy after login
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; }
Copy after login
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;}
Copy after login
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>
Copy after login
Copy after login
, 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;}
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template