Using HTML and CSS to implement the Cornell note template

This article mainly introduces the use of HTML and CSS to implement the Cornell Note (5R Note) template of the relevant information, the need for friends can refer to, I hope you can implement the Cornell note template based on HTML and CSS ideas to better complete their projects.

Origin

People say that the Cornell note method, very useful, can resist the forgotten curve, so that your notes with less effort, interested students themselves Baidu ha.

There are a lot of ready-made templates on the Internet, after downloading it, it seems to be more convenient to write English on it, line spacing is very small, and there are URLs on it, the mind is not very happy to say it. Later think of their own in Word or Excel to do a template, and later Leng will not put a table of a row to account for the total table of 70%, eventually give up, and then think of it, CSS inside is can use cm to do units of Ah, why not write a it, only with P can be

Realize

1. First set a p to A4 paper size, width 21cm, height 29.7cm

<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. Give A4 paper so large p inside plus two floating p, a left, occupy 29% of the space, a right, occupy 68% of the space

<p id= "main" class= "main le" >        <p class= "aline" > Hints </p>        <p class= "Aline" ></p> </p><p id= "Sider" class= "main ri" >        <p class= "Aline" > Notes </p>        <p class= "Aline" > </p></p><p id= "Footer" class= "footer" >        <p class= "Aline DoubleLine" > Overview </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. Go to the big box and write a line of horizontal lines, with a P Aline class implementation, HTML see above

Here if your editor supports Emmet, write a p.aline*42, there will be 42 lines of the same p appears. Then use the CSS border property to draw a line of lines out.

. 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. Put a p on the back of the left and right two large boxes, clear the float, and place the outline section.

<p id= "main" class= "main le" >        <p class= "aline" > Hints </p>        <p class= "Aline" ></p> </p><p id= "Sider" class= "main ri" >        <p class= "Aline" > Notes </p>        <p class= "Aline" > </p></p><p id= "Footer" class= "footer" >        <p class= "Aline DoubleLine" > Overview </p>        <p class= "Aline" ></p></p>

, the first line of the inside, the next part of the 5R note is separated by a solid line

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