[TIL #3] List

5349 ワード
TIL CSS テキストリンク
一般的なulliリストをユニークに飾ります.
<style>
ul {
    list-style: none;
    border-left: 3px solid black;
   }
</style>
liを包むulラベルの左側の枠線を追加します.
「小円」の代わりに「縦線」を用いて設計した.
  • コンテンツが枠線から離れているのは、ブラウザがulラベルのpaddingを強制的に付与しているからです.
  • ブラウザでは、デフォルトでは、余白、paddingなどが指定されます.
    • <style>
ul {
    list-style: none;
    border-left: 3px solid black;
    padding-left: 7px;
   }
</style>
    左のパッドで間隔を調整してみます.
    以前より明らかに減ったような気がします.
  • 今回は上下目次の間で少し間隔を置きます.
    • <style>
ul {
    list-style: none;
    border-left: 3px solid black;
    padding-left: 7px;
   }
li {
    padding-bottom: 15px;
   }
</style>
    Li枠がないので、余白と塗りつぶしで
    どんな財産を使っても構わない!
  • はすべてのliを隔てており、反応底部から線が溢れていることが分かった.
  • JavaScript DOMオブジェクトから学習したchild概念は,最後のliの底辺を取り除く.
    <style>
ul {
    list-style: none;
    border-left: 3px solid black;
    padding-left: 7px;
   }
li {
    padding-bottom: 15px;
   }
li:last-child {
    padding-bottom: 0;
   }
</style>
    最後のリスト(last-child)を使用して縮小できます.
    • 同期呼び出しと非同期呼び出し
    Exception in thread "main"java.lang.OutOfMemoryError: GC overhead limit exceeded