CSS ile Üye Giriş Paneli Tasarımı

  • 29.839

Bu derste CSS ile bir üye giriş paneli tasarımı yapalım.

Bu dersimizde CSS ile tasarlanmış sade ve hoş bir üye paneli yapımını göstereceğim.

Bitmiş hali resimdeki gibidir. CSS kodlarının yanında açıklama vardır.

Aşağıdaki kodları kullanarak yaptığımızda ortaya çıkan sonuç şu şekilde olacaktır:



Boş bir HTML sayfasına aşağıdaki kodları yazın. Bunlar bizim input ve butonlarımızın sayfaya yerleştirilmesini sağlayacaktır.

HTML Kodları:


<div class="genel" >  

<div class="baslik" > Üye Paneli</div>

    <form >

<p>Kullanıcı adı :      <input type="text"  name="ad"  />    </p>

<p>Şifre :        <input  style="margin-left:42px; " type="password" name="sifre" />     </p>

 <p> <input class="buton" type="submit" value="Giriş"  />   </p>

 <a href=""   >Kayıt Ol </a>

 </form> 

 </div>



Şimdi de yukarıda eklediklerimizin CSS biçimlendirmesini yapalım.

CSS Kodları (Açıklama yanlarındadır)


.genel

{

border:1px solid #d3d3d3;              // Panele kenarlık ekledik

padding:10px;                         //iç boşluk

width:250px;                          // panel uzunluğu 

height:130px;                          // panel yüksekliği  

background:#eee;                      // Arkaplan rengi

font:12px Arial, Tahoma, Verdana;;

}



.baslik

{

background:#333;  

color:#fff; 

padding:5px;

font-weight:bold;  



}



.buton

{

float:right;                      // Butonu sağa yasladık

margin-right:25px; 

border:1px solid #666;          //kenarlık

padding:2px 5px;                   //iç boşluk

background:cornflowerblue;      //Arkaplan rengi

color:#fff;                      //yazı rengi

font-weight:bold;               // kalın font

}



Kolay gelsin.
  • Etiketler;
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

Çok teşekkürler.
Kardeş Anlatım Tarzına Bayıldım... Nedir Kardeş bu ya böle anlatım felan yok bir php'ci olarak yorumluyorum seni kardeş. başlangıçta diyorsunuzki bu dersimizde ama kodları veriyorsunuz bir anlatım yok böle bir dersi biz anlatsak bizi bu meslekte barındırmazlar. az düenle hocam.

Yukarı Git