10 Aralık 2014, ÇARŞAMBA

Css3 Flexbox Gerekli Esnek Kutusunu Düzenleri Öğretici

Bu derste kullanarak çok kolay web düzenleri oluşturmak öğrenebilirsiniz CSS 3 esnek kutu modeli esnek kutu düzeni yani için optimize kullanıcı arayüzü tasarımı ve iki boyutlu düzenleri herhangi bir ölçek var Biz kodlama başlar top bitiş ürünü bir göz atalım Ben olacak AL tüm yeni html5 öğeleri kullanır bu yüzden biz şimdi öğesi olan başlık elemanı ana var var eleman biz kenara elemanı ve ardından altbilgi elemanı vardı Bu şekilde böylece sayfadaki tüm içerik kadar işaretlenir Bu arada güzel bir semantik tür bunu bir esnek bir uyum gidiyor görebilirsiniz ve onun da kolay inşa etmek durum Kendinize

yeni bir örnek olsun HTML dosyası hazır olduğunu bu kadar basit olduğundan ve biz HTML ile başlayacağız biz kalkınmayı yerleştirebilirsiniz görebilirsiniz kerede tüm gösterildi ve sonra başlık elemanı NAB elemanı içeriden

beş çocuk babasıdır temel unsur bunların hepsi denir şimdi altbilgi elemanı kenara eleman esnek öğeler bu onların ana did Flex Plex konteyner kutu olduğunu ve yapacağız ki CSS yapmak konum Biz sadece sahip

“CSS Esnek kutu modeli kullanılarak web siteleri ya da arabirimler için esnek düzenleri oluşturmak öğrenin. Esnek Kutu Düzeni Modülü - http://www.developphp.com/li...”
Adam Khoury

olacak şimdi bu hakkı bir göz atın sayfa ve onların gelen kutularına bir buncha kelime ama tarzı kendi kutuları tüm stil elemanı böylece ilk şey olduğunu yapacağım onun marjı yapmak için vücut elemanı hedef olduğunu 0 piksel o sayfanın etrafında tüm yol yol o küçük kenar boşluk Bir sonraki satır yapacağız koymak vücut çocuksun vücudun içinde olduğu çocuk gelişimi hedefleyen kalkınma bu Bu olacak Lex kutusunun bizim esnek konteyner sakin olacak bu yüzden ekr

Css3 Flexbox Gerekli Esnek Kutusunu Düzenleri Öğretici Resim 1 Css3 Flexbox Gerekli Esnek Kutusunu Düzenleri Öğretici Resim 2 Css3 Flexbox Gerekli Esnek Kutusunu Düzenleri Öğretici Resim 3 Css3 Flexbox Gerekli Esnek Kutusunu Düzenleri Öğretici Resim 4

an özelliğini ayarlayarak bunu yapacağım Ekran özelliği için yeni eklenen bir ayara Eğer atamak için yapmanız gereken tek şey olduğunu Plex hangi güverte kaplar bir esnek kutusu da Flex satır özelliği ekleyebilirsiniz yukarı değerler satır ve wrap ile bu nedenle yöne tüm elemanlar Flex öğeler plastik kap içinde akan olmasına karşın yatay bir düzlem üzerinde olan rulo tarzında olacak elemanları inecektir sadece bu yüzden ve biz rap belirtin biri altında başka Plex kutusunda yeterli alan yok ise Şimdi bu noktada bunlarl

