Frameworkü www.960.gs ‘den indirebilirsiniz.İndirdiğiniz frameworkü açın bi yere ve code bölümünden css klasörü altından 960.css ve reset.css yi projeniz altında herhangi bi yere veya derli toplu olması acısından css adında bi klasör oluşturun ve içine onları atın.Sonra kendinizde style.css adında kendi css dosyamızı /css klasörü altında oluşturun.
960 Grid Framework sistemi çok kolay.Tüm tarayıcılarda sorunsuzca çalışıyor.Çok rahat şekilde sitemizi oluşturmamızı sağlıyor.Şimdi container_12 ve container_16 diye classlarımız var bunların özelliklerine 960.css i açarak bakabilirsiniz.960 Grid Frameworkümüzde kısaca değinmek gerekirse 960px lik genişliğe sahip.Anlatıma kodlar üzerinden devam etmek beniç için daha kolay olucak :)
HTML için tıklayın http://www.ozgurlukicin.com/yapistir/694/
CSS için tıklayın http://www.ozgurlukicin.com/yapistir/695/
Şimdi açıklama yapcak olursak , açıklamayı html ve css i açtıktan sonra takip ederek okuyun lütfen.
İlk olarak ana divimiz olan containerı oluşturduk ve buna bu projemizde kullandığımız container_12 classını verdık.Daha sonrada container içinde header divimizi oluşturup bu sefer buna da grid_12 classını verdik.grid_12 classının özelliğiyse 940px genişliğinde özelliği olması vs.Yani yanlardan 10 ‘ar px içerde.Daha sonra bu header divimize bi navigasyon oluşturduk bunu anlatmaya gerek yok.
Sonra main divimizi oluşturduk ve bunun içinde iki tane div oluşturduk fakat dikkat ederseniz grid_6 classını verdik.12 ‘nin yarısı 6 olduğuna göre burda grid_6 yı verip 2 tane kolon oluşturcağımızı söyledik 2 kolonuda oluşturduk.Yani burda mantık kaç tane kolon oluşturmak istiyorsak ona göre grid_6 vs. diye oluşturuyoruz.Sonrada main içinde tekrardan divler oluşturduk grid_3 classıyla ve 4 kolona bölceğimizi söyledik ve bunu 4 kere tekrarladık.
Sonrada footer’ımızı oluşturduk ve içine bu sefer grid_4 classlarıyla 3 div oluşturduk 3 kolondan oluşcağını söyledik yani.Böyleliklede uygulamamızın iskeletini tamamlamış olduk.Gerisi style.css’imize kalmış onuda okuyarak yapabilirsiniz.
Uygulama dosyalarını http://www.mediafire.com/?h10lk3whsqjg62y 'dan indirebilirsiniz.
Hiç yorum yok:
Yorum Gönder