ホームページ > 記事 > ウェブフロントエンド > HTML と CSS を使用してコーネル ノート テンプレートを実装する
HTML と CSS を使用してコーネル ノート テンプレートを実装する
- 小云云オリジナル
- 2018-01-08 11:16:292344ブラウズ
この記事では、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 サイトの他の関連記事を参照してください。