Bu derste, hayali bir başlangıç ​​için bir açılış sayfası oluşturmak için önyükleme desteğini kullanacağımızıza hoş geldiniz.
Başlangıç ​​grubumuza Tam Eşleme denir.
Çok komik.
Ben bir insan kedi buluşma uygulaması olduğunu biliyorum ve neyin görece zararsız olabileceğini insan
kedi tarihleme nedir yorumlamak için sana bırakacağım Sheldrick kediler yalnız insanlar ile başka bir şey
olabilir.
Bilmiyorum.
Siteye hızlı bir gezinti yaparak başlayalım ve ona yazalım.
Gerçekten sadece birkaç özelliğe dikkat çekmek istedim.
Pek fazla yok.
Aslında bununla bağlantımız yok, henüz bir şey yapmaz.
Bu gerçekten sadece HD gezginler ama şu ana kadar üzerinde bulunduğumuz şeyin hepsi bu kadar.
Bu yüzden, evimizdeki kontak uzunlukları ile ilgili kusursuz maçımız var.
Aslında herhangi bir yere gitmezler ve sağ tarafta oturum açarlar İki küçük ikon var, biz onun
hamburgerini alıyoruz.
Üzerine tıklayabilirim.
Şu bağlantıların hepsi o hamburgerin içinde.
O zaman ortalıkta kalan ve tüm arka planı kaplayan büyük bir arka plan resmimiz var.
Yani orta biz bizim için mükemmel bir maç kadar bizim başlangıç ​​adı var ve sonra da bizim başlığı
var dating uygulaması sadece insan besleme.
Ve sonra küçük bir H R burada yatay kural ve daha sonra bir simge ile başlamak için bir düğme var.
Ve ben bunu küçültmek gibi hepsi ortada kalıyor ve biraz da yukarı doğru ilerliyor, böylece
mobil cihazınızda metnin yarım sayfanın altında başladığı garip bir düzen yok demektir.
Dolayısıyla biraz yukarı taşıyoruz ve merkezlenmiş kalıyor.
Bu yerleşimlerin yapılması gerçekten kolay ve önyükleme yapıyor ancak açılış sayfası için nispeten etkili.
Sahip olduğumuz tek şey, tüm genişliği kaplayan tek bir sütun.
Dolayısıyla bu sütun 12 ünite gidiyor.
12 ünite bir sütundaki herhangi bir bölüme bölmüyoruz ve o zaman her şeyi
bu sütunun içine yerleştiriyoruz.
Öyleyse başlayalım.
Yapmamız gereken ilk şey bir dosya yaratmaktır.
DML'de bir tane dizin var.
Bunu normal düzenli eşleme kusursuz maçımda ekleyeceğim ve
Bootstrap'e ekleyerek başlayacağım ve bir CDN
Bitstrips CDN kullanacağım.
SS ve Javascripti buradan yapalım.
Görev çubuğu için bu javascript'e ihtiyacımız olacak.
Bu yüzden etiketi birbirine bağlamamız lazım.
Sonra javascript'i edindik.
Anlaşıldı.
Bunu bir betik etiketi olan alt kısmına koyun ve o zaman kaynağınızı sizinle aynı düzeye ayarlayın.
Şimdi şunu açarsak, konsoldan açarsak, önyükleme javascripti için Jay sorgusuna da ihtiyacımız olan
küçük bir problemimiz olur.
Geri istemek zorunda olduğumuz nav bar dersinden geri hatırla
Querrey.
Bunun için bunun için bir CDN alacağız.
Değiştirilen sürümü yapacağız.
Bu URL'yi kopyala.
Ve nihayet buraya geri dönelim ve bunu javascripte önyükleme yapmadan önce yapmak zorundayız.
Aksi halde sorgunuzu bilmeyecek, bu nedenle önce sorguyu yüklemesi gerekiyor.
Şimdi tekrar deneyelim.
Yangın yenilemesi.
Tamam, iyi bir işaret görmüyoruz çünkü herhangi bir hata görmüyoruz.
Ortadaki metinle başlayalım.
Tüm bu içerikler burada.
div etmek için bir satıra ihtiyacımız var ve içimizde her zaman o satıra ihtiyaç duyduğu başka bir div var.
Dolayısıyla bir konteyner yaratmamız gerekiyor ve daha sonra konteynırın içinde sınıf ECO'lar kapsayıcısını
Herzaman ızgara sistemini kullanıyoruz ve daha sonra sınıfımız sütun çizgi büyüklüğüne eşit olacak
12.
Ve bu konteynerin her tarafına kadar uzanacak.
Ve içeride bir H1'e sahip olacaklarsa içeride sadece mükemmel eşleşme ve kaydetme demek.
Ve onu yenilemeye bırakalım.
Gerçekten istediğimiz şey bu değil ve bunun için yapmamız gereken birkaç şey var.
Birincisi, her şeyi bu sütunun ortasına koymamız gerek.
Dolayısıyla, burada uğraştığımız şeyleri incelersek, H1'in her tarafa geçtiğini görebilir ve sadece
bunun merkezini oluşturmamız gerekir.
Ve ikincisi, onu biraz indirmeye ihtiyacımız olması.
Sayfamıza en üste gelmeyen bir dolgu veya kenar boşluğu eklememiz gerekiyor.
İçeriğin geri kalanına ekleyerek başlayalım.
Bu yüzden de sadece insan kedi buluşma uygulaması var ve bu sadece bir H
3 olacak ve biz gerçekten istediğimiz herhangi bir unsur olabilir oynamak olabilir ama bir H-3 sadece insan çizgi feline
buluşma uygulaması yapacağım.
Ve o zaman çok fazla görünmeyecek olan yatay kurala ekleyebiliriz, ancak gerçeğin ardına
stil edeceğiz ve o zaman da o düğmenin sınıfında bir düğme ekleyeceğiz.
Bir bakalım.
Bu bir önyükleme düğmesi varsayılanıdır ve büyük bir düğme.
Hadi geri dönelim.
Bu yüzden, PTEN'e ve ardından renk varsayılanına ve daha sonra büyük boyutlu LG için boyuta ihtiyacımız
var ve burada, başlamak
üzere olan metni ekleyip kaydettiğimizi göreceğimizi göreceğiz.
Tamam.
Bu yüzden şimdi içeriğimiz var, ancak ızgaranın Merkezi.
Sonra dolgu üzerine odaklanacağız ve aşağı çekeceğiz.
Ancak, bu ızgaranın merkeziyle başlamak ve daha kolay hale getirmek için her bir şeyi
tek tek merkezlemek zorunda kalmamak için bir div'nin her yerinde gruplayacağım.
H-1'i ve sonra üçünü ve sonra düğmeyi ortalamamız gerekir; bunun yerine bir div içinde gruplayabilir
ve o div'yi bir satırla ortalayabiliriz.
Bir div hazırlayalım ve ona bir Cantet kimliğini vereceğim ve sonra her şeyi oraya koyacağız.
Yani H-1, 3 yaşında H. R. ve düğme düzgün girinti ve kaydedecektir.
Dolayısıyla sayfayı yenilediğimde, stil sayfamıza ekleyelim, hiçbir şey farklı görünmemelidir.
Dolayısıyla bir bağlantı etiketi ekledim ve stil sayfası uygulamanızı çağıracağım.
SS henüz yok.
Bu yüzden onu kurtarmak lazım.
SS'yi aynı dizinde görüyorum.
Ve sanki hepsi mor olan basit bir şeyle başlayalım.
Sadece işe yaradığından emin olmak için Tamam.
Yenileme dönelim.
Andrew mor H-1 al.
Harika.
Şimdi, içerik fikriyle eklediğimiz Dave'i seçelim ve onu merkezileştirelim.
Bu nedenle ondan kurtulalım ve bir kimlik içeriğine ihtiyacımız var ve yapmayı atlamak metni hizalama Merkezi.
Hadi geri dönelim.
Oraya gidiyoruz.
Böylece şeyler merkez şu andaki haliyle uyumludur.
Ardından, doldurma işleminin% 25'e eşit olması için sayfanın altına yüzde 25'ini aşağı doğru iteceğiz.
Yani burada üst yüzde 25'lik dolgu yapacağız.
Ve bunu bir yüzdelik olarak tutarsak, zor bir sayıdaki piksel vermeden ziyade biraz
daha duyarlı olur.
Yani bu tam ortada.
Ve sonra ekranı yeniden boyutlandırdığımızda yüzde 25 değişir.
Harika.
Şimdi arka plan resmine ekleyelim.
Bu yüzden kullandığım imge, sevimli kedi ve insan etkileşimi burada bootstrap resim
ızgarasını oluşturduğum son videoda tanıtıldığımız Splash Web sitesinde yer alıyor.
Ve herhangi bir sorun yaşamadan kullanabileceğiniz çok iyi ve yüksek kalitede görüntülere sahipler.
Ve kullandığım kişi burada, bu açıklamada da kedi bağlantıları araştırıyorum.
İşte size Aro'nun bu resmin sadece sağ tıklayın l olduğunuz görüntüyü kopyalayın.
Şimdi geri dönelim ve arka plan resmi olarak vücuda ekleyeceğim.
Ardından arka plan ve sonra da o dev olan bir URL verin İşte orada.
da tazelenirsek devasa bir arka plan görüntüsü alırsak bütün söyleyebileceğimiz şey, bunun tırnak töreni için bir başlangıç ​​olduğu olmasıdır.
Ve eğer onu bu seviyede bırakırsak ya
Bu yüzden yeniden boyutlandırmamız ve bunu yapmak için arka plan boyutunu kullanmamız ve bunu yeni kapatılacak şekilde değiştirmemiz gerekiyor.
Yine yakınlaşıyoruz.
Bu, görüntünün ekranın tüm genişlik ve yüksekliğini hala kapsarken, mümkün olduğunca küçültülmesini
sağlar.
Dolayısıyla, en-boy oranını değiştirmez; görüntüyü herhangi bir şekilde çarpıtmaz, ancak her iki yönde
gerektiği kadar gerilir.
Ancak, ekranımıza sığması için gereken minimum tutar ve hala mükemmel değil.
Ve yapmak istediğimiz, boyutunu değiştirmek değil, pozisyonu değiştirmek.
Arka plandaki merkez merkezini merkezileştireceğiz, ancak daha yakın olduğumuzu kaydedelim.
Fakat görüntü giderek mükemmel bir maç değil.
Ve bu değişiklikler daha sonra gelecek.
Şimdilik, Nav çubuğuna ekleme yapmak ve bunu Boucek dokümanlarına gidip bileşenlere giderken yapmak
ve daha önce de bahsettiğimde yapmak istiyorum.
Bir önyükleme çubuğu eklemezsem bunu hep yaparım.
Aksini hatırlamak çok fazla şey.
Ve ben de bunu burada kopyalayacağım.
Buradaki uygulamamıza geri dönmeye başlamak için tüm nav'u alacak ve sadece en üstte koyun.
Bu kesinlikle bizim istediğimiz KAF değil, ama yenilemek istediğimiz parçaları içeriyor.
Yeterince yakın.
Yani yapmak istediğimiz bazı değişiklikler var.
İlk ve en kolay olanı, çözümdeki içeriğimizin bir konteyner içinde olması, burada
olduğu gibi kenarlara kadar ilerlememesi.
geri dönersek, şu kontrolde eklediğimiz için artık çözüm üzerinde yaptığımız gibi biraz boşluk buluyoruz görebilirsiniz.
Dolayısıyla geri dönüp yerleştirebiliriz ya da bunu sadece div sınıfı konteyner olarak değiştirelim
ve eğer
Şimdi Nev'in gerçek içeriği üzerinde çalışalım. En kolay olan şey şu an
sadece diyor markayı değiştirmek Bu satırı sınıfı neth bar markasına eşit Markayı geri getirmek için sabit maç başına değiştirelim ve kaydedelim.
Denemek.
Tamam iyi.
Şimdi bu formdan kurtulalım.
Buna hiç ihtiyacımız yok.
Böylece formumuz hepsi burada başlıyor.
Yenilendikten kurtulun.
Açılır listeden de kurtulalım.
Buna ihtiyacın yok.
Yani burada başlar.
Biten bu yalan
tekrar taze.
Şimdi tek bir bağlantımız var.
Dolayısıyla, kaydolması ve oturum açması beklenen bu iki bağlantıyla başlayacağız.
İşte buradaki bağlantı bu yüzden bunu kayıt olmak ve daha sonra çoğaltmak için değiştirebiliriz.
İçinde bir bağlantı etiketi olan sadece bir müttefik.
Ve bu da giriş yapacak.
Hadi kontrol edelim.
Harika.
Böylece simgeler sonunda gelir.
İki bağlantımız var.
Şimdi burada üç bağlantıya ihtiyacımız var.
Zaten ikimiz var ve o açılır menüden kurtulacağız.
Bu yüzden, eve temas halinde olmamız lazım.
Yani bir açılır menüyü burada bulursunuz.
Sınıf eşit açılır.
Şimdi ondan kurtulalım ve şimdi Akbar çok basitleşti.
Şimdi iki farklı uzunluğa sahibiz.
Aslında her ikisinden de kurtulacağız ve sıfırdan başlayacağız.
Bu nedenle, bir bağlantı etiketi ile bir müttefik ekleyeceğiz ve bunu üç kez yapacağız.
Bu ilk kişi ev demeliydi.
Sıradaki.
Ve son kişi temas.
Hadi kontrol edelim.
Orada üç uzunluk var.
Küçük bir şey.
Evin aktif olması ve gerçekten kolay bir önyükleme yapması gerekiyor.
Yapmamız gereken tek şey, müttefiklerimize sınıf eşitliğini aktif
olarak eklemek değil, ana müttefik olarak eklemek ve şimdi evin aktif bağlantı haline geldiğidir.
Harika.
Tamam,
o zaman bu bizim gezinme çubuğumuz ve yeniden boyut alırsak, zaten bu hamburgerin iyi çalıştığını göreceksin.
Arka plan görüntüsünün berbat olmasıyla ilgili bir sorunun var.
Bunu biraz biraz örteneceğiz fakat hamberger iyi çalışıyor.
Her şey iyi gözüküyor.
Şimdi fontu ele alalım, burada kullandığım yazı tipi Ledo L'dir. A. Google fontlarından geldi, bu yüzden Google fontlarına gidip Ledo'yu arayacağım.
LA T-O her koleksiyona gidiyor.
Normal ve cesur olursa kullanalım.
Ayrıca H-1'imizin cesur olmasını istiyoruz.
Tamam.
Sonra bu bağlantıyı doğrudan başvurusuna ekleyeceğiz.
Buraya gelin kaydet şimdi kaydet Uygulamaları girin Bu fontu her şeye uygulayacağımızı değerlendiriyoruz.
Bu yüzden gövde font ailesi içinde Ledo seçeceğim ve doğru yüklendiğinden emin olalım.
Yenilendiğimiz şeyleri görün.
Ve ön değişiklikleri görmek zor çünkü metin karanlık ama değişti, burada
da NFR'de görebiliyorsun.
Değişti.
Bu çözümde sahip olduğumuz şeylerle eşleşir.