HTML Div
<div> etiketi, diğer sayfa öğelerini içine alan ve HTML belgesini bölümlere ayıran bir konteyner biriminden başka bir şey değildir. Web geliştiricileri HTML öğelerini gruplandırmak ve aynı anda birçok öğeye CSS stilleri uygulamak için <div> öğelerini kullanır.
HTML belgelerini dilimlemek için bir <div> etiketi içindeki metin öğelerini gruplandırın.
|
1 2 3 4 5 6 7 |
<div id="ornek1" name="ornek1" title="Örnek bir Div Elementi"> <h5>Başlık 5</h5> <p>Bu bir paragraf elementidir...</p> <p>Burası da başka bir paragraf elementidir...</p> </div> |
Div içinde Div Kullanımı
Div elementleri sayfaların şekillendirilmesinde kullanılır. Bu nedenle bir çok elementini iç içe kullanırız. Aşağıdaki basit örnekte iç içe div kullanımı ile ilgili basit bir örneğe yer verilmiştir. Ayrıca div elementini biçimlendirmek için CSS tanımlaması da yapılmıştır.
|
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 |
<!DOCTYPE html> <head> <style> #sayfa{ border:3px solid salmon; width: 500px; margin:auto; } .bolum{ margin:10px; padding:5px; border:3px dotted salmon; } </style> </head> <body> <div id="sayfa"> <h2>Bu Sayfa Başlığıdır.</h2> <div class="bolum"> <h3>Alt Başlık 3</h3> <p>Paragraf etiketi...</p> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius vero at alias suscipit culpa modi sequi sit minus natus possimus provident libero exercitationem, magni, rerum esse itaque dolore nihil veritatis?</p> </div> <div class="bolum"> <h3>Alt Başlık 3</h3> <p>Paragraf etiketi...</p> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius vero at alias suscipit culpa modi sequi sit minus natus possimus provident libero exercitationem, magni, rerum esse itaque dolore nihil veritatis?</p> </div> </div> </body> </html> |
Çıktı:
Çok daha fazla div örneği için CSS Div Örnekleri yazılarına bakabilirsiniz.
Yorum Yap