a ilgili detayları hakkında çok fazla endişelenmenize gerek yok çünkü Ben sayfalara olacak yönetmesine you guys kulüpler ben İngiltere Zaten bu sayfaları henüz yayınlanmamış com nokta PHP geliştirmek ama onlar orada ve ben de açıklama bağlantılar adamlar size vereceğim İsterseniz bu video tüm bağlantılar hakkında tüm bunlar öğrenmek çok biraz daha derinlemesine özellikleri Sadece onları bulmak için videoda açıklamasında linklere tıklayınız tüm ve çok geçmeden ben HP nokta com geliştirmek için bu belgeleri yayımlamak edeceğim böylece sadece bir gerçekten bütün etrafında başınızı sarın size ediyor özelliklerine rağmen esnek kutu modeli ve görmek bunun ile ilgili olan ve size çok daha yaratıcı yapacağız Bunu aa daha tam bir anlayış varsa ben de derin gitmeyeceğim Bu esnek özellikleri açıklayan derinlemesine bir Buncha yazdım çünkü sayfaları onlar gitmek hazır derinliğinin-bunları açıklayan mantıklı olduğunu Eğer sadece bir belgelenmiş bu sayfaları bütün her P geliştirmek okumak tıklama sonraki tamam bir video açıklamasında linkler I kural edeceğiz Sadece bazı temel kozmetik olacak Bu esnek kap içinde tüm unsurları için C & C vücut çocuk hedeflediğiniz yaptım Çocuk başlığı şimdi kenara ana ve altbilgi var bu özellikleri CSS verilmesi ile tüm bu hedefleme yolu çok az gri arka plan onlar biraz var var border-radius: Biraz aralarında bir marj alanı ve içlerinde sonra bazı doldurma şimdi burada kendi küçük kural başlığındaki dışarı tek kurşun Şimdi ilk şey olacak sipariş ayarlanır yapmak Flex içindeki düzen diğer pearance iyi ki birine dedi içeren ve sipariş bir esnek kutu ilgili özelliği onları yüksekliğini ayarlamak olacaktır Bu 100 piksel ayarı sadece normal yükseklik sadece o başlığı için ve biz Flex batacak ediyoruz steno mülkiyet 20 uzay yüzde 100'den bir boşluk ve yüzde yüz genişliği belirtilir ama başlık benim sitesinde Flex özelliği araştırabiliriz Bütün bu değerler neyi belirlemek için Şimdi başlıklar set beri Elimizde ne bir göz atalım flex Ben bu düşünüyorum önümüzdeki biz knath hedef gidiyoruz kadar şekillendirmeye başlayan eleman buna çok benzer bir şey içine burada bu bir emir verildiğinde bir McKinney onun bükülmüş 200 piksel genişliğinde yapmak söz konusu Beni gezinme öğeleri burada görmek bir göz atın ve 200 piksel genişliğinde çok iyi şimdi sırayla onu vereceğim, ana elemana aynı şey 400 piksel 3 dakika dedi minimum yüksekliği şu anda içinde hiçbir içeriğe sahip iken sadece bu yüzden bunu bir yüksekliğe sahip olduğunu görebilirsiniz o yapacağız değil yani çok uzun boylu hi var Ben sadece bu çok gerekli bir özellik değil burada bu özelliği ayarlamak Ben sadece o yüksek bazılarına sahiptir öylesine sana da görünüm verir söyledi düzen Bu gerçek içerik koyarak başladığınızda Nets gunby ana unsur nedir yüksekliğini belirler ve biz sadece 1 olan Plex dedi ama bu otomatik olmak mümkün olabilir ama bir hile yapmak gibi görünüyor Şimdi en tür temsil biri olan kenara elemanı hedef izin için sırayla böyle bu sabah boşluk veya bir şey eklemek ve ben bir dakika içinde emir siz o ne görebiliyorum göreceğim değişiklik değilim tüm hakkında ve biz aslında ayarlandığı için birlikte yerleşmek zorunda değilsiniz Burada bildiğimiz böylece Flex özelliği o iki yüz olacak Şimdi tek bir görünüm şeyler gerçekten güzel şekillendirmek başlıyor Bizim yan elemanı bir başlık navigasyon var Ana içeriğe ana uzanıyor ana unsuru ama bölümüne yerleştirmek için uzanıyor Yapmamız gereken şimdi herhangi bir ekran yerine altbilgi sadece sağ olsun Birçok düzen beş en yüksekliğini yapalım o var Sadece başlığı gibi 100 ve daha sonra yapacağız onun Plex hazırsınız de sadece başlığının gibi yüzde 100 yolu o genelinde yayılan ekran Burada bana izin ne bir göz atın ama bu Bana orada 50 başlıyoruz bu nedenle olursa olsun ne kadar içerik bu ana bölüme koymak alır Eğer nad ve ABD yan sütunları Bu ana bölüm ile birlikte germek için gidiyoruz otomatik güzel bir özellik olan bu sadece gerçekten yaratıcı alabilirsiniz tek düzeni typeof çok standart düzeni var ancak yolda Flex kutusu ile gerçekten yaratıcı alabilirsiniz elemanlar boyutu şekilde orada yığılmış ve bunun gibi şeyler, tamam yani sadece bu yüzden bilirsin Burada bu bağlantıları olacak Bu videonun altında sadece doğru açıklama alanına videoya geçebiliriz ve araştırmak için bu linklere tıklayınız Flex yönü esnek rap esnek rol esnek esnek fleck küçültmek büyümek sipariş esnek temeli içeriğini haklı hizalanmış öğeler öz içeriğinde bir müttefik hale CSS özellikleri olanlar hepsi Bu bağlantıları tıklayın böylece bir kez Flex kutusu modeli ile ilgili Eğer daha iyi bir şekilde donatılmış olacak sokmaları araştırma gitmek müthiş düzenleri ve kullanıcı arayüzlerini yapmak Ben sadece gerçek hızlı eklemek istiyorum bazı çocuklar olabilir o Eğer bir kenara eleman iner bkz söz Eğer çok küçük aldığında elemanları kendilerini yeniden CSM bkz Ekran çok küçük bu yüzden yapmanız gereken tüm ayarlanır üzerinde olan en az Flex kutusu kendisini ben gidersem yani Ben ancak 800 piksel dk ve Bu Flex kutusu herhangi bir küçük almazsınız anlamına gelir 800 piksel Hasta o yolu bu sorunu önleyebilirsiniz şimdi 800 durur minimum yüksekliği en az olabilir herhangi bir unsur hatırlıyorum Maksimum yükseklik maksimum yüzden bu iki ile oynamak tamam burada başka fikirleri olabilir bir kaç son dakika ipuçları var senin Eğer fleksiyonda kutuları olmak istemiyorum belge Bu kurulum var yolu tüm hedef vücut elemanı verir ise böylece ne Colin yaptım alınır ay çocuk ve sonra sadece orada bir tane koyun Politika evet her şeyi hedeflediklerini ruh Haftasonu go ahead ve her yerde burada yaptım diyor değiştirin çocuklarda buna yol sadece hedef olduğunu bu özel yaptım ve var ne varsa bunu yukarıda başka bir yaptım Eğer hedef bu söyleyerek ve çocuğun yaptığı Eğer iddia edemez o vücutta yol olursa olsun yaptım kullanarak ve çocuk ve her türlü sayısına göre eleman her yerde ilk beri olanlar için asker olduğunu ve ben de sana nasıl sipariş çalışmaları gösterecektir söyledi İlk başta ben şeyler cm sırasını değiştirmek için önce en ona bir göz atalım Burada seyir Bir kenara burada ben ne Misss Buraya bir kenara koymak ve Nads buraya kadar sadece sırasını değiştirerek yüzden NAB gidelim ve dört emin olun ve bir kenara yapmak Şimdi harika bir yer olduğunu bir kenara eleman burada bitti ve NAD elemanı çok güzel bir özellik olduğunu burada bitti Tamam o gibi tüm sipariş var ve bu kadar tamam bu yüzden siz eğlenin kendi benzersiz yaratma var umut x-box düzenleri için yaratıcı sonraki videoda görüşmek.

