Modüler Tasarım "CSS":
Burada birkaç adım anlatmak isterseniz,
sizin modüler tasarım "CSS" can serbestçe gibi.
Bu açıklama sadece bir imkanı biridir!
- Siteye giriş yapın
- "Tasarım ayarlamak için
- Sonra Tasarımı "CSS" seçim
- Sayfanızın içeriğini transfer olacak
Sizin "doğru kutuları" nin - İçeriği kabul edilmez
- Müsstet bir kopyasını ve yeni tasarım yapıştırmak
1. Adım: gereksiz sınıflar Kaldır
İlk olarak tüm sınıflar bu gerekmez kaldırabilir olacaktır:
- "Tasarım ayarlamak için
- "Gelişmiş Ayarlar"
- Alt kutunun "herhangi bir CSS stil etiketleri olmadan"
- Hayır "style-tags" anlamına gelir:
- Hayır <style CSS kodu type="text/css"> önce
- Hayır </ stil CSS kodlarının sonuna> 'i
- "Bir CSS stil etiketleri" olmayan bir alan ekle:
# ExtraDiv1 (display: none;) # extraDiv2 (display: none;) # extraDiv3 (display: none;) # extraDiv4 (display: none;) # extraDiv5 (display: none;) # extraDiv6 (display: none;) # pre_header (display: none;) # post_header (display: none;) # pre_content (display: none;) # nav_heading (display: none;) div.header (display: none;) h1 # başlık (display: none;) h2 # başlık aralığı (display: none;)
Ile # İşte sınıf (display: none;) biz sınıf kaldırın.
2. Adım: biçimlendirme Bağlantı
Uzak web sitenize boyutunu ve rengini tüm bağlantılı yazılarda bu CSS beyanı ile alabilirsiniz.
- "CSS stil etiketleri olmadan" bir alan ekle
Son kodu ve bu kodu - arasında boş bir ekleme
- Sen daha kolay tüm kodları arasında Genel bunu yapma
a (color: # 4A9AF6; text-decoration: none; font-size: 13px;) a: sallanmak (color: # 4A9AF6; font-size: 13px; text-decoration: none;) a: bağlantı (color: # 4A9AF6 ; font-size: 13px; text-decoration: none;) a: etkin (color: # 4A9AF6; font-size: 13px; text-decoration: none;) a: (renkli ziyaret: # 4A9AF6; font-size: 13px ; text-decoration: none;)
Açıklama:
a = Bağlantı
a: = Eğer bağlantıyı fare duraksamak gidiyor
a: link = bağlantı henüz ziyaret
a: Etkin = sadece linkini tıkladıysanız
a: ziyaret = önce ziyaret sayfaları
Sen kodunu değiştirmek de renkleri ve boyutları olabilir / uyum.
3. Adım: arka plan
Bu ve son kodu - arasında boş bir satır eklemek için
- Bu bakış size yardımcı olur
- "CSS stil etiketleri olmadan" bir alan ekle
vücut (background-color: # 000000;) * (padding: 0; margin: 0
# Mein_Bild (margin: 0 otomatik; width: 980px; height: 500px; background-image: () burada GÖRÜNTÜ URL url; )
Açıklama:
background-color: # 000000; = arka plan rengi (burada siyah)
# = Mein_Bild burada kendi arka plan görüntüsü eklemek
Arka plan için resim: (resim URL'si BURAYA) url; resim adresi eklemek için kullanılır.
Arka plan görüntü boyutu yaklaşık 980 x 500 piksel olmalıdır
Bu örnek için, tasarım scrolled olamaz.
Tasarım görüntü üzerinde kaydırma tüm alanları doldurun.
ÖNEMLİ:
Sınıf # Mein_Bild biz icat var
Bir modüler, sadece biz alanına "metin tasarımı" eklemek: görebilirsiniz oluşmaz yapmak sınıfları oluşturmak
<div id="Hier Klassen-Name"> </ p>
Tasarım üzerindeki metin kutusuna "başka bir ekleyin:
<div id="Mein_Bild"> </ p>
Bu alan üstündeki takılı olması gerekir.
Alanında "metin tasarımı" kodu ile başlamalıdır!
Artık, tasarım görüldü resim kullanabilirsiniz.
4. Adım: başlık () üst sırada
Tasarım "olarak CSS", the # başlık sınıf header_container.
Eğer başlıklar gerek yoktur:
tek: # header_container ekler (display: none;)
- Sen üstündeki başlık kutusu istiyor musunuz?
- Takın alanına "CSS stil etiketleri olmadan"
# Header_container (konum: mutlak; Sol:% 50; margin-left:-490px; width: 980px; height: 70px; background-color: # 343434; background-image: url (); color: # FFFFFF; font-size : 13px; border: 1px solid # FFFFFF;)
Açıklama:
- Marj-left: sol kenarından başlığının = mesafe
- Genişlik: başlığının = genişlik
- Yükseklik: başlığının = yükseklik
Başlığı - Arka Plan-color = arka plan rengi
- Artalan görüntüsü: url (); parantez içinde = Arkaplan Resmi (URL) eklemek
If you want - resim eklemek için, aynı genişlik olarak başlık var!
- Renk: # 000000; başlığında = Metin rengi eğer metin in ise
- Yazı-size: 13px; = metin boyutunu
- Sınır: 1px solid # FFFFFF = çerçeve / kare kalınlığı / Renk
5. Adım: metin kutusuna Yeri
CSS ", metin kutusuna, sınıf # içerik Tasarımı" yazın.
- "CSS stil etiketleri olmadan" bir alan ekle
# Içerik (konum: mutlak; Sol:% 50; top: 140px; margin-left:-320px; width: 590px; height: 380px; padding: 10px; color: # F2F2F2; font-size: 13px; background-color: # 343434; background-image: (); border: 1px solid # FFFFFF; overflow: otomatik;) url'si
Açıklama:
- Üst: Üst metin kutusundan = mesafe
- Marj-left: ekranın sol kenarından = mesafe metin kutusuna
Sayfa kenarlarına kimden - Dolgu: 10px; içerik = 10 piksel mesafe
- Genişlik: metin = genişlik kutusu
- Yükseklik: Metin kutusunun = yükseklik
Metin - Arka Plan-color = arka plan rengi kutusu
- Artalan görüntüsü: url (); parantez içinde = Arkaplan Resmi (URL) eklemek
If you want - resim eklemek için, metin kutusuna aynı genişlik vardır!
- Renk: # 000000; metin kutusuna = Metin rengi
- Yazı-size: 13px; = metin boyutunu
- Sınır: 1px solid # C9C9C9 = çerçeve / kare kalınlığı / Renk
- Overflow: otomatik;) = bir kaydırma metin kutusu görünür oluşturur
Arka plan için renk: de şeffaf bir renk eklemek yerleştirebilirsiniz
görülmesi gereken, böylece arka plan görüntü!
6. Adım: Sağ kutusu ekle
CSS ", yani" kutusu "sınıf # sidebar_container Tasarımı" yazın.
Bunlar hiçbir sağ Kasası ile gerektirir:
tek: # sidebar_container ekler (display: none;)
- Doğru kutusu eklemek istediğiniz?
- "CSS stil etiketleri olmadan" bir alan ekle
# Sidebar_container (konum: mutlak; Sol:% 50; top: 140px; margin-left: 300px; width: 190px; height: 400px; background-color: # 343434; background-image: url; border: 1px solid # FFFFFF; color: # 000000; overflow: otomatik;)
Açıklama:
- En: kutunun üst kısmındaki = mesafe
- Marj-left: kutusunun sol kenarından = mesafe
- Genişlik: kutunun = genişlik
- Yükseklik: kutunun = yükseklik
- Arka Plan-color = arka plan rengi kutusu
- Artalan görüntüsü: url (); parantez içinde = Arkaplan Resmi (URL) eklemek
- Eğer bir görüntü eklemek, aynı genişlikte için kutu olarak alır
- Renk: # 000000; kutuya = Metin rengi
- Yazı-size: 13px; doğru kutusuna = metin boyutunu
- Sınır: 1px solid # C9C9C9 = çerçeve / kare kalınlığı / Renk
- Overflow: otomatik;) = görünür bir kaydırma kutusu oluşturur
Arka plan için renk: de şeffaf bir renk eklemek yerleştirebilirsiniz
görülmesi gereken, böylece arka plan görüntü!
Adım 7: Gezinme
Tasarım "olarak CSS", yani "Navi" Sınıf # nav_container
Gezinme düğmeleri bir sınıf li.nav_element
the duraksamak etkisi "kategorisinde bir li.nav_element: sallanmak
- "CSS stil etiketleri olmadan" bir alan ekle
# Nav_container (konum: mutlak; Sol:% 50; top: 140px; margin-left:-490px; width: 160px; height: 400px; border: 1px solid # FFFFFF; overflow: otomatik;) # nav ül (genişlik: 130px ; padding: 0px; margin: 0px;) li.nav_element (list-style-type: none; konum: göreli; padding: 5px; width: 115px;) bir (ekran: engellemek; width: 115px li.nav_element; padding: 4px; font-weight: bold; text-decoration: none; text-align: left; color: # F2F2F2; background-color: # 343434; background-image: () BURAYA DÜĞME-URL_1 url; border: 2px solid # 000000
bir li.nav_element: sallanmak (color: # 000000; background-color: # C9C9C9; background-image: (BURAYA DÜĞME-URL_2) url;)
NAVI-Alan # nav_container Place du
değerleri üst ve kenar ile sol
Büyük: otomatik; 400 piksel bir kaydırılabilir Navi yükseklik oluşturur.
İsterseniz değil, # nav_container Sil'i:
- Yükseklik: 400px;
- Overflow: otomatik;
Bu "navigasyon butonları" size özelleştirebilirsiniz:
- # Li.nav_element bir
- Ve bir li.nav_element #: sallanmak
- Eğer bir buton üzerinden = duraksamak fare çalışır
- "Background-image: için (URL HERE düğmesi) URL kendi düğmesine ekle;"
Eğer "navigasyon düğmeleri", geniş kapsamlı olmalı
sonra) da değiştirmek genişliği (genişlik istiyoruz:
- # Nav_container
- # Nav ül
- Li.nav_element
- Li.nav_element bir
Adım 8: ziyaretçi sayacı
Tasarım "olarak CSS", ziyaretçi sayacı sınıf sayacı #.
Sayacı görmek için, "Ekstra at düzenlemek" için sayaç etkinleştirmek bir yer için. Lütfen oradan: "gösterme Hit DO" seçmek
Lütfen dikkat:
Eğer ekstra in öncesi ve metre eklemek sonra uzun metin olduğunuzda, siz) artırabilir, bu nedenle genişliği (ışın bu kodu gerekir 1 satırı uygun olarak, tüm metin.
Bu ve son kodu - arasında boş bir satır eklemek için
- Bu bakış size yardımcı olur
- "CSS stil etiketleri olmadan" bir alan ekle
# (Konum: mutlak; Sol:% 50; top: 30px; margin-left: 300px; width: 150px; height: 20px; color: # FFFFFF; font-size: 13px; border: 1px solid # FFFFFF;) sayacı
Açıklama:
- En üst kimden Sayısı = mesafe
- Marj-left: sol kenarına gelen karşı = mesafe
- Genişlik: sayaç ve = genişlik
- Yükseklik: sayaç ve = yükseklik
- Arka Plan-color = arka plan rengi Sayısı
- Renk: # FFFFFF; ve (beyaz) karşı = Metin rengi
- Yazı-size: 13px; = metin boyutunu
- Sınır: 1px solid # FFFFFF = çerçeve / kare kalınlığı / Renk
______________