Using HTML and CSS to implement the Cornell notes

This time to bring you the use of HTML and CSS to implement the Cornell notes, the use of HTML and CSS to implement the Cornell notes note what, the following is the actual case, take a look.

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

Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!

Recommended reading:

How to use the Calc () method of CSS3

A detailed description of CSS positioning properties