Bu yazımızda HTML ile oluşturmuş olduğumuz İletişim Formuna CSS ile bazı düzenlemeler yapacağız. Örneğimizi oluşturduktan sonra Form tasarımımız aşağıdaki gibi olacaktır.
Örneğimize ait iletisim.html dosyamızın içeriği:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>www.yazilimkodlama.com</title> <link href="stil.css" rel="stylesheet"> </head> <body> <form class="tasarim1" action="http://hnkbilisim.com/kaydet.html" method="post"> <label for="ad">Adınız</label> <input type="text" name="ad" id="ad"> <label for="sad">Soyadınız</label> <input type="text" name="sad" id="sad"> <label for="sad">E-Posta</label> <input type="text" name="eposta" id="eposta"> <label></label> <input type="submit" name="kaydet" id="kaydet" value="Kaydı Tamamla"> </form> </body> </html> |
Formumuzu düzenlemek için kullandığımız CSS dosyamız stil.css içeriği:
|
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 |
.tasarim1{ margin: 10px auto; width: 300px; padding: 20px; border-radius: 20px; /* Firefox v3.6+ */ background-image:-moz-linear-gradient(50% -19% -90deg,rgb(220,115,255) 0%,rgb(255,191,255) 100%); /* safari v4.0+ and by Chrome v3.0+ */ background-image:-webkit-gradient(linear,50% -19%,50% 81%,color-stop(0, rgb(220,115,255)),color-stop(1, rgb(255,191,255))); /* Chrome v10.0+ and by safari nightly build*/ background-image:-webkit-linear-gradient(-90deg,rgb(220,115,255) 0%,rgb(255,191,255) 100%); /* Opera v11.10+ */ background-image:-o-linear-gradient(-90deg,rgb(220,115,255) 0%,rgb(255,191,255) 100%); /* IE v10+ */ background-image:-ms-linear-gradient(-90deg,rgb(220,115,255) 0%,rgb(255,191,255) 100%); background-image:linear-gradient(180deg,rgb(220,115,255) 0%,rgb(255,191,255) 100%); -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffdc73ff,endColorstr=#ffffbfff,GradientType=0)"; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffdc73ff,endColorstr=#ffffbfff,GradientType=0); } .tasarim1 label{ display: block; letter-spacing: 2px; margin-top: 10px; } .tasarim1 input[type="text"]{ width: 260px; padding: 3px 5px; color: #555; box-sizing: border-box; } .tasarim1 input[type="text"]:focus{ color: #fff; background: url(Pencil-128.png) no-repeat #882a32; background-size: 25px 25px; outline: solid 1px #fff; padding-left: 30px; } .tasarim1 input[type="submit"]{ margin-top: 20px; background: #ff7373; border: 2px solid #9b2a32; padding: 5px 10px; color: #fff; } |
güzel olmuş ama ben formu en alta indirmek istiyorum margin top deniyorum ama hala yapamadım.
Sayfa yerleşiminizle ilgili. Sayfada yerleştirmiş olduğunuz div yapısına göre istediğiniz bölüme yerleştirme yapabilirsiniz. Daha fazla bilgi için sitedeki css div örneklerine bakmanızı öneririm.