Implémenter les notes de Cornell en utilisant HTML et CSS

Cette fois, je vais vous présenter l'utilisation du html et du css pour implémenter les notes de Cornell. Quelles sont les précautions concernant l'utilisation du html et du css pour implémenter les notes de Cornell. Voici des cas pratiques, jetons un coup d'œil.

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, les étudiants intéressés peuvent effectuer une recherche sur Baidu.

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 vous-même, utilisez simplement p

Implémentation

1. papier La taille est de 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 aussi grand qu'un papier A4, un à gauche, occupant 29% de l'espace, et un à droite , occupant 29% de l'espace. 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 les 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 les lignes horizontales une par une dans le grand box, et utilisez la classe aline d'un p pour l'implémenter. Voir le code HTML ci-dessus

Ici, si votre éditeur prend en charge emmet, écrivez un p.aline*42 et 42 lignes du même. p apparaîtra. 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 un trait plein pour séparer la partie inférieure de la structure du billet 5R

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

Croyez-le ou non Après avoir lu le cas dans cet article, vous maîtrisez la méthode. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !

Lecture recommandée :

Comment utiliser la méthode calc() de CSS3

Explication détaillée des attributs de positionnement CSS

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!