Bu derste, son video sonunda kamp gösterisi sayfasının stilini bitirmek
için geldik.
Yapmamız gereken bazı değişikliklerden bahsetmiştim.
Bu saf bootstrap ile çözülemiyor.
Bazı özel stilleri eklemeliyiz.
Dolayısıyla bu resmin genişliğini küçük resmin yüzde 100'ünü alacak şekilde değiştirmemiz gerekiyor.
Burada biraz dolgu eklemek istedik.
olduğumuz yer gibi görünmelidir ve görüntünün tüm kabın kapladığını görebilirsiniz.
Dolguya sahip
Bunu başarmak için her Evet'deki gösteriye gidebiliriz ve buraya bir stil etiketi ekleyebiliriz.
Ancak bu gerçekten harika bir fikir değil.
Bunun yerine, ilk özel stil formumuza ekleyeceğiz ve bu işi yapmak için daha önceki
bir derste yaptığımız gibi genel bir dizin oluşturacağız.
Bu yüzden dizini genel hale getireceğim ve sonra başka bir dizini halkın içinde yapacağım.
tane daha alacağız ve entera yapacağız ve daha sonra stil sayfalarının içinde tek bir dosya
oluşturacağız public sosh style çarşaf çizgi ve buna Dotsie SS adını vereceğiz. Öylece.
Bu dosyaya stil sayfaları öylesine halka açık eğik çizgi stilleri denir ve sonunda bizim javascript'imizin ön ve Javascript'i için
başka bir
TAMAM.
Şimdi biz onu açmak istiyoruz.
Bu dosyayı temel gutsiest stil sayfalarına kadar açacağız ve burada vücudunuzun mor rengini ayarlamak ve kaydetmek için
arka plan rengini ayarlamak gibi gerçekten belirgin bir şey ekleyerek başlayalım ve daha sonra devam etmeliyiz ve bu
da bağlantı kurmamız gerekiyor.
Dolayısıyla, uygulama davasında burada, statik olan bir Express uygulama Express kullanan bir satır eklemeliyiz.
Ve geçen sefer ne yaptık halka eklemişti ama aslında göstermek
istemediğim daha iyi bir yol vardı.
Fakat şimdi göstermek istediğim tek şey, alt çizgi altçizgi eklemelisiniz. Sevgili ismi dizin
adı artı boşluk genel dizin adı, bu komut dosyasının çalıştığı dizini ifade eder.
Öyleyse sana neye benzediğini göstereceğim.
Ben sadece bir konsol yaparsanız, bunun gibi adınıza altı çizili alt çizgi kaydeder ve sunucuyu
kaydedin ve yeniden başlatın.
Dikkat et, burada ne var.
Bu, tüm yol çalışma alanını kamp çizelgesinin v 5 dizininde lushly olan dizin adıdır.
Böylece dir name artı eğik çizgi halkı ekleyerek, yalnızca daha güvenli oluyoruz çünkü potansiyel olarak bir şekilde bu değiştiğinde
şu anki dizinin garip olması beklenmedik bir şey oldu.
Umarım asla yapmaz, ama yapsaydınız adınız daima senaryonun içinde yaşadığı
dizindir.
Dolayısıyla sadece daha güvenli hale geliyoruz ve toplu eğik çizgi ekliyoruz ve sadece daha geleneksel bir şekilde
bunu yapıyoruz.
Hiçbir şey fark etmeyeceğiz.
Böylece biz kurtaracağız.
Bundan kurtulabiliriz ve yaptığımız basit aklımıza eklenir.
SS Ama henüz bağlamadık.
Halka açık dizinde hizmet ettik.
Şu anda sadece tek bir klasör stil sayfası olan bu dizinde her şeye hizmet ediyoruz
ve tek bir dosya bize son verebilir.
Ama şimdi o dosyaya bağlantı yapalım ve üstbilgi dosyasında yapalım.
Bu yüzden C9'ların görüşlerine Parshall'ın eğik çizgi çizgisini çizip daha sonra başında bootstrap'tan başlayacağım.
Başka bir bağlantı etiketi ekleyeceğim ve bu, H ref eşittir eğik çizgi stil sayfaları ana
Cs'leri çizgi haline getireceğim ve sonra stil sayfası olabilmek için de satır ekleyeceğiz.
TAMAM.
Bu nedenle umarım şimdi genel dizinden sunduğumuz stil sayfamıza bağlantı verdik.
Ve işe yarayıp yaramadığını test edelim.
Her bir sayfada olacak çünkü başlığın kısmen bulunduğu her sayfa.
Bunu test edelim.
Açılış sayfamıza sadece gidiyoruz.
Oraya gidiyoruz.
Hepsi mor ve eğer kampa bakmaya gidersek, mor renkte tutmak için tamamen mor renkli bir
arka plan var.
Ben onu değiştireceğim.
Ancak kazanacağımız tarzı ekleyeceğim ve bu stiller küçük resimleri etkileyecek.
Yani bunlar küçük resimlerin yanı sıra bu küçük resim.
Görüntüyü genişliğin yüzde 100'ünü alacağız, hem şov sayfasında hem de dizin sayfasında
bunun olmasını istediğimizden geri gidebilir, değişebilir ve yukarı doğru değerlendirebiliriz.
Bu nedenle küçük resimlerin içindeki tüm resimleri seçerek başlayacağız.
Bu yüzden, bir önyükleme sınıfı olduğu için minik resme ihtiyacımız var.
Ardından, aralarında boşluk bulunan görüntü etiketi küçük resimlerin içindeki tüm resim etiketidir.
Ve sonra sadece genişliği yüzde 100 gibi ayarlamak istiyoruz.
Kaydedip yenileyip bir şov sayfasına gidelim, şimdi resmimizin bu minik resmin yüzde 100'ünü
kapladığını görebilirsin.
Ardından, küçük resimlerin kendisini seçmemiz gerektiğini yapmak için bu aralıktan kurtulmak
istediğimiz yerde düzeltmek gerçekten kolay olan dolgu sorununu çözmeliyiz.
Küçük resim div ve doldurma kurtulmak ve sadece sıfır olarak ayarlayın.
Dolayısıyla Dot küçük resim doldurma 0.
Kurtaralım.
Orada bu dolguya dikkat et.
Artık gitti.
Ve eğer dizin sayfamıza geri dönersek, bunların da aynı anda boşaltıldığını görebilirsiniz.
Orada da dolgu yok.
Kişisel olarak aralarında boşluk bırakmadan dolgu olmadan tercih ediyorum.
Fakat kişisel tercih meselesidir ve bu alanı orada tekrar isterseniz, yapabileceğiniz
şey bu stilleri bu stilin her bir küçük resme özel olarak uygulamamak değildir.
Bunun yerine, şov sayfanızda bu minik resmi burada bir kimlik veya özel bir sınıf verebilirsiniz
ve ardından yalnızca bu kürekleri o sınıfa veya bu kimliğe sıfıra uygulayabilirsiniz.
Ancak bunları hepsine yapacağım ve çözmem gereken diğer konu burada dolgu.
Dolayısıyla, bu altyazı içinde inceledikten sonra, yarattığımız div burada görebileceğiniz bir div
sınıfı altyazıtı.
Oraya biraz dolgu eklemek istiyoruz ve son videoda kararlaştırdığımız sayı 9 pikseldir.
Öyleyse suç ortağı kapatayım. Buraya dönün ve ben
sadece tüm resim yazısı türünün yerine seçeceğim, yalnızca küçük resim içindeki başlık yazılarını seçeceğim.
Dolayısıyla Nokta küçük
resim başlığı dolu ve onlara dokuz piksellik dolgu vereceğiz, tıpkı bu gibi sayfayı yenileyelim.
Oraya gidiyoruz.
Aradığımız aralığı alıyoruz.
Tamam.
Tüm yapmak istediğim de bu kadar.
Başardıklarımızı hızlı bir şekilde özetleyelim.
Yeni bir dosya ana Nazi
SS yaptık ve onu stil sayfalarının içindeki genel dizinin içine koyduk ve nihayetinde özellikle açılış sayfası
için daha fazla stil sayfası olacak ve ayrıca burada da javascript yüklenecek.
Ve sonra aslında halka açık
dizini kullanmak için etkileşim kurmalıyız Evet, kamuya açık dizinde hizmet vermek için ifade et.
Ve ben
size bu altçizgi isminin altını çizdi ve en son şey, onu üstbilgi dosyasına eklediğimiz.
Sadece burada ve Slash stil sayfaları slash maned bak SS ile bağlantı