1 00:00:00,420 --> 00:00:05,520 Bu derste, son video sonunda kamp gösterisi sayfasının stilini bitirmek 2 00:00:05,520 --> 00:00:06,550 için geldik. 3 00:00:06,630 --> 00:00:08,540 Yapmamız gereken bazı değişikliklerden bahsetmiştim. 4 00:00:08,640 --> 00:00:10,970 Bu saf bootstrap ile çözülemiyor. 5 00:00:10,980 --> 00:00:13,050 Bazı özel stilleri eklemeliyiz. 6 00:00:13,050 --> 00:00:18,570 Dolayısıyla bu resmin genişliğini küçük resmin yüzde 100'ünü alacak şekilde değiştirmemiz gerekiyor. 7 00:00:18,750 --> 00:00:21,050 Burada biraz dolgu eklemek istedik. 8 00:00:21,120 --> 00:00:25,050 olduğumuz yer gibi görünmelidir ve görüntünün tüm kabın kapladığını görebilirsiniz. 9 00:00:25,050 --> 00:00:25,880 Dolguya sahip 10 00:00:26,280 --> 00:00:31,810 Bunu başarmak için her Evet'deki gösteriye gidebiliriz ve buraya bir stil etiketi ekleyebiliriz. 11 00:00:32,280 --> 00:00:34,050 Ancak bu gerçekten harika bir fikir değil. 12 00:00:34,050 --> 00:00:39,840 Bunun yerine, ilk özel stil formumuza ekleyeceğiz ve bu işi yapmak için daha önceki 13 00:00:39,840 --> 00:00:42,960 bir derste yaptığımız gibi genel bir dizin oluşturacağız. 14 00:00:43,110 --> 00:00:48,790 Bu yüzden dizini genel hale getireceğim ve sonra başka bir dizini halkın içinde yapacağım. 15 00:00:48,870 --> 00:00:55,350 tane daha alacağız ve entera yapacağız ve daha sonra stil sayfalarının içinde tek bir dosya 16 00:00:55,350 --> 00:01:00,810 oluşturacağız public sosh style çarşaf çizgi ve buna Dotsie SS adını vereceğiz. Öylece. 17 00:01:00,810 --> 00:01:09,210 Bu dosyaya stil sayfaları öylesine halka açık eğik çizgi stilleri denir ve sonunda bizim javascript'imizin ön ve Javascript'i için 18 00:01:09,210 --> 00:01:10,000 başka bir 19 00:01:10,470 --> 00:01:11,260 TAMAM. 20 00:01:11,520 --> 00:01:13,040 Şimdi biz onu açmak istiyoruz. 21 00:01:13,380 --> 00:01:19,830 Bu dosyayı temel gutsiest stil sayfalarına kadar açacağız ve burada vücudunuzun mor rengini ayarlamak ve kaydetmek için 22 00:01:19,830 --> 00:01:26,790 arka plan rengini ayarlamak gibi gerçekten belirgin bir şey ekleyerek başlayalım ve daha sonra devam etmeliyiz ve bu 23 00:01:26,790 --> 00:01:28,140 da bağlantı kurmamız gerekiyor. 24 00:01:28,140 --> 00:01:36,790 Dolayısıyla, uygulama davasında burada, statik olan bir Express uygulama Express kullanan bir satır eklemeliyiz. 25 00:01:37,380 --> 00:01:41,790 Ve geçen sefer ne yaptık halka eklemişti ama aslında göstermek 26 00:01:41,790 --> 00:01:44,380 istemediğim daha iyi bir yol vardı. 27 00:01:44,400 --> 00:01:50,370 Fakat şimdi göstermek istediğim tek şey, alt çizgi altçizgi eklemelisiniz. Sevgili ismi dizin 28 00:01:50,880 --> 00:01:57,050 adı artı boşluk genel dizin adı, bu komut dosyasının çalıştığı dizini ifade eder. 29 00:01:57,180 --> 00:01:58,630 Öyleyse sana neye benzediğini göstereceğim. 30 00:01:58,800 --> 00:02:07,920 Ben sadece bir konsol yaparsanız, bunun gibi adınıza altı çizili alt çizgi kaydeder ve sunucuyu 31 00:02:07,920 --> 00:02:10,190 kaydedin ve yeniden başlatın. 32 00:02:12,000 --> 00:02:13,440 Dikkat et, burada ne var. 33 00:02:13,530 --> 00:02:19,560 Bu, tüm yol çalışma alanını kamp çizelgesinin v 5 dizininde lushly olan dizin adıdır. 34 00:02:19,710 --> 00:02:26,940 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 35 00:02:26,940 --> 00:02:30,390 şu anki dizinin garip olması beklenmedik bir şey oldu. 36 00:02:30,450 --> 00:02:36,210 Umarım asla yapmaz, ama yapsaydınız adınız daima senaryonun içinde yaşadığı 37 00:02:36,210 --> 00:02:36,650 dizindir. 38 00:02:36,900 --> 00:02:41,240 Dolayısıyla sadece daha güvenli hale geliyoruz ve toplu eğik çizgi ekliyoruz ve sadece daha geleneksel bir şekilde 39 00:02:41,250 --> 00:02:41,860 bunu yapıyoruz. 40 00:02:42,060 --> 00:02:43,820 Hiçbir şey fark etmeyeceğiz. 41 00:02:43,860 --> 00:02:44,920 Böylece biz kurtaracağız. 42 00:02:44,930 --> 00:02:50,140 Bundan kurtulabiliriz ve yaptığımız basit aklımıza eklenir. 43 00:02:50,190 --> 00:02:52,390 SS Ama henüz bağlamadık. 44 00:02:52,530 --> 00:02:54,500 Halka açık dizinde hizmet ettik. 45 00:02:54,600 --> 00:02:59,460 Şu anda sadece tek bir klasör stil sayfası olan bu dizinde her şeye hizmet ediyoruz 46 00:02:59,460 --> 00:03:01,540 ve tek bir dosya bize son verebilir. 47 00:03:01,620 --> 00:03:05,510 Ama şimdi o dosyaya bağlantı yapalım ve üstbilgi dosyasında yapalım. 48 00:03:05,580 --> 00:03:14,920 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. 49 00:03:14,980 --> 00:03:22,200 Başka bir bağlantı etiketi ekleyeceğim ve bu, H ref eşittir eğik çizgi stil sayfaları ana 50 00:03:24,660 --> 00:03:31,330 Cs'leri çizgi haline getireceğim ve sonra stil sayfası olabilmek için de satır ekleyeceğiz. 51 00:03:31,950 --> 00:03:32,500 TAMAM. 52 00:03:32,850 --> 00:03:38,340 Bu nedenle umarım şimdi genel dizinden sunduğumuz stil sayfamıza bağlantı verdik. 53 00:03:38,340 --> 00:03:40,680 Ve işe yarayıp yaramadığını test edelim. 54 00:03:40,740 --> 00:03:45,350 Her bir sayfada olacak çünkü başlığın kısmen bulunduğu her sayfa. 55 00:03:45,630 --> 00:03:46,380 Bunu test edelim. 56 00:03:46,380 --> 00:03:48,450 Açılış sayfamıza sadece gidiyoruz. 57 00:03:48,450 --> 00:03:48,980 Oraya gidiyoruz. 58 00:03:48,990 --> 00:03:55,230 Hepsi mor ve eğer kampa bakmaya gidersek, mor renkte tutmak için tamamen mor renkli bir 59 00:03:55,230 --> 00:03:56,510 arka plan var. 60 00:03:56,610 --> 00:03:57,620 Ben onu değiştireceğim. 61 00:03:57,750 --> 00:04:03,210 Ancak kazanacağımız tarzı ekleyeceğim ve bu stiller küçük resimleri etkileyecek. 62 00:04:03,210 --> 00:04:07,050 Yani bunlar küçük resimlerin yanı sıra bu küçük resim. 63 00:04:07,080 --> 00:04:13,170 Görüntüyü genişliğin yüzde 100'ünü alacağız, hem şov sayfasında hem de dizin sayfasında 64 00:04:13,170 --> 00:04:18,000 bunun olmasını istediğimizden geri gidebilir, değişebilir ve yukarı doğru değerlendirebiliriz. 65 00:04:18,180 --> 00:04:21,750 Bu nedenle küçük resimlerin içindeki tüm resimleri seçerek başlayacağız. 66 00:04:21,900 --> 00:04:25,300 Bu yüzden, bir önyükleme sınıfı olduğu için minik resme ihtiyacımız var. 67 00:04:25,550 --> 00:04:31,290 Ardından, aralarında boşluk bulunan görüntü etiketi küçük resimlerin içindeki tüm resim etiketidir. 68 00:04:31,290 --> 00:04:36,180 Ve sonra sadece genişliği yüzde 100 gibi ayarlamak istiyoruz. 69 00:04:36,300 --> 00:04:42,420 Kaydedip yenileyip bir şov sayfasına gidelim, şimdi resmimizin bu minik resmin yüzde 100'ünü 70 00:04:42,420 --> 00:04:43,510 kapladığını görebilirsin. 71 00:04:43,860 --> 00:04:48,210 Ardından, küçük resimlerin kendisini seçmemiz gerektiğini yapmak için bu aralıktan kurtulmak 72 00:04:48,210 --> 00:04:51,820 istediğimiz yerde düzeltmek gerçekten kolay olan dolgu sorununu çözmeliyiz. 73 00:04:51,870 --> 00:04:56,350 Küçük resim div ve doldurma kurtulmak ve sadece sıfır olarak ayarlayın. 74 00:04:56,490 --> 00:05:01,580 Dolayısıyla Dot küçük resim doldurma 0. 75 00:05:01,890 --> 00:05:02,930 Kurtaralım. 76 00:05:03,120 --> 00:05:05,260 Orada bu dolguya dikkat et. 77 00:05:05,280 --> 00:05:06,130 Artık gitti. 78 00:05:06,510 --> 00:05:11,230 Ve eğer dizin sayfamıza geri dönersek, bunların da aynı anda boşaltıldığını görebilirsiniz. 79 00:05:11,280 --> 00:05:12,980 Orada da dolgu yok. 80 00:05:13,320 --> 00:05:17,100 Kişisel olarak aralarında boşluk bırakmadan dolgu olmadan tercih ediyorum. 81 00:05:17,250 --> 00:05:22,290 Fakat kişisel tercih meselesidir ve bu alanı orada tekrar isterseniz, yapabileceğiniz 82 00:05:22,320 --> 00:05:27,910 şey bu stilleri bu stilin her bir küçük resme özel olarak uygulamamak değildir. 83 00:05:27,990 --> 00:05:34,290 Bunun yerine, şov sayfanızda bu minik resmi burada bir kimlik veya özel bir sınıf verebilirsiniz 84 00:05:34,290 --> 00:05:39,280 ve ardından yalnızca bu kürekleri o sınıfa veya bu kimliğe sıfıra uygulayabilirsiniz. 85 00:05:39,480 --> 00:05:44,970 Ancak bunları hepsine yapacağım ve çözmem gereken diğer konu burada dolgu. 86 00:05:45,780 --> 00:05:53,970 Dolayısıyla, bu altyazı içinde inceledikten sonra, yarattığımız div burada görebileceğiniz bir div 87 00:05:53,970 --> 00:05:55,560 sınıfı altyazıtı. 88 00:05:55,770 --> 00:06:00,870 Oraya biraz dolgu eklemek istiyoruz ve son videoda kararlaştırdığımız sayı 9 pikseldir. 89 00:06:00,930 --> 00:06:02,830 Öyleyse suç ortağı kapatayım. Buraya dönün ve ben 90 00:06:03,030 --> 00:06:08,850 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. 91 00:06:08,850 --> 00:06:11,100 Dolayısıyla Nokta küçük 92 00:06:11,220 --> 00:06:21,690 resim başlığı dolu ve onlara dokuz piksellik dolgu vereceğiz, tıpkı bu gibi sayfayı yenileyelim. 93 00:06:21,690 --> 00:06:23,130 Oraya gidiyoruz. 94 00:06:23,130 --> 00:06:23,750 Aradığımız aralığı alıyoruz. 95 00:06:23,760 --> 00:06:26,130 Tamam. 96 00:06:26,130 --> 00:06:26,390 Tüm yapmak istediğim de bu kadar. 97 00:06:26,400 --> 00:06:27,610 Başardıklarımızı hızlı bir şekilde özetleyelim. 98 00:06:27,780 --> 00:06:29,910 Yeni bir dosya ana Nazi 99 00:06:29,910 --> 00:06:36,470 SS yaptık ve onu stil sayfalarının içindeki genel dizinin içine koyduk ve nihayetinde özellikle açılış sayfası 100 00:06:36,840 --> 00:06:41,490 için daha fazla stil sayfası olacak ve ayrıca burada da javascript yüklenecek. 101 00:06:41,490 --> 00:06:43,560 Ve sonra aslında halka açık 102 00:06:43,680 --> 00:06:49,740 dizini kullanmak için etkileşim kurmalıyız Evet, kamuya açık dizinde hizmet vermek için ifade et. 103 00:06:49,740 --> 00:06:50,410 Ve ben 104 00:06:50,520 --> 00:06:55,230 size bu altçizgi isminin altını çizdi ve en son şey, onu üstbilgi dosyasına eklediğimiz. 105 00:06:55,230 --> 00:06:56,660 Sadece burada ve Slash stil sayfaları slash maned bak SS ile bağlantı 106 00:06:56,680 --> 00:07:01,300