Ana içeriğe atla

HTML İle CSS Çalışması-2

Daha önceki dersimizde de bahsettiğimiz css ile site iskeleti yapımının ikinci örneğini içeriyor bugünkü yazımız bu örnek görsel olarak daha iyi ve şık bir görünüş sunuyor.HTML ile site yapmaya karar verdiyseniz css yapısını iyi öğrenmelisiniz.Çoğu şeyin temeli de css kodlarını içerdiği için şimdi size bazı temel şeyleri göstermek de bize düşer.
Merhaba arkadaşlar bu dersimizde yine güzel bir çalışma yapacağız. Css kodları ile araya hafif tasarımın girdiği bir çalışma olacak.Bunlar 4 adet Css tasarım kodları  ile yapılmış basit tasarımlar.Renklendirmek tabi ki sizin elinizde :)

1.TASARIM


















2.TASARIM













3.TASARIM














4.TASARIM














TÜM KODLAR



















GÖRÜNÜM




Çalışmayı buradan indirebilirsiniz.



KODLAR


<html> <head>
<title>Css tasarım</title>
<style type="text/css">
.tasarim1
{
width:1250px;
height:200px;
background-color:red;
font-size:65px;
color:green;
font-family:New Times Roman;
font-weight:bold;
}
.tasarim2
{
width:1000px;
height:150px;
background-color:blue;
font-size:50px;
color:orange;
font-family:Bradley Hand ITC;
font-weight:bold;
}
.tasarim3
{
width:750px;
height:120px;
background-color:yellow;
font-size:40px;
font-family:Arial;
color:red;
font-weight:bold;
}
.tasarim4
{
width:650px;
height:100px;
background-color:orange;
font-size:30px;
font-family:Verdana;
color:blue;
font-weight:bold;
}
</style>
</head>
<body>
<div class="tasarim1">Tasarım1</div>
<div class="tasarim2">Tasarım2</div>
<div class="tasarim3">Tasarım3</div>
<div class="tasarim4">Tasarım4</div>
</body>
</html>

Yorumlar

Bu blogdaki popüler yayınlar

Algoritma İle 4 işlem Hesabı Yapan Program

Merhaba arkadaşlar yeni bir algoritma çalışması ile birlikteyiz.Bu günkü çalışmamız dört işlem üzerine olacak.Girilen iki sayı arasında toplama,çıkarma,çarpma ve bölme işlem sonuçlarını ekranda gösterecek.Mini bir hesap makinesi yapacağız ilerde şimdi sadece 4 işlemi konu alan bir çalışma yaptım. Kolay bir uygulama  üstelik karışıkta olmadı Adımları aşağıda gösterdim.Umarım işinize yarar herkese kolay gelsin iyi dersler. ÇALIŞMADA İZLENECEK ADIMLAR Adım 1: Başla Adım 2: Birinci Sayıyı Gir:A Adım 3: İkinci Sayıyı Gir:B Adım 4: sonuç1=a+b A8 gideceğiz Adım 5 :sonuç2=a-b A9  gideceğiz Adım 6: sonuç3=a*b A10  gideceğiz Adım 7: sonuc4=a/b A11  gideceğiz Adım 8: Toplama işleminin sonucu:sonuç1 Adım 9: Çıkarma işleminin sonucu:sonuç2 Adım 10: Çarpma işleminin sonucu:sonuç3 Adım 11: Bölme işleminin sonucu:sonuç4 Adım 12: Bitir PROGRAMDA YAPIYORUZ; İşlemlerimiz bu kadar arkadaşlar.Göründüğü gibi zor bir tarafı yok.Mantık aynı mantık.Sadec...

C# İle Hesap Makinesi

KOD GÖRÜNÜMLERİ DENEDİĞİMİZDE; ÇALIŞMA KODLARI int sec;             int sonuc, s1, s2;             Console.WriteLine("1.toplama");             Console.WriteLine("2.çıkarma");             Console.WriteLine("3.çarpma");             Console.WriteLine("4.bölme");             Console.Write("İşlem şeç (1-4):");             sec = Convert.ToInt32(Console.ReadLine());             if (sec == 1)             {                    Console.WriteLine("İşlem TOPLAMA İşlemi");                 Console.Write("1.Sayıyı giriniz:");                 Console.Write("2.Say...

PHP İLE VÜCUT KİTLE İNDEKSİ HESAPLAMA

Bu uygulama için 3 ayrı sayfa oluşturmamız gerekecek Birinci sayfa form sayfa olacak ve diğer sayfaya POST-GET medotlarından biri ile gönderilecek. hesapla.html Uygulama.php Burada formdaki textbox isimlerini çağırdık.Ve oluşturduğumuz sinif.php sayfasına yönlendirdik. sinif.php Burada vücut kitle indeksi andında bir sınıf oluşturup döngüyü karara bağladık. ÇALIŞMA KODLARI hesapla.php <form id="form1" name="form1" method="post" action="uygulama.php">   kilo:   <label for="textfield"></label>   <input type="text" name="kilo" id="textfield" /> boy: <label for="textfield2"></label> <input type="text" name="boy" id="textfield2" /> <input type="submit" name="button" id="button" value="Gönder" /> </form> Uygulama.php ...