|
Merhabalar,
Bu dersimizde çok basit bir sekilde CSS kullanarak web sayfalarimiz için sol menü tasarlayacagiz.Öncelikle herhangi bir html editörü kullanarak yeni html sayfasi olusturmamiz gerekiyor.Olusturdugumuz sayfanin body tagindan sonra asagidaki html kodlarini yazarak menümüzü olusturalim.
CSS kodlarini sayfamiza eklemeden önce menümüzün görüntüsü asagidaki gibi olacaktir
CSS yazmaya geçmeden önce sizlere olusturdugumuz menü hakkinda bilgi vermek istiyorum.Burada menüden dedigimiz olay aslinda 7 satir ve 2 sütundan olusan bir adet tablodan ibarettir.Burada tablomuzun her tr tagina id olarak “row” ismini verdik.Ayrica tablomuzun birinci sütunundaki td taglarina da id olarak “column” ismini verdik.Tablomuzun ikinci sütunundaki bütün td taglarini da a tagi ile linke çevirdik.Simdi sayfamizin head taglari arasina asagidaki CSS kodlarini ekleyelim.
Önelikle table tagi için yazdigimiz özelliklerden bahsedelim.Burada tablomuzun genisligini yüksekligini içindeki yazinin fontunu ve rengini belirledik.Simdi de tablomuzun ilk sütunundaki td taglari için yazmis oldugumuz #column sitilini inceleyelim.Burada sütunumuzun genislik,sag kenar sitilini ve genisligini belirledik.#column içine yazdigimiz kodlar <td id=”column”></td> için geçerli olacaktir.O yüzden sayfamizdaki ortak özelliklere sahip elementlere bu sekilde idler vererek sitil tanimlamalari yapabiliriz.Ayni sekilde bütün satirlar için tanimladigimiz #row sitilinde ise tablomuzdaki satirlarin arka plan rengini belirlemis olduk. Ayrica daha da ileriye giderek #row sitiline hover özelligini de ekleyerek tr tagina faremizin imlecini getirdigimizde arka plan renginin ve fare imlecinin degismesini saglayabiliriz.Sayfamizi çalistirdiktan sonra ekranimizin görüntüsü asagidaki sekilde olacaktir.
Iyi çalismalar...
|