HTML と CSS を使用して Cornell ノートを実装する

今回は、HTML と CSS を使用して Cornell ノートを実装する際の注意事項をいくつか紹介します。

起源

コーネル大学のノート取り法は、忘却曲線に抵抗し、半分の労力でノートをより効果的にすることができると人々は言います。

インターネットには既製のテンプレートがたくさんありますが、それらをダウンロードした後、そこに英語を書く方が便利だと思われます。行間は非常に狭く、そこにURLが記載されています。そう言えて嬉しいです。その後、ワードやエクセルでテンプレートを作ろうと思ったのですが、表の1行を全体の70％に設定することができないことに驚き、結局諦めたのですが、そのときcmでできることを思い出しました。 css の単位として使用するには、p

実現

1を使用してください。まず、pを幅21cm、高さ29.7cmに設定します

<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。 . A4 を指定します。紙と同じくらいの大きさの p に 2 つの浮動 p を追加します。1 つは左側に、スペースの 29% を占め、もう 1 つは右側に、スペースの 68% を占めます

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

CSS の境界線を使用して 2 つの列を区切ります。

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

3. 大きなボックスに移動します。内部に水平線を 1 行ずつ記述し、p の aline クラスを使用して実装します。

エディター

が emmet をサポートしている場合は、p.aline*42 を記述します。同じ p が 42 行表示されます。次にCSSのborder属性を使って一本一本線を引いていきます。

.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. 次に、左右の 2 つの大きなボックスの後ろに p を付け、float を消去して、概要部分を置きます。

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

、内側の最初の行、実線を使用して 5R ノート構造の下部を区切ります

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

この記事の事例を読んだ後は、この方法を習得したと思います。さらにエキサイティングな内容については、 php 中国語 Web サイトの他の関連記事にも注目してください。

推奨読書:

CSS3のcalc()メソッドの使い方

CSSの配置プロパティの詳細な説明

以上がHTML と CSS を使用して Cornell ノートを実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。