Bu videoda, bu fotoğrafçının portföy sitesini sıfırdan yaratacağız.
Genellikle bunu kendi başınıza yapmaya çalışmanızı ve ardından size bir çözüm videosu vermenizi
rica ederim.
Ancak bu kez birlikte kasıtlı bir kod var.
Bu yüzden kodlamaya çalışmanızı isterim ve isterseniz bir kere izleyebilir ve bir dahaki
sefere kodlayabilirsiniz.
Ancak burada amaç, birlikte yapacağımız ve bundan kurtulmak istediğimiz iki başka
şey var.
İlki şamandıra diye göstereceğim yeni bir mülk var ve ikincisi, biraz gurur duyabileceği bir
şey inşa etmek için biraz deneyim kazanmanı istiyorum.
Şimdiye kadar yaptıklarımızın sadece çok parlak renkleri olan basit şeylerden biraz
daha iyi görünüyor.
Dolayısıyla, yapacağımız çok küçük bir fotoğraf blogu.
Öyleyse başlayalım.
Yüce aç.
Fotoğraf şeridi olan HMO adlı tek bir dosyam var.
İlk önce sana işe yaradığımız resmi veya başka bir şeyi göstereceğim.
Yani bunlar Flickr'da bulduğum üç farklı fotoğrafçının her biri üç resimden oluşan dokuz
imge var.
Tüm fotoğraflar Creative Commons tarafından lisanslanmıştır.
Sen buradan lisans alabilirsin.
bir gösteri yapacağım, bu yüzden don divanlara merhaba deyin, veda eden
biri divana eklediğimde bu bölümle birlikte kodlamam gerekiyor ve onları kurtaracağım ve sonra
da benim stil sayfamı ekleyeceğim. SS ve sonra burada div'lerimi stiline ayarlayacağım.
Öyleyse, bu resim URL'lerinizle hiçbir şey yapmadan önce onlardan kurtulacağım ve yaşlı iskelet
ad-Din'i fotoğraf bloguna ekleyeceğim ve hızlı
Bu yüzden aslında onlara bir ben vereceğim. D. Sadece bir tane deyin.
Ve yine bu sadece bir şeyi gösterecek ve sonra da burada bir ve iki seçeceğim ve hepsine bir
başka arka plan rengi kırmızı
ve arka plan rengi mor koymak için yapacağım ve o zaman ikisini de tüm div'leri ve genişliğini 100
piksele vereceğim.
Bu yüzden bunu yaptığımda tarayıcıda açıyorum.
İki div var, birbiri ardına.
Teftiş edersek unuturlar.
Temel olarak kendi hattını blok seviyesi unsuru olarak alacak şekilde ayarlanırlar.
Dolayısıyla, bunun olmasını istemiyorsak, görüntü kalıbı için yapacağımız şey, resimlerimizin bir ızgarayı
veya çoklu çizgiyi oluşturmak için aynı çizgide olmasıdır.
Ve öyleyse div ile bunu yapmak istersem float adında bir özellik kullanmam gerekiyor ya da
bunu yapmanın bir yolu bu.
Dolayısıyla, yaptığım tek şey güvenli bir şamandıranın solu ve bunun ne yapacağı.
Tüm div'leri belgenin normal akışından çıkaracak.
Yani halihazırda her biri ayrı hatlarda bulunan yığınlar var.
Ve gerçekleşecek olan şey, neredeyse belgelerimizde yerçekimi gittikçe onu düşünmek için sola
doğru kayacaklar.
Ve böylece bu div kayar ve sola doğru itilir.
Buna karşı.
Burada tazeli olsaydım, şimdi aynı çizgide olduklarını görebilirsiniz.
böylece temel olarak birbirine karşı çıkıp bir ızgara oluşturacak görüntüler elde edebiliyoruz.
Bu yüzden, bu ilkeyi görüntüleri kullanırken kullanacağız
Bu yüzden şimdi bunlardan kurtulacağım ve sahip olduğum cihazdan kurtulacağım ve bu şekilde
imajımıza ekleyeceğim.
Bu yüzden bu tam ekranı yapacağım ve sadece bu videoda yer alan bu
resim bağlantılarını yapıştıracağım.
Bunun yerine, dokuz resim etiketi yaparak bunları bir resim etiketi yaptım ve sonra da kopyalayıp
dokuz kez yapıştırmaktan çok yavaş olmalıyım.
ve sonra resim kaynağına eşit olacak ve sonra da satırın sonuna geçeceğim.
Her satırın başlangıcını seçmek için komutu tıklattığım yerde biraz yüce büyü kullanacağım
Bu yüzden bir komut sağ ok komutunu kullandım sol ok başa
götürür komut sağdan sonuna gider ve sonra teklifle ve ardından kapanış ayracıyla bitiririm.
Dolayısıyla, Elf'lerin hepsini görüntü etiketleri olarak çevrelemek için gerçekten kolay ve hızlı bir yol vardı.
Bu yüzden bunu kaydedersem ve tarayıcıya giderlerse, yenilediğimde göreceksin.
Artık dokuz imajımız var.
Tabii ki entegre değildir.
Çok fazla yer kaplıyorlar.
Şimdi ne yapacağız stil sayfamıza gidin ve tüm resimleri seçin.
Ve muhtemelen burada yapmak istiyoruz ilk şey sadece onları uzakta vermektir.
Öyleyse onlara başlamak için 100 piksel gibi bir değer verelim ve bu çok küçük olacak.
Fakat ne olduğunu ve yenilendiğini görmenizi ve tüm bu görüntülerin bir arada
olduğunun farkında olacaksın, aralarında belirtmediğimiz aralık var.
Kenar boşluğu, dolgu veya başka bir şey belirlemedik.
O halde, olan şey, aslında eklenen beyaz boşluğun olması ve buharlı baykuşta
tuhaf bir şey olması.
Ancak başka bir şey olmadan görüntüler elde ettiğimizde, aralarında beyaz boşluklar ya da sadece tek
bir boşluk var.
Bu yüzden, ondan kurtulmak istersek, float'ı kullanabiliriz ve bu şamandıranın şeyleri belgenin
akışından alacağını hatırlayabiliriz.
Dolayısıyla Şimdi yenilersem, görüntülerin birbirlerine karşı birbirine karşı koyduğunu ve aralarında hiç
boşluk olmadığını görebilirsiniz.
Sonra geri dönüp o mekanı kendi kendimize ekleyebiliriz.
Dolayısıyla açıkçası, bu küçük alanı almalarını istemiyoruz.
Karşılaşmanın üçünü istiyoruz; aralarında biraz kenar boşluğu istiyoruz, ancak bunu kontrol etmek istiyoruz.
Dolayısıyla onları yüzerek tarayıcıya eklediğimiz beyaz alandan kurtulduk, böylece gerçek
boşluk yerine kenar boşluğu özelliklerini kullanarak kendi özel aralığına geçebiliriz.
Şimdi genişliği değiştireceğiz ve yüzde 30 ile başlayalım.
Dolayısıyla, İsrail'in vücudun ana öğelerine göre yüzdesini hatırlayın.
Böylece her biri vücudun yüzde 30'unu alacaktır.
Ve 30'la başlayacağım nedeni, hepsinin tek bir hatta uygun olmasını sağlamaktır.
Aklımda ve üçünün arasında boşluk geçtiğini göreceksin.
Ve sonra yüzde 10'umuz var, çünkü bu yüzde 90 alıyor.
Bu yüzden, marjı gerçekte bölmek ve aralarında biraz boşluk eklemek için bu diğer yüzdeyi
kullanacağız.
Yani zaten üç üç ızgarımız var.
Daha sonra yapmak istediğimiz şey, şunun gibi olmasını sağlamak.
Veya aramızdaki aralığı da eşit tutuyoruz.
Yani aslında biraz matematik yapmak zorundayız.
Bu yüzden zaten yaptım.
Ama temel olarak burada hesapladığımızda bir marj vardır, burada bir de bir fark var.
Burada üç marj var.
Ve sonra bu beşte bunun için.
Ve bir buçukta.
Dolayısıyla yüzde 10'luk sahibiz ve 6 ile 10'u ikiye bölen altı sayı bir altı altı puan olarak bölmeliyiz.
Dolayısıyla ne yapacağız sadece bir altı altı yüzde altı farkla söylüyorsunuz.
Dolayısıyla, tarayıcıya geri dönüp sonuca bakıp yenileyeceğimizi fark edersek aralarında boşluk bırakarak
üç eşit aralıklı resim elde ettiğimizi görürsünüz.
Böylece matematik bir kez daha çarptı.
Bunların her biri yüzde 10'dur.
Dolayısıyla sadece yüzde 30 veriyorlar.
Ve her birinin marjı 1'dir. Her iki yüzde 6 oranında.
Dolayısıyla, her iki tarafı da sola ve sağa birer puan altı, iki artı yüzde 30 alıyoruz ve
her biri için otuz üç puan üçü alıyoruz.
Bu, tam olarak neredeyse tam da yuvarlanıyor ama bu bizim burada yapabileceğimiz en iyisi.
Yani otuz üç puan üç yüzde.
Bunların her birini doğrulamak için yalnızca inceleyebiliriz.
Oraya gidiyoruz.
Tam üçte birini alabildiğini görebilirsiniz