Verwenden Sie HTML und CSS, um eine Vorlage für Cornell-Notizen zu implementieren

In diesem Artikel werden hauptsächlich relevante Informationen zur Verwendung von HTML und CSS zur Implementierung der Cornell Notes (5R Notes)-Vorlage vorgestellt

Origin

Die Leute sagen, dass die Cornell-Notizmethode sehr nützlich ist, um der Vergessenskurve zu widerstehen und Ihre Notizen mit halbiertem Aufwand effektiver zu 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 verwendet werden, warum nicht selbst eine schreiben

Implementierung

1 Papierformat, Breite 21 cm, Höhe 29,7 cm

<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. Fügen Sie zwei schwebende Ps zu einem P von der Größe eines A4-Papiers hinzu, eines auf der linken Seite, das 29 % einnimmt des Platzes, einer auf der rechten Seite, der 68 % des Platzes einnimmt

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

Verwenden Sie einen CSS-Rahmen, um die beiden Spalten zu trennen

.main {height: 75%; overflow: hidden;}

    .le { width: 28.99999%; border-right: double 3px #666; float: left; }
    .ri { width: 69.99999%; float: right; }

3. Schreiben Sie horizontale Linien Zeile für Zeile in das große Feld, verwenden Sie zur Implementierung eine P-Aline-Klasse, siehe HTML oben

Hier schreiben Sie A, wenn Ihr Editor Emmet unterstützt p.aline*42, es werden 42 Zeilen desselben p angezeigt. Verwenden Sie dann das Border-Attribut von CSS, um Linien nacheinander zu zeichnen.

.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. Setzen Sie dann ein p hinter die beiden großen Kästchen links und rechts, löschen Sie die Floats und platzieren Sie den Zusammenfassungsteil.

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

, die erste Zeile darin, verwenden Sie eine durchgezogene Linie, um den unteren Teil der 5R-Notenstruktur zu

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

zu trennen

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

HTML5 und CSS3 Erkennen Sie den Umschalteffekt intelligenter Animationen

So verwenden Sie html2canvas, um HTML-Code in Bilder umzuwandeln

Das obige ist der detaillierte Inhalt vonVerwenden Sie HTML und CSS, um eine Vorlage für Cornell-Notizen zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!