Utilisez HTML et CSS pour implémenter un modèle pour les notes Cornell

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 dans le besoin peuvent s'y référer

Origin<.>

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 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, une à 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 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 des lignes horizontales ligne par ligne dans la grande boîte et utilisez une classe p aline pour l'implémenter. Voir le code HTML ci-dessus

Ici si votre éditeur Si le serveur 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 les flotteurs, 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 à

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

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

HTML5 et CSS3 Réalisez l'effet de commutation de l'animation intelligente

Comment utiliser html2canvas pour convertir le code HTML en images

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!