HTML と CSS を使用してコーネル ノートのテンプレートを実装する

この記事では、HTML と CSS を使用してコーネル ノート作成 (5R ノート) テンプレートを実装することに関する関連情報を主に紹介します。必要な友人はそれを参照してください

起源

人々はコーネルノートについてこう言っています。取得方法は非常に優れており、使いやすく、忘却曲線に強いので、興味のある学生は半分の労力でメモをより効果的にすることができます。

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

realization

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

<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 クラスを使用します。上記の HTML を参照してください

エディターが emmet をサポートしている場合は、p.aline を記述します*42 、同じpが42行出現することになります。次に CSS の border 属性を使用して 1 本ずつ線を描画します。

.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を置き、フロートをクリアして、概要部分を置きます。

<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 サイトにご注意ください。

関連する推奨事項:

HTML5 と CSS3 スマートアニメーションの切り替え効果を実現

html2canvasを使ってHTMLコードを画像に変換する方法

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