Bloğun düzeni nedir? Nasıl kendi başlarına sitenizin tek bir sayfa empoze etmek?

Kendi sayfalar siteleri yapmak öğrenmek için bir istek vardır? O zaman neyi blok düzeni hakim olması edelim. Düzen acemi birtakım zorluklarla karşılamak, bunlar bir çok soru var. Blok kodlama ne olduğunu düşünün.

Önemli bir ipucu

Kullanım WYSIWYG editörü, yani her şey daha net oldu. onlar her şeyi anlamak için, defterde de HTML, işi bilenler. Ve başlayanlar, örneğin, Dreamweaver FrontPage gibi programlarda yararlanabilir ya edebilirsiniz.

düzen site türleri

düzen birkaç tipi vardır:

1. Tabular.
2. Blok.
3. Karışık.

Biz blok düzeni ilgileniyor. Tablodan da farklı kılan nedir? DIV etiketi kullanılarak blok düzeni de bazı avantajları vardır:

1. Daha hızlı blokların tasarımı ile yükleyin.
2. indir oluşur olarak içerik (tablolar aksine) blokları görüntülenir. Bilindiği gibi, bu tablolar yalnızca tüm tablo sonra görüntülenecek.
3. div-ler daha kolay olan Kod okumak için.

Bu blok düzeni ünlüdür tüm avantajları vardır.

Nasıl konum div-blok değiştirilir?

Bu yüzer yardımcı olacaktır - aşağıdaki yeteneğine sahiptir bu özelliği,:

1. sol - sola yasla.
2. Sağ hizalamak için - sağ.
3. Eleman nerede olduğunu hiçbiri verilirse, o hareket etmez kalır. Bu değer varsayılan olacaktır.

İhtiyacımız diğer önemli özelliği - açık. O 4 değerlere sahip olabilir:

1. Önceki öğe altında kurulum için, sağa, bloğa taşımak - sağ.
2. sola hareket ettirilir önceki elemanı, aşağıda Sol setleri.
3. Hem - Bir önceki yerinden bloğun montajı.
4. Yok taşınır bu elementlere blok göre konumuna ilişkin kısıtlamalar yokluğunu gösterir.

örnek

Bir blok nasıl görüneceğini düşünün düzen div. Bizim kod yazmak:

kod altında sonucunu görmek. arzu edildiği gibi durumda, bir kaç özelliklerine dayanarak blok düzeneğini kontrol edilebilir. sonraki an gidin. herhangi bir tarayıcı için her blok hizalamak, merkezi: Biz text-align kullandık.

Gördüğünüz gibi, bu sitenin oldukça basit blok düzenidir. Çalışma ve sayfaların daha esnek bir yapıya yaratacak fazla özellik uygulama için önemlidir.

daha önemli bir şey

düzende kullanılan bir popüler özelliği yoktur - pozisyon, bu konumlandırılması için kullanılır.

konumunun özellikler için değerler:

1. Bağıl - orijinal konumlarına göre elemanların pozisyonunu ayarlar. Uygulama sol, üst Righ, belli bir yönde taban elemanı hareket eder.
2. Statik - Normal görüntü öğesi. Bu doğru / sol, üst / alt kısmını kullanmak için hiçbir mantıklı - hiçbir şey yol açabilir.
3. Mutlak - mutlak konum elemanı.
4. Sabit - Mutlak benzer. Bu ekranda belli bir noktaya bağlanır, ama o bile sayfa çeviren eğer konumunu değiştirmez.

Birçok düzeni blokları, sabit mutlak ve görece konumlandırılmasını kullanıldığında üst üste fark ettik. Sonra ilginç bilmek için aşağıdaki blokların, hangi yukarıda hangi. Bu soruyu cevaplamak için, z-endeksi özelliğini gerekir. Bu yeni bir seviyeye düzen blokları getirdi. Bu düzlemin konumlandırma yapmak için, aynı zamanda bu tür bir özelliğin değeri pozitif veya negatif olabilir üçüncü eksen Z vasıtasıyla sadece mümkün kılar.

3 blok oluşturun. Mutlak konumlandırma sonra, deney.

Gördüğünüz gibi, blokların konumunu değiştirmek kolaydır. şunlarıyapabileceksiniz olmasından temelinde, herhangi bir temel blok düzeni sayfa yapmak. daha fazla özellik uygulama becerilerinizi geliştirecektir.