Html - Css Uygulama

Bu derste ogrendiklerimizden yararlanarak bir uygulama yapacagiz. bu sekilde id,sinif,liste,css ... bilgimizi tazelemis olacagiz.
Bu linkteki sayfayi once biraz inceleyin,cunku bu derste bu sayfa nasil yapildi adim adim anlatilacak. Html-Css Ornek Sayfa

Asagida sayfanin kodlari(css olmadan) yer aliyor.
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Html-Css Uygulama</title>
  <style>

  </style>
  </head>
  <body>
     <!--Ust Menu Alani-->
      <div id="menu">
          <ul>
            <li><a href="#sinavlar">Sinavlar</a></li>
            <li><a href="#dersler">Dersler</a></li>
            <li><a href="#testler">Testler</a></li>
          </ul>
      </div>
      <!--Ust Menu Alani Bitti-->

<!-- Icerik -->
<div id="sayfaicerigi">
  <div id="sinavlar" class="bolum">
    <h1 class="baslik">Sinavlar</h1>
    <strong><br></strong>
  </div>

  <div id="dersler" class="bolum">
    <h1 class="baslik">Dersler</h1>
    <strong>Dersler Bolumu<br></strong>
  </div>

  <div id="testler" class="bolum">
    <h1 class="baslik">Testler</h1>
    <strong>Testler Bolumu<br></strong>
  </div>

</div>
<!-- Icerik Son -->

<!-- Footer -->
<div id="footer">
  © 2017  All Rights Reserved
</div>
<!-- Footer son-->
  </body>
</html>
Linklerdeki href degerlerinin bolum id'lerine denk geldigini gordunuz mu?
Her bolum ,bolum isminde sinifa sahip gordunuz mu?

Ust Menu ve Css-Kodlari

<div id="menu">
          <ul>
            <li><a href="#sinavlar">Sinavlar</a></li>
            <li><a href="#dersler">Dersler</a></li>
            <li><a href="#testler">Testler</a></li>
          </ul>
</div>
Asagdaki css kodu ile
"Tum ogelerin(yildiz secicisi ile ulastik hepsine) padding,margin degeri en basta 0px olsun" istedik.
    
     *{padding: 0px;margin: 0px;}
    
  
    
      #menu{
        width: 100%;    /*Oldukca esnek bir deger ekran boyutu ne olursa olsun tamamini kullanacak*/
        background-color: rgba(0, 0, 0, 0.7);
      }
    
  
    
      #menu ul li{
        /*Varsayilan olarak li'ler block elementi fakat burda inline-block yaptik
        inline elementler gibi yanyana dizilsin fakat block elementleri gibi de ozellikler atayalim*/
        display: inline-block;
      }
    
  
    
      #menu ul li a{
        /*inline element block elementi oldu fakat tum satiri kaplamayacak,
        sadece icinde bulundugu li elementinin tum genisligini alabilecek*/

        display: block;
        padding: 15px;
        text-decoration: none;
        color: rgba(255,255, 255, 0.9);
        font-size: 20px;
      }
      #menu ul li a:hover{
        background-color: rgba(0, 0, 0, 0.9);/*linkler ustune imlec gelince uygulanacak css*/
      }
    
  

Sayfa icerigi ve Css Kodlari

    
      #sayfaicerigi{
        padding: 20px 15px 30px 15px;/*saat yonunde (ust-sag-alt-sol)*/
      }

      .bolum{
        padding: 20px;
        background-color: rgba(0, 0, 0, 0.07);
        font-size: 18px;
        text-align: justify;

        /*Bolumler icin text yazmadik linklerin etkisini gormek icin
        bu kisimlara yukseklik verelim*/
        height: 600px;
      }

      .baslik{
        text-align: center;
        background-color: rgba(0, 200, 0, 0.2);
        padding:5px 20px;/*ust-alt=5 ve sag-sol=20 karsilikli kenarlari dusunun*/
        margin-bottom: 20px;
        color: rgba(0, 0, 0, 0.8);
        border-bottom:1px solid rgba(0,0,0,.2);
      }

      /*Her bolum icin ayri arkaplan rengi verelim*/
      #sinavlar{background-color: rgba(250,0,0,.2);}
      #dersler{background-color: rgba(0,250,0,.2);}
      #testler{background-color: rgba(0,0,250,.2);}
      #footer{
        text-align: center;
        background-color: rgba(0, 0, 0,.7);
        color:white;
        padding: 20px;
      }
    
  

Bu derse ait gorus ve onerilerinizi yada farkettigniz hatalari Lutfen bana bildirin!
birbyte.net@gmail.com