Home Web Front-end HTML Tutorial Use html and css to implement a template for Cornell notes

Use html and css to implement a template for Cornell notes

Jun 20, 2018 am 10:48 AM
css html 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;}
Copy after login

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>
Copy after login

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

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

, 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

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!

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

Hot Article Tags

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Nested Table in HTML Nested Table in HTML Sep 04, 2024 pm 04:49 PM

Nested Table in HTML

Table Border in HTML Table Border in HTML Sep 04, 2024 pm 04:49 PM

Table Border in HTML

HTML margin-left HTML margin-left Sep 04, 2024 pm 04:48 PM

HTML margin-left

HTML Table Layout HTML Table Layout Sep 04, 2024 pm 04:54 PM

HTML Table Layout

Moving Text in HTML Moving Text in HTML Sep 04, 2024 pm 04:45 PM

Moving Text in HTML

HTML Ordered List HTML Ordered List Sep 04, 2024 pm 04:43 PM

HTML Ordered List

HTML onclick Button HTML onclick Button Sep 04, 2024 pm 04:49 PM

HTML onclick Button

How do you parse and process HTML/XML in PHP? How do you parse and process HTML/XML in PHP? Feb 07, 2025 am 11:57 AM

How do you parse and process HTML/XML in PHP?

See all articles