960 Izgara Sistemi, 960 piksel genişliğinde sayfalar oluşturmak için bir ızgara sistemi olduğu için bu adı almıştır. Izgaraya yerleştirebileceğimiz sütunlar farklı genişliklere sahip olacak, ancak sayfanın toplam genişliği her zaman 960 piksel olacaktır.
Bu önceden tanımlanmış css sınıfları ile, düzenlerimizi oluşturmak için 12 veya 16 sütun kullanabiliriz, sütunların her biri, sütunlar arasında 20 piksellik bir ayrım oluşturmak için 10 piksellik bir sol ve sağ kenar boşluğuna sahiptir. Bunu bilerek, 12 sütun kullanırsam her sütunun 60 piksel, 16 sütun kullanırsam her birinin genişliğinin 40 piksel olacağını söylüyoruz.
Bir GUI'ye sahip olmak için sütunların nasıl dağıtıldığına dair bir resim ekliyoruz.
Bu şekilde yerleşim yapmak çok kolay ve görsele bakarak nasıl yapılacağı hakkında fikir sahibi oluyoruz. Bu öğreticinin amaçları doğrultusunda, bir web sitesi yapılandırmak ve bilgileri düzenlemek için bir düzen oluşturacağız.
Örneğimize bir 960test.html dosyası oluşturarak başlıyoruz ve etiketlerin arasına aşağıdaki css'i ekliyoruz.
[renk = # 000000]
[/Renk]
Bu dosyalar 960 grid çerçevesinin sınıflarına sahip olanlardır, eğer yeni css'e ihtiyacımız olursa, onları ayrı bir dosyada uygulayacağız, çerçeveyi standart tutmak için asla değiştirmeyeceğiz.
960 Grid'in kullanımını daha iyi açıklamak için basit bir düzen
otomobiller
- Ödemek
- RSS
- Kapak sayfası
- Haberler
- Üyeler
- Promosyonlar
- Bize Ulaşın
Donec malesuada dictum orci. Pellentesque felis arcu, malesuada eget, convallis sed, suscipit eget, tellus. Nullam lectus. Nam elementum feugiat mi. Hiçbir şey için geçerli değil. Cras viverra eros vitae nefret.
Bazı Başlık
Donec malesuada dictum orci. Pellentesque felis arcu, malesuada eget, convallis sed, suscipit eget, tellus. Nullam lectus. Nam elementum feugiat mi. Hiçbir şey için geçerli değil. Cras viverra eros vitae nefret.
Donec malesuada dictum orci. Pellentesque felis arcu, malesuada eget, convallis sed, suscipit eget, tellus. Nullam lectus. Nam elementum feugiat mi. Hiçbir şey için geçerli değil. Cras viverra eros vitae nefret.
Bazı Başlık
Donec malesuada dictum orci. Pellentesque felis arcu, malesuada eget, convallis sed, suscipit eget, tellus. Nullam lectus. Nam elementum feugiat mi. Hiçbir şey için geçerli değil. Cras viverra eros vitae nefret. Fusce ut urn eu, luctus maleuada'yı özgürleştirir. Nulla quam arcu, adipiscing quis, hendrerit ac, maleuada ut, ante.
Donec malesuada dictum orci. Pellentesque felis arcu, malesuada eget, convallis sed, suscipit eget, tellus. Nullam lectus. Nam elementum feugiat mi. Hiçbir şey için geçerli değil. Cras viverra eros vitae nefret.
Automoviles.com Telif Hakkı 2014 | reklam | Yasal | Temas etmek
Örneği bitirmek için mystyles.css dosyasını ekliyoruz.
@karakter kümesi "iso-8859-2"; / * CSS Belgesi * / div.spacer {yükseklik: 1em; } #üst {genişlik: %100; arka plan: # 29231e; pozisyon: göreceli; üst: 0; sol: 0; } #top ul {kenar boşluğu: 10px 0 10px 0; renk: #FFFFFF; } #top ul li {ekran: satır içi; } #bodyMain {arka plan: url (… /images/nubes-background.jpg.webp) üst merkez tekrarsız; } #rss {arka plan: url (… /images/rss-logo.gif.webp) tekrarsız sağ; dolgu: 5px 30px 5px 0; } a # logo {arka plan: url (… /images/vos-voz.gif.webp) tekrarsız; genişlik: 470 piksel; yükseklik: 92 piksel; yüzer: sol; üst kenar boşluğu: 150 piksel; } img # şehir-logo {float: sol; } #header {border-bottom: 5px solid # 29231e; arka plan: url (… /images/header.jpg.webp) tekrarsız; yükseklik: 173 piksel; } #contentMain {arka plan: #FFFFFF; üst dolgu: 10 piksel; kenarlık-alt: 5px # A1DEF0 katı; } #contentMain h1, #contentMain h3 {color: # 4991a5; } #menu {arka plan: # e7f7fb; } #menu ul {dolgu üstü: 10px; kenar boşluğu-alt: 10 piksel; } #menu ul li {ekran: satır içi; yazı tipi: 20 piksel kalın Arial, Helvetica, sans-serif; } .makale {sol-kenar: 15px; } img.border-blue {border: 5px katı # e7f7fb; kenar boşluğu-alt: 10 piksel; } #footer {yazı tipi boyutu: 11 piksel; }Bu Eğitimi beğendiniz ve yardım ettiniz mi?Yazara olumlu puan vermek için bu düğmeye basarak yazarı ödüllendirebilirsiniz. 
