Implémenter le modèle de note Cornell en utilisant HTML et CSS

Cet article présente principalement les informations pertinentes sur l'utilisation du HTML et du CSS pour implémenter le modèle Cornell Notes (5R Notes). Les amis qui en ont besoin peuvent s'y référer. J'espère que vous pourrez avoir de meilleures idées sur la mise en œuvre du modèle Cornell Notes basé sur. html et css. Réalisez vos propres projets.

Origine

Les gens disent que la méthode de prise de notes Cornell est très utile. Elle peut résister à la courbe d'oubli et rendre vos notes plus efficaces avec la moitié de l'effort. .

Il existe de nombreux modèles prêts à l'emploi sur Internet. Après les avoir téléchargés, il semble qu'il soit plus pratique d'écrire en anglais dessus. L'interligne est très petit et il y a une URL dessus. Je ne suis pas très heureux de dire cela. Plus tard, j'ai pensé à créer un modèle dans Word ou Excel, mais j'ai ensuite été surpris de ne pas pouvoir définir une ligne d'un tableau pour qu'elle représente 70 % du tableau total, alors j'ai finalement abandonné. Puis je me suis souvenu que cm pouvait. être utilisé comme unité en CSS, pourquoi ne pas en écrire un par vous-même, utilisez simplement p

Implémentation

1 Définissez d'abord un p au format du papier A4, 21 cm de large et 29,7 cm de haut.

<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. Ajoutez deux p flottants à un p grand comme du papier A4, un à gauche, occupant 29% de l'espace, et un à droite, occupant 68% de l'espace

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

Utilisez la bordure CSS pour séparer deux colonnes

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

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

3. Écrivez des lignes horizontales ligne par ligne dans la grande boîte et utilisez la classe aline d'un p pour l'implémenter.

Ici si vous Si votre éditeur supporte emmet, écrivez p.aline*42, et 42 lignes du même p apparaîtront. Utilisez ensuite l'attribut border du CSS pour tracer les lignes une par une.

.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. Mettez ensuite un p derrière les deux grandes cases à gauche et à droite, dégagez le flotteur, et mettez la partie récapitulative.

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

, la première ligne à l'intérieur, utilisez une ligne continue pour séparer la partie inférieure de la structure du billet 5R de

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

Recommandations associées :

html et tutoriel sur la création de QQ Penguin avec CSS

Petits exemples de HTML, CSS et JavaScript (photo)

À propos de HTML, CSS et Conventions de dénomination frontale JavaScript Explication détaillée

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!