Using HTML and CSS to implement the Cornell note template

Source: Internet
Author: User
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;}
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.