Açıklama

CSS Esnek kutu modeli kullanılarak web siteleri ya da arabirimler için esnek düzenleri oluşturmak öğrenin. Esnek Kutu Düzeni Modülü - http://www.developphp.com/lib/CSS/Flexible-Box-Layout-Module Etkileyici tamamen duyarlı esnek düzenleri yapmak için CSS3 Media Sorguları ile birleştirin: https://www.youtube.com/watch?v=aPtA4nYkvDw

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

Adam Khoury

Adam Khoury

Profesyonel bir online bedava gibi kod ve tasarım öğrenin. JavaScript, PHP, SQL, HTML, CSS, ActionScript ve daha fazlası gibi usta geliştirme teknolojileri. Tüm videoları http://www.developphp.com daha iyi organize olan

YORUMLAR



9.3/10

  • 279
    Olumlu
  • 20
    Olumsuz
  • 58
    Yorum
  • 19608
    Gösterim

SPONSOR VİDEO

Rastgele Yazarlar

  • LIVESTRONG.COM

    LIVESTRONG.C

    5 EKİM 2005
  • Phlearn Photoshop and Photography Tutorials

    Phlearn Phot

    11 EKİM 2011
  • TechShowsYou

    TechShowsYou

    3 Mart 2011

ANKET



Bu sayfa işinize yaradı mı?