Implementieren Sie Cornell Notes mit HTML und CSS

Dieses Mal werde ich Ihnen die Verwendung von HTML und CSS zum Implementieren von Cornell Notes vorstellen. Was sind die Vorsichtsmaßnahmen bei der Verwendung von HTML und CSS zum Implementieren von Cornell Notes?

Origin

Die Leute sagen, dass die Cornell-Notizmethode sehr nützlich ist, um der Vergessenskurve zu widerstehen und Ihre Notizen effektiver zu machen Mit halbem Aufwand können interessierte Studierende auf Baidu suchen.

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? Papier Die Größe ist 21 cm breit und 29,7 cm hoch

2. Fügen Sie zwei schwebende Ps zu einem P in der Größe von A4-Papier hinzu, eines links, das 29 % des Platzes einnimmt, und eines rechts , nimmt 29 % des Platzes ein. Verwenden Sie einen CSS-Rahmen, um zwei Spalten zu trennen

3. Schreiben Sie horizontale Linien Zeile für Zeile in das große Feld , und verwenden Sie die aline-Klasse eines p, um es zu implementieren.

<p id="abody">
    </p>
#abody { width: 21cm; height: 29.7cm; margin: 0 auto; overflow: hidden; padding: 1.5cm 1.2cm 1.2cm 2.5cm;}

Hier, wenn Ihr

Editor

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

emmet unterstützt, schreiben Sie eine p.aline*42 und 42 Zeilen desselben p wird erscheinen. 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.

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

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

Ob Sie es glauben oder nicht: Nachdem Sie den Fall in diesem Artikel gelesen haben, beherrschen Sie die Methode. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

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

So verwenden Sie die calc()-Methode von CSS3

Detaillierte Erläuterung der CSS-Positionierungsattribute

Das obige ist der detaillierte Inhalt vonImplementieren Sie Cornell Notes mit HTML und CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!