CSS Video Teması Arama Bölümlü
Site Genişliği: 960px
Yazı Fontu : arial,sans-serif
Arama Bölümü Eklenmiştir.
Demo Adresi : http://www.csstema.com/demo/video/
Geişmiş Video CSS Tema (65)
Css Tema & Portal & Üst Menü admin | 19 Nis 2009
Restoran (Restaurant) Tema
Site Genişliği: 900px
Yazı Fontu : Arial, Helvetica, sans-serif
Menü : Üst Blog
Restaurant Tema (50)CSS ile Kutu Şeklinde Menü Hazırlamak (display:block)
İlk önce html sayfamızı oluşturup index.html olarak kayıt edin içerisindeki kodlar aşağıda.
HTML:
Bir dosya daha oluşturup menu.css diye kayıt edin.
CSS:
-
body {
-
font-family:tahoma;
-
font-size:12px;
-
}
-
#menu ul
-
{
-
list-style:none
-
}
-
#menu ul li
-
{
-
text-align:center;
-
width:100px;
-
display:block;
-
}
-
#menu ul li a
-
{
-
color:yellow;
-
padding:10px 0px 0px 0px;
-
text-decoration:none;
-
height:30px;
-
background-color:red;
-
display:block;
-
}
-
#menu ul li a:hover
-
{
-
color:red;
-
text-decoration:underline;
-
background-color:yellow;
-
display:block;
-
}
CSS dosyasını oluştururken ilk önce
body ile sayfamızın yazı fontunu ve yazı büyüklüğü ayarladık.İstersek bunu a ve a:hover etiketleri içindede tanımlaya bilirsiniz.
CSS:
-
body {
-
font-family:tahoma;
-
font-size:12px;
-
}
Listemizin önündeki noktaları iptal etmek için ul etiketi içindeki noktaları aşağıdaki kodu yazıyoruz.
CSS:
-
#menu ul
-
{
-
list-style:none
-
}
ul etiketi içindeki li etikerlerini block biçimi alması için display:block; yazıları ortalamak için text-align:center; li nin genişliği içinde width:100px; yazıyoruz.
CSS:
-
#menu ul li
-
-
{
-
text-align:center;
-
width:100px;
-
display:block;
-
}
a yani link etiketimiz içinde renk belirliyoruz site açıldığında linklerin rengi color:yellow; linklerin üste yapışık çıkmaması için padding:10px 0px 0px 0px;
altındaki çizgiyi kaldırmak için text-decoration:none; yüksekliğini belirtmek için height:30px; arkaplan rengi için background-color:red; block şeklini alması için display:block; kullanıyoruz.
CSS:
-
#menu ul li a
-
-
{
-
-
color:yellow;
-
-
padding:10px 0px 0px 0px;
-
-
text-decoration:none;
-
-
height:30px;
-
-
background-color:red;
-
-
display:block;
-
-
}
üstüne geldiğinde renklerin değişmesi için color:red; renkleri değiştiriyoruz text-decoration:underline; yazıların altını çiziyoruz background-color:yellow; arkaplan resmini değiştiriyoruz display:block; şeklinde görünyülüyoruz.
CSS:
-
#menu ul li a:hover
-
{
-
color:red;
-
text-decoration:underline;
-
background-color:yellow;
-
display:block;
-
}
menülerin soldan sağa doğru sıralanması için float:left; kodunu #menu ul li içerisine ekliyoruz.
CSS:
-
#menu ul li
-
-
{
-
text-align:center;
-
width:100px;
-
display:block;
-
float:left;
-
}
menülerin sağdan sola doğru sıralanması için float:right; kodunu #menu ul li içerisine ekliyoruz.
CSS:
-
#menu ul li
-
-
{
-
text-align:center;
-
width:100px;
-
display:block;
-
float:right;
-
}
3 Blog & Css Tema & Sol Menü admin | 13 Nis 2009
CSS Futbol Teması
Site Genişliği: 800 px
Yazı Fontu : Arial, Helvetica, sans-serif
Menü : Sol Blog
3 Blog & Portal & Üst Menü admin | 14 Oca 2009
Jet Css Portal Tema
Site Genişliği: 981px
Yazı Fontu : Arial, Helvetica, sans-serif
Menü : Üst Blog
3 Blog & Portal & Üst Menü admin | 14 Oca 2009
Extreme CSS Portal Tema
Site Genişliği: 960px
Yazı Fontu : Trebuchet MS, Arial, Helvetica, sans-serif
Menü : Üst Blog
3 Blog & Üst Menü admin | 31 Ara 2008
Gökkuşağı CSS Tema
Site Genişliği: 960px
Yazı Fontu : Verdana, Arial, Helvetica, sans-serif
Menü : Üst Blog
3 Blog & Üst Menü admin | 16 Ara 2008
Yeşil Yol CSS Tema
Site Genişliği: 960px
Yazı Fontu : Trebuchet MS, Times New Roman, Times, serif
Menü : Üst Blog
