desain daftar isi dengan html dan css
Membuat / menampilkan menu daftar isi seperti gambar berikut ini menggunakan CSS
Cara yang digunakan adalah, dengan mengatur <li> yang ada di CSS.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
.menu {
width: 500px;
list-style: none;
margin: 0 0 2em;
padding: 0;
font: 150%/100% Arial, Helvetica, sans-serif;
}
.menu li {
clear: both;
margin: 0;
padding: 0 0 1.8em 0;
position: relative;
border-bottom: dotted 2px #999;
list-style:none;
}
.menu strong {
background: #fff;
padding: 0 10px 0 0;
font-weight: normal;
position: absolute;
bottom: -.3em;
left: 0;
}
.menu em {
background: #fff;
padding: 0 0 0 5px;
font: 110%/100% Georgia, "Times New Roman", Times, serif;
position: absolute;
bottom: -.2em;
right: 0;
}
.menu sup {
font-size: 60%;
color: #666;
margin-left: 3px;
}
</style>
</head>
<body>
<div class="menu">
<p align="center">Daftar Isi</p>
<ul>
<li><strong>Photosop</strong> <em>01<sup>1</sup></em></li>
<li><strong>CSS Design</strong> <em>20<sup>2</sup></em></li>
<li><strong>Website Design</strong> <em>200<sup>3</sup></em></li>
<li><strong>Wordpress Installation </strong> <em>250<sup>4</sup></em></li>
<li><strong>Joomla Installation </strong> <em>350<sup>5</sup></em></li>
<li><strong>CMS</strong> <em>250<sup>95</sup></em></li>
</ul>
</div>
</body>
</html>
Selamat mencoba
If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.
These really helped me to build my homepage, I can really appreciated if people take some time and write a usefull tutorial.