Implementieren Sie die Cornell Notes-Vorlage mit HTML und CSS

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

Verwenden Sie den CSS-Rahmen, um zwei Spalten zu trennen

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

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

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

4. Setzen Sie dann ein p hinter die beiden großen Kästchen links und rechts, löschen Sie den Float und fügen Sie den Zusammenfassungsteil ein.

.aline { height: 0.9cm; border-bottom: 1px; border-bottom-style: dashed; border-bottom-color: #999; 
            margin-right: 8px; color: #eee; line-height: 0.9cm;}

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

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

Verwandte Empfehlungen zu trennen:

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

HTML und Tutorial zum Erstellen von QQ Penguin mit CSS

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!