1. Anasayfa
  2. Css

Css Dersleri – Div Kullanım Örneği Site Şablonu 1

Css Dersleri – Div Kullanım Örneği Site Şablonu 1
1

Css Derslerimize Div uygulamaları ile devam ediyoruz bizden istenen aşağıda verilmiş olan şablonun css ve html kodlarını oluşturmak.
sitepngolcu
Dosya Kodlarımız aşağıda..:
index.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>www.bilisimogretmeni.com Div Uygulaması</title>
<link rel="stylesheet" type="text/css" href="css/StyleSheet1.css" />
</head>
<body>
    <div id="genel">
        <div id="header">
            <div id="banner"><h2>LOGO</h2></div>
        </div>
        <div id="menu">Anasyafa|Hakkımızda|İletişim|</div>
        <div id="orta">
            <div id="ortasol"><h3>Sol İçerik</h3></div>
            <div id="ortasag"><h3>Sağ içerik</h3></div>
        </div>
        <div id="temizle"></div>
        <div id="alt">Her Hakkı Saklıdır. www.bilisimogretmeni.com</div>
    </div>

</body>
</html>

stil dosyası kodlarımız

/*www.bilisimogretmeni.com Div Uygulaması*/
body {
    font-family:'Century Gothic'; 
    color:white;
}
#genel
{
     width:960px; 
     margin:0 auto; 
     padding:10px;
     background-color:aqua;
}
#header {
    width:940px;
    background-color:azure;
    height:100px;
    padding:10px;
}
#banner {
    padding:20px 0 0 20px;
    height:80px;
    width:350px;
    background-color:brown;   
}
#menu {
    height:40px;
    width:930px;
    background-color:brown;
    margin:10px 0;
    padding:10px 0 0 30px;
}
#orta {
     width:940px; 
     height:430px;
     margin:0 auto; 
     padding:10px;
     background-color:azure;
}
#ortasol {
    height:430px;
    width:330px;
    background-color:brown;   
    float:left;
    padding-left:20px;
}
#ortasag {
    height:430px;
    width:560px;
    background-color:brown;   
    float:left;
    margin:0 0 0 10px;
    padding-left:20px;
}
#temizle {
    clear:both;
}
#alt {
    height:50px;
    width:960px;
    background-color:brown;
    margin:10px 0;
    text-align:center;
}

[wp-js-fiddle url=”http://jsfiddle.net/BilisimOgretmeni/yb6zuL9a/” style=”width:100%; height:400px; border:solid #4173A0 1px;”]

Bu İçeriğe Tepkin Ne Oldu?
  • 14
    ba_ar_l_
    Başarılı
  • 2
    gayet_yi
    Gayet İyi
  • 5
    te_ekk_rler
    Teşekkürler
  • 8
    anlamad_m
    Anlamadım
  • 6
    yetersiz
    Yetersiz
İlginizi Çekebilir
Subscribe
Bildir
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

1 Yorum
Inline Feedbacks
View all comments
gaziligazilidurali

konular güzel anlatılmış ama siteyi neden soluk yaptınız
siteye girince okuması zor oluyor
ve giren kişi zorlanınca hemen çıkmak istiyor
virüs bile zanneden olabilir