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?

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

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