In diesem Artikel werden hauptsächlich relevante Informationen zur Verwendung von HTML und CSS zur Implementierung der Cornell Notes-Vorlage (5R Notes) vorgestellt. Freunde, die sie benötigen, können darauf zurückgreifen. Ich hoffe, Sie können bessere Ideen zur Implementierung der Cornell Notes-Vorlage erhalten HTML und CSS. Vervollständigen Sie Ihre eigenen Projekte.
Origin
Die Leute sagen, dass die Cornell-Notizmethode sehr nützlich ist. Sie kann der Vergessenskurve widerstehen und Ihre Notizen mit halbem Aufwand effektiver machen .
Es gibt viele vorgefertigte Vorlagen im Internet. Nach dem Herunterladen scheint es bequemer zu sein, darauf Englisch zu schreiben. Der Zeilenabstand ist sehr klein und es gibt eine URL. Ich bin nicht sehr glücklich, das sagen zu können. Später dachte ich darüber nach, eine Vorlage in Word oder Excel zu erstellen, aber dann war ich überrascht, dass ich nicht eine Zeile einer Tabelle so einstellen konnte, dass sie 70 % der gesamten Tabelle ausmacht, also gab ich schließlich auf. Dann fiel mir ein, dass cm das kann Als Einheit in CSS verwenden. Warum nicht selbst eines schreiben?
2. Fügen Sie zwei schwebende Ps zu einem P von der Größe eines A4-Papiers hinzu, eines auf der linken Seite, das 29 % des Platzes einnimmt, und eines auf der rechten Seite, das 68 % des Platzes einnimmt
<p id="abody">
</p>
#abody { width: 21cm; height: 29.7cm; margin: 0 auto; overflow: hidden; padding: 1.5cm 1.2cm 1.2cm 2.5cm;}<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>
Wenn Ihr Editor emmet unterstützt, schreiben Sie hier p.aline*42, und 42 Zeilen desselben p werden angezeigt. Verwenden Sie dann das Border-Attribut von CSS, um Linien nacheinander zu zeichnen.
.main {height: 75%; overflow: hidden;}
.le { width: 28.99999%; border-right: double 3px #666; float: left; }
.ri { width: 69.99999%; float: right; }.aline { height: 0.9cm; border-bottom: 1px; border-bottom-style: dashed; border-bottom-color: #999;
margin-right: 8px; color: #eee; line-height: 0.9cm;}<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>
.footer {clear: both; overflow: hidden;}
.doubleline { border-top: double 3px #666;}Kleine Beispiele für HTML, CSS und JavaScript (Bild)
Über HTML, CSS und Namenskonventionen für JavaScript-Frontends Detaillierte Erklärung
Das obige ist der detaillierte Inhalt vonImplementieren Sie die Cornell Notes-Vorlage mit HTML und CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
