Bu kısımda css yapıları li_still3.css dosyasında tanımlanmış ve html sayfada
<link rel="stylesheet" type="text/css" href="/li_stil3.css">
ile sayfaya bağlanmıştır. Böylece css tekniğiyle liste yapısı oluşturulmuştur.
li_still3.css Kodu:
|
| Alıntı: |
/* Liste Kullanarak Menü Oluşturma*/
ol {
list-style-type:none;
margin:0px;
padding:0px;
width:130px;
}
ol li {
border-bottom:1px solid white;
}
ol li a {
display:block;
color:darkblue;
text-decoration:none;
text-indent:4px;
backgroud:lightblue;
}
ol li a:hover{
color:white;
background-color:gray;
}
ol li ol {
margin-left:10px;
}
Sayfa Kodu:
<html>
<head>
<link rel="stylesheet" type="text/css" href="li_stil3.css">
</head>
<body>
<ol>
<li><a href="/">CSS</a>
<ol>
<li><a href="/">Seçiciler</a></li>
<li><a href="/">Metin Özellikleri</a></li>
<li><a href="/">Liste Özellikleri</a></li>
<li><a href="/">Kutu Modeli</a></li>
</ol>
</li>
<li><a href="/">Javascript</a>
<ol>
<li><a href="/">Giriş</a></li>
<li><a href="/">Operatörler</a></li>
<li><a href="/">Diziler</a></li>
<li><a href="/">Koşul İfadeleri</a></li>
</ol>
</li>
<li><a href="/">HTML</a>
<ol>
<li><a href="/">Etiketler</a></li>
<li><a href="/">Formlar</a></li>
</ol>
</li>
<li><a href="/">DHTML</a></li>
<li><a href="/">PHP</a></li>
</ol>
</body>
</html>
|