Css ile div kullanım örneklerimize devam ediyoruz uygulamamızda bize verilen aşağıdaki tasarımı oluşturmak için gerekli olan kodlamayı yapacağız.
Bizden istenen div örneğinde yan yana 150px boyutunda 4 kutu ve kutular arasında 10px boşluk olacak aşağıdaki büyük dikdörtgen için ise 630px genişlik ve 80px yükseklik değerlerini kullanacağız.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | <! DOCTYPE html> < head > < meta charset = "utf-8" /> < title >Bilisimogretmeni.com Css Div Kullanım Örneği</ title > < style type = "text/css" > #kutu1 { height:150px; width:150px; background-color:#000000; color:white; float:left; margin-right:10px; #kutu2 { height:150px; width:150px; background-color:#996600; float:left; margin-right:10px; } #kutu3 { height:150px; width:150px; background-color:#333366; float:left; margin-right:10px; #kutu4 { height:150px; width:150px; background-color:#990000; float:left; } #kutu5 {height:80px; width:630px; background-color:#6633FF; margin-top:10px; clear:both; float:left; } </ style > </ head > < body > < div id = "kutu1" ></ div > < div id = "kutu2" ></ div > < div id = "kutu3" ></ div > <!--http://www.bilisimogretmeni.com/ --> < div id = "kutu4" ></ div > < div id = "kutu5" ></ div > </ body > </ html > |
Şimdi biraz daha değişik bir örnek yapacağız
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 | <! DOCTYPE html> < head > < meta charset = "utf-8" /> < title >Bilisimogretmeni.com Css Div Kullanım Örneği</ title > < style type = "text/css" > #genel { padding:5px; width:600px; margin:auto; } #kutu1 { height:150px; width:150px; background-color:#990000; color:white; font-family:'Century Gothic'; font-size:35px; font-weight:bold; text-align:center; vertical-align:middle; line-height:150px; float:left; } #kutu2 { height:150px; width:150px; background-color:#003366; color:white; font-family:'Century Gothic'; font-size:35px; font-weight:bold; line-height:150px; text-align:center; vertical-align:middle; float:left; margin-left:10px; } #kutu3 { height:70px; width:590px; background-color:#330033; color:white; font-family:'Century Gothic'; font-size:35px; font-weight:bold; text-align:center; vertical-align:middle; line-height:70px; clear:both; float:left; margin-bottom:10px; margin-top:10px; } #kutu4 { height:150px; width:150px; color:white; background-color:#003366; font-family:'Century Gothic'; font-size:35px; font-weight:bold; text-align:center; vertical-align:middle; line-height:150px; margin-right:10px; float:right; } #kutu5 { width:150px; height:150px; background-color:#990000; color:white; font-family:'Century Gothic'; font-size:35px; text-align:center; vertical-align:middle; line-height:150px; float:right; font-weight:bold; margin-right:10px; } #kutu6 { background-color:#330033; color:white; height:70px; width:590px; font-family:'Century Gothic'; font-size:35px; font-weight:bold; text-align:right; vertical-align:middle; line-height:70px; clear:both; float:left; margin-top:10px; } </ style > </ head > < body > < div id = "genel" > < div id = "kutu1" >Html</ div > < div id = "kutu2" >Css</ div > < div id = "kutu3" >Web Tasarım ve Programlama</ div > < div id = "kutu5" >Vb.Net</ div > < div id = "kutu6" >Programlama</ div > </ div > </ body > </ html > |
hocam eline sağlık siteyi çok beğendim
teşekkürler :)