İlk başta anlatıcağız. Sonra farklı renklerde yaparız. Ne dersiniz başlayalım mı? Başlamadan önce şunu söyleyeyim. Yazı font'u bizim siteye göre uyarlı. Kendi yazı stilinize göre uyarlicaktır. Güzel bir font bulursanız kullanabilirsiniz.
İlk olarak html kodlarımızı yazalım.
<div id="teknomenu">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">HAKKIMDA</a></li>
<li><a href="#">İLETİŞİM</a></li>
<li><a href="#">ZİYARETÇİ DEFTERİ</a></li>
</ul>
</div>
Html kodlarımızı bitirdikten sonra css kodlarımızı yazalım.<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">HAKKIMDA</a></li>
<li><a href="#">İLETİŞİM</a></li>
<li><a href="#">ZİYARETÇİ DEFTERİ</a></li>
</ul>
</div>
<style>
#teknomenu {
width: 100%; /* Genişliği web sitenize uygun olsun diye 100% yaptım, değiştirebilirsiniz. */
height: 40px;
line-height: 40px;
margin: auto;
background: #222;
}
#teknomenu ul {
list-style: none;
margin: 0px;
padding: 0px;
}
#teknomenu ul li a {
color: #fff;
float: left;
line-height: 40px;
height: 40px;
width: auto;
padding-left: 10px;
padding-right: 10px;
transition: 0.5s;
}
#teknomenu ul li a:hover {
background: #fff;
color: #222;
}
</style>
Kodlarımız bu kadar şimdi kırmızı ile yazılan yerleri değiştirerek neler yapabiliriz? Ben 5 adet örnek koyucağım. Örnekler;#teknomenu {
width: 100%; /* Genişliği web sitenize uygun olsun diye 100% yaptım, değiştirebilirsiniz. */
height: 40px;
line-height: 40px;
margin: auto;
background: #222;
}
#teknomenu ul {
list-style: none;
margin: 0px;
padding: 0px;
}
#teknomenu ul li a {
color: #fff;
float: left;
line-height: 40px;
height: 40px;
width: auto;
padding-left: 10px;
padding-right: 10px;
transition: 0.5s;
}
#teknomenu ul li a:hover {
background: #fff;
color: #222;
}
</style>
0 yorum:
Yorum Gönder