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

この記事では、HTML と CSS を使用して Cornell Notes (5R Notes) テンプレートを実装するための関連情報を主に紹介します。必要な方は、HTML と CSS のアイデアに基づいて、自分のアイデアをよりよく完成させることができれば幸いです。 css を使用して Cornell Notes プロジェクトを実装します。

由来

コーネル大学のノート取り法は、忘却曲線に抵抗し、半分の労力でノートをより効果的にすることができるので、非常に便利だと言われています。興味のある学生は Baidu で検索できます。

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

realization

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

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

関連する推奨事項:

html と CSS 制作 QQ ペンギン チュートリアル

html と CSS と JavaScript の小さな例(写真)

HTML、CSS、JavaScriptのフロントエンド命名規則の詳細な説明

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