ホームページ > 記事 > ウェブフロントエンド > 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()メソッドの使い方
以上がHTML と CSS を使用して Cornell ノートを実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。