1. Ana Sayfa
  2. Css
  3. Css Dersleri – Div Kullanım Örneği Site Şablonu 1
yetersiz

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

sitepngolcu
2

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;”]

Yorum Yap

1
Kimler Neler Demiş?

avatar
1 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
gaziligazilidurali Recent comment authors

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

  Subscribe  
Bildir
gaziligazilidurali
Ziyaretçi

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