HTML + CSS ile hazırlanmış Div ile sayfa yapısını gösteren ve CSS ile çeşitli biçimlendirilmeler uygulanmış basit bir web sayfası örneği.
CSS Dİv Kullanım örnekleri.
index.html Kodları:
|
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 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>www.yazilimkodlama.com</title> <link href="style.css" rel="stylesheet"> </head> <body> <div class="menu-ust"> <div id="logo"> <h1>yazilimkodlama.com</h1> </div> <div class="menu"> <ul> <li><a href="#">Anasayfa</a></li> <li><a href="#">Ürünler</a></li> <li><a href="#">Hakkımızda</a></li> <li><a href="#">İletişim</a></li> </ul> </div> <div class="temizle"></div> </div> <div class="sayfa"> <div class="ust"> <img src="resim/1.png"> <div class="yazi"> <h1>BAŞLIK</h1> <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Ipsum Lorem Ipsum Lorem Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p> </div> </div> <div class="temizle"></div> <div class="gri"> <p>www.yazilimkodlama.com</p> </div> <div class="card"> <div class="kutu"> <img src="resim/2.png"> <h1>HTML</h1> <p>HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri </p> </div> </div> <div class="card"> <div class="kutu"> <img src="resim/3.png"> <h1>CSS</h1> <p>HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri </p> </div> </div> <div class="card"> <div class="kutu"> <img src="resim/4.png"> <h1>PHP</h1> <p>HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri </p> </div> </div> <div class="temizle"></div> </div> <div class="alt"> <h1>www.yazilimkodlama.com</h1> </div> </body> </html> |
style.css Kodları:
|
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 |
/* CSS Document */ body,h1,ul,li,img,p{ margin: 0; padding: 0; } body{ background-color: black; } .menu-ust{ background-color: gray; height: 60px; } #logo{ float: left; width: 350px; margin-left: 30px; } #logo h1{ color: white; line-height: 60px; } .menu{ float: right; margin-right: 50px; } .menu li{ list-style-type: none; float: left; line-height: 60px; } .menu ul li a{ text-decoration: none; color: whitesmoke; font-weight: 900; display: block; text-align: center; transition: 1s; font-family: calibri,arial,verdana; font-size: 20px; width: 180px; float: left;line-height: 60px; } .menu a:hover{ background-color: #5FD367; color: #005555; } .sayfa{ width: 960px; margin: 5px auto; background-color: azure; } img{ float: left; } .yazi{ float: left; width: 540px; margin-left: 20px; } .yazi h1{ font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif"; text-align: center; } .yazi p{ font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif"; text-align: justify; } .gri{ background-color: gray; height: 40px; } .gri p{ font-size: 16pt; color: white; line-height: 40px; text-align: center; } .card{ width: 300px; float: left; margin:10px; } .card img{ margin: auto; } .alt{ background-color: gray; height: 50px; } .alt h1{ line-height: 50px; text-align: center; color: white; } .temizle{ clear: both; } |
