728x90 AdSpace

  • Latest News

    12/10/2011

    Html/Css ile özet haber listesi yapalım


    Web sitelerinde kullanabileceğimiz basit bir haber liste bölümü yapalım. Gerekli malzemeler: stil.css, index.html ve ufak haber resimleri(stil dosyasında resimleri otomatik olarak boyutlandıracağız fakat hızlı yüklenmesi için ufak resimleri seçmek daha mantıklı)


    aşağıdaki araç ile kodun çalışır biçimine Result sekmesinden görebilirsiniz. Html Css kodları da mevcut...
     
    öncelikle standart html içeriği aşağıdaki gibi olmalıdır.
    index.html
     <html>
     <head>
     <title>Kirli Adam Lab.</title>
     <link rel="stylesheet" href="stil.css" type="text/css">
     </head>

     <body>

    <!-- Site kodları buraya gelecek-->

     </body>
     </html>


    Şimdi liste elemanlarımızı yukarıda belirttiğim yere ekleyelim:

    <div style="width: 350px; margin: 0 auto 0 auto;">

    <h1>Son Eklenenler</h1>

    <ul  style="border-top: 1px solid #ddd;">
        <li><a href="#" class="adres">
        <img class="haber" src="http://bit.ly/pR1Ewz"><span class="baslik">Haber Başlık</span>
        <span class="yazi">Haber kısa açıklaması buraya gelecek...</span>    </a></li>
      
        <li><a href="#" class="adres">
        <img class="haber" src="http://bit.ly/pR1Ewz"><span class="baslik">Haber Başlık</span>
        <span class="yazi">Haber kısa açıklaması buraya gelecek...</span>    </a></li>
      
      
        <li><a href="#" class="adres">
        <img class="haber" src="http://bit.ly/pR1Ewz"><span class="baslik">Haber Başlık</span>
        <span class="yazi">Haber kısa  buraya gelecek. </span>    </a></li>
      
        </ul></div>
    Şimdi css kodlarını stil.css dosyasına ekleyelim

    body {color: #777; background: #f0f0f0;}
     
     h1{text-align:center;  font-family:Tahoma;}
     
     a:link, a:active {outline: none;}
     
     a.adres:link, a.adres:visited {
         border-bottom: 1px solid #ddd;
         display: block;
         color: #ccc;
         padding: 5px 5px 3px 0;
         text-decoration: none;
         margin: 0;}
     
     img.haber {
     border:none;
     width:35px;  height:35px;
     padding:0 5px;  float:left;}
     
     a.adres:hover {background-color: #fff;    color: #fff;}
     
     span.baslik {
         font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
         color: #333;
         font-weight: bold;
         font-size: 13px;
         display: block;
     }
     
     span.yazi {
         font-family: Arial, Helvetica, sans-serif;
         font-size: 15px;
         color: #777;
         text-align: left;}
     
     ul {    list-style: none;
         padding: 0 0 20px 0;
         margin: 0;}
     
     p {    text-align: center;
         font-family: Arial, Helvetica, sans-serif;}
    Kaynak Dosya: http://www.multiupload.com/ORU47PQNUD

    bu içerik kirliadam.blogspot.com tarafından hazırlanmıştır. kaynak belirtmeden paylaşılması ayıptır...

    Mehmet Ali

    Grafik tasarım konusunda bir şeyler öğrenmekte, öğrenmekte olduklarını paylaşmakta.

    Website: Mhmtalizm

    • Blogger Yorumları
    • Facebook Yorumları

    1 yorum:

    1. sitenizdeki yazılar ve makaleleri sürekli takip ediyorum, Html web tasarım olarak işlerinizde kolaylıklar dilerim.

      YanıtlaSil

    Item Reviewed: Html/Css ile özet haber listesi yapalım Rating: 5 Reviewed By: Kirli Adam
    Scroll to Top