Ada yang butuh HTML dan CSS untuk bikin daftar isi ? Berikut ini salah satu contohnya. HTML <div style="font-size: 150%; lett...
Ada yang butuh HTML dan CSS untuk bikin daftar isi? Berikut ini salah satu contohnya.
HTML
<div style="font-size: 150%; letter-spacing: .1em; margin-bottom: 10px; margin-right: -.1em; text-align: center;">
DAFTAR ISI</div>
<ul class="list" style="padding-left: 180px;">
<li style="margin: 0 0 .6em 0;">PENDAHULUAN<span class="number">ix</span></li>
<li style="margin: 0 0 .5em 0;"><span style="padding-left: .6em;">1. Latar Belakang</span><span class="number">ix</span></li>
<li style="margin: 0 0 .5em 0;"><span style="padding-left: .6em;">2. Tujuan</span><span class="number">xii</span></li>
<li style="margin: 0 0 .5em 0;"><span style="padding-left: .6em;">3. Metode</span><span class="number">xx</span></li>
<li style="margin: 0 0 .5em 0;"><span style="padding-left: .6em;">4. Hasil</span><span class="number">xxvi</span></li>
<li style="margin: 0 0 .5em 0;"><span style="padding-left: .6em;">5. Pembahasan</span><span class="number">xxx</span></li>
<li style="margin: 0 0 1.5em 0;"><span style="padding-left: .6em;">6. Diskusi</span><span class="number">xliii</span></li>
<li style="margin: 0 0 .5em 0;">DAFTAR PUSTAKA<span class="number">1</span></li>
<li style="margin: 0 0 .5em 0;">INDEKS<span class="number">297</span></li>
</ul>
CSS
.list li { position:relative; overflow:hidden; width:330px; } .list li:after { font-family: Times New Roman; font-size: 120%; content:"..............."; text-indent: -1px; display:block; letter-spacing:34px; position:absolute; left:0px; bottom:0px; z-index:-1; font-weight:bold; } .list li span { display:inline; background-color:#FFF; padding-right:5px; } .list li .number { float:right; font-weight:bold; padding-left:5px; }
wah blognya jarang update mas
ReplyDeletepadahal bagus bagus artikele
Iya nich, lagi sibuk di sebelah :)
Delete