Tekrar hoşgeldiniz.
Yapılacaklar Listesi uygulaması temel işlevselliğine sahip olduğumuza göre, artık bunun gibi görünmesine
odaklanmamızın zamanı geldi.
Dolayısıyla kesinlikle gidecek çok yollarımız var.
Ve bir anda sadece bir parçaya saldıracağız.
Bunu mümkün olan en mantıklı sırada yapmaya çalışacağım.
yazı tipi gibi büyük parçalardan bazılarıyla başlayacağız, burada bu büyük kapta doğru kenar boşluğuna ve dolguya
sahip olduğumuzdan emin olun ve daha sonra daha nüanslı bazı şeylere odaklanacağız.
Arka plan renkleri ve
Tamam, burada başlayalım.
Yapacağımız ilk şey tam ekranı yapacağım.
Baştan aşağı iterek başlayalım.
Bu bizim konteyner divizomu.
Burada daha fazla alana sahip olacak şekilde üste bir kenar boşluğu ekleyeceğiz.
Dolayısıyla C S S'ye geri döneceğiz ve şimdi kapatıp javascript yapabiliriz.
Bizim div konteyner hakkında bir fikrim var ve sonra gidip zaten burada yaptıklarını seçeceğiz.
Ve sıfır OTTO bir kenar boşluğu daha iyi üst ve altta yüz piksel vermek.
Unutmayın ki eğer x'e ihtiyacımız varsa sıfıra ihtiyacımız yok, ancak bir numaramız varsa yapacağız.
Şimdi bir göz atalım.
Tamam şimdi şimdi aynı yerde başlıyorlar.
Aynı marjinleri var.
Yapacağımız bir sonraki şey bu kabın içine bir arka plan rengi eklemektir.
Görmek biraz zor ama arka taraftan gösterilen bir şeyi sildim.
Bu renk burada.
Tekrar yap.
Bu yüzden devam edip onu ekleyeceğiz.
Bunun yerine konteynerin yerine arka plan ve rengi söyle.
Okudum ki 7'den 7 sonra F 7 oldu.
Aynen böyle.
Ve nasıl görüneceğini kontrol edelim.
TAMAM.
Dolayısıyla, burada aynı gri rengi var.
Aynı açık gri.
Sonraki yapacağımız şey sınırda çalışmak.
Ve aslında bir sınır yok.
Sahip olduğu şey çok hafif bir kutu gölgesi.
Dolayısıyla henüz kutu gölgesi görmedik.
Bunu burada göstereceğim ve MT-NW'ye geçeceğim ve sadece bir gölge efekti eklemenin bir yolu.
Kaydırırsam, burada farklı kutu gölgeleri görürsün ve çok hafif bir çerçeve
bulacağım, ancak bunun farkına varırsan gerçekten hafif bir gölge görürsün.
Dolayısıyla kullanacağımız sözdizimi ve gölge sınırımızdan kurtulacak ve kutu çizgi gölgesi 0 0 3 piksel ve daha
sonra bir renk ve renk temel olarak siyah ancak R olacak. G. Ve sonra onu gerçekten şeffaf yapacağız.
Bu yüzden neredeyse hiç farkedilmez.
Ve yenilersem.
Şimdi sınırımız yok, ancak bu öğenin etrafında hafif bir gölge var.
TAMAM.
Şu an konteynere yapacağımız tek şey bu.
H-1'e saldıralım.
Bu yüzden buraya gidiyoruz.
Bu yüzden çağımızda sadece bir H1 düşündüm.
Hiçbir fikri yok ya da bir şey yok ve her şey yolunda.
CSSA dosyasına gidelim ve bir arka plan rengi ekleyerek başlayalım.
Bu yüzden her birini seçeceğiz ve arka
plan 2 9 8 0 be 9 olan bir renk ve kaydedecek ve yenileyecek ve şimdi mavi doğru gölgedeğiliz.
Bu nedenle de yazı tipi rengini
beyaza çevirip hızlı bir şekilde göstereceğiz.
Tamam.
Yavaşça buraya inching.
Yapacağımız sonraki şey, ona bir fark yaratmamakta ve şimdi burada sahip olduğumuz bu alantan kurtulacağız.
Burada görebileceğiniz gibi herhangi bir fark yok.
Bu bizim H-1.
Burada dolgu var.
Böylece metin burada olduğu gibi kenarına doğru gitmiyor.
Ancak mavi kutusunun dışında herhangi bir fark yok.
Bu bizim yazı girişi ve aynı zamanda dolgu arttı ama bunun çevresinde herhangi bir fark yok.
Bu yüzden Yapılacaklar listemizin etrafına biraz dolgu ekleyerek başlayacağız.
H-1 Burada üst ve
altta 10 piksel, sola ve sağa 20 piksel ekleyip kaydedeceğiz.
Yaklaştığımızı görebiliyorsun.
Yazı tipi boyutunu değiştirmemiz gerekiyor.
Yazı tipini değiştirmemiz gerekiyor.
Ayrıca bunların hepsini kaplayacağız ve bunu şimdiye kadar yapabileceğiz.
Benim favorilerimden birinin metin büyük harf dönüşümü olduğunu bilmelisin.
Sadece güzel olduğunu düşünüyorum.
İşte biz tüm büyük harf
font boyutunun 24 piksel olması gerektiği için font boyutunun 24 x olması ve OK ile kaydetmesi için gidiyoruz, yapacağımız son şey normal bir font ağırlığı olduğundan emin olmaktır.
Öyleyse varsayılan olarak H1 değeri cesur bir şekilde bulunur ve bunu istemiyoruz.
Bu yüzden Funt yolunu normal yapacağız ya da font weight 400 yazabiliyoruz.
Oraya gidiyoruz.
değiştirme meselesi.
Şimdi, sadece bu mermi noktalarından kurtulmak için başkasına geri dönecek yazı tipini
Burada herhangi bir madde işareti olup olmadığımı görebilirsiniz.
Bu mermi puanları varsayılan tarayıcı stili olarak kabul edilir.
Bu yüzden onu geçersiz kılacağız.
İçinde bulundukları UL'yi seçip list stili yok demeye gidiyoruz.
Ve geri dönüp tazelenirsek, artık mermi puanımız yok.
burayı yenileyeceğini ve iyi tarafların boşluğundan kurtulmamak için onur duyuyoruz, çünkü biz
burada boşluk var demektir Bununla birlikte çalışmak gerekiyor, fakat bu UL'in kendisi değil yalanı.
Yapacağımız başka bir şey de, marjın sıfır olmasını ve dolgunun sıfır olmasını ve
Bu yüzden ona geri döneceğiz.
Şimdi doğru yazı tipini ekleyelim ve bu yazı tipinin adı rubato ve Google yazı tiplerinin bir parçası.
Yani burada açık var ve ben sadece rubato için bir arama yapacağım.
Ve işte gidiyoruz.
Koleksiyona ekleyin ve sonra kullanın.
Ve normal bir yol isteyeceğiz.
Biz cesur ve orta da ekleyeceğiz.
Şimdi devam edin ve bu bağlantıyı HMO'ya kopyalayın ve bu pencereyi kapatabiliriz.
Her ekip burada ve sadece en üstte yapıştıracağınız yere
geri dönün ve sonra kaydetmek için o zaman değerlendirmeye gideceğiz ve vücuda bazı stiller ekleyeceğiz.
Her şey bu fontu kullanır, bu nedenle yazı tipi ailesini robotik olarak ekleyeceğiz.
Aynen böyle.
Ve eğer şimdi geri dönüp yenileyelim, H-1 hemen hemen orada.
Tüm yazı tiplerinde dokunmadığımız bu düğmenin yanı
sıra aralığın hepsi de aynı.
Ve müttefiklerimiz oraya ulaşıyor.
Onların doğru fontu var.
Boşluk ve dolgu sorunlarından bazıları üzerinde çalışmamız gerekiyor.
Ele alacağımız sonraki şey yalanlardaki arka plan renkleridir.
Yani diğer her yalan.
Beyaz renk saf beyazdan bu gri renge kadar arka plan olarak varıyoruz.
Dolayısıyla SS'yi kullanarak diğer müttefiklerimize stiller katabiliriz.
Şimdi bunu yapalım.
Yapacağımız ilk şey tüm
müttefiklerini seçmek ve onlara beyaz bir arka plan vermektir, böylece bunu F F F veya beyaz veya R-GA 255 255 ila 55 ile yapabilir ve sonra da diğer yalanları yaparız.
Ve bunun sözdizimi, yalan ve çocuğu sona erdirir.
Ve bu da çok iyi ve birbirlerinin kalıplarını tanımladı.
Ve biz üç yaptıysak ve her üçünü söylerdik, ancak sadece birbirimizi istiyoruz.
Arka plan rengini konteyner arka planı
ve yenileme için kullandığımız f7 f7 f7 ile aynı hale getireceğiz.
Şimdi görmek zor çünkü onlar biraz küçük ama diğer her yalan şimdi bu gri renkte.
Biraz daha ekleyin ve alternatif mükemmel olduğunu görebilirsiniz.
Şimdi yalanlardaki yüksekliğin yanı sıra dolgu konusunu da ele alalım.
Yapılması gereken ilk şey, onlara 40 piksel
bir yükseklik vermektir, böylece tüm müttefikler 40 x yüksekliğinde ve yenileme işlemine geri döneceğiz.
Tamam, böylece doğru miktarda yer kaplıyorlar.
Şimdi onları karşılaştırdık, yazı tipinde bazı konular var.
Ve ayrıca bazı padding eklememiz gerekir.
Ardından, metnin dikey olarak ortalanması için yalanlardaki satır yüksekliği özelliğini değiştireceğiz.
Şu anda çizgi temel olarak bu boy.
40 pikselin tamamını satır yüksekliği
40 x gösterecek şekilde yapacağız ve bu sadece çizginin boyutunu değiştiren yazı tipi boyutunu değiştirmeyecek.
Şimdi 40 piksel.
Yani satır tüm alanı kaplıyor.
Bir sonraki küçük şey saf siyahımızın rengi ve kullandığım renk tam olarak siyah değil.
Biraz daha hafif.
Bu yüzden renk ayarlayacağız ve altı altı altı yenileme var ve sonra girdiye hitap edelim.
Bu yüzden yapmanız gereken birkaç şey var.
Birincisi, doğru miktarda yer kapladığından emin olun.
Dolayısıyla bu girdi çok daha büyük ve sadece dolgu veya kenar boşluğu değil yazı tipi boyutu daha büyük.
Yeni bir arka plan rengimiz var.
Ve tıkladığımızda bir sınır var.
Bu yüzden bunların hepsinde çalışalım ve daha büyük bir font boyutu ekleyerek başlayacağız.
Bu nedenle girdi yazı tipi boyutunu seçeceğiz ve
yazı tipi boyutunu 18 piksel olacak şekilde ayarlayacağız.
Ve biz burada iken arka plan rengini
ve arka plan rengini yapacağız ve aynıdır f 7 7 1/2 7.
Aynen böyle.
Ve yenileyelim.
TAMAM.
Yaklaşıyoruz.
Yapacağımız bir sonraki adımda bir genişlik eklendiğinde vermek istediğiniz genişlik yüzde 100'dür.
Dolayısıyla şu an konteynerin bir parçası olacak.
Yenilersek şimdi tamamen geçer.
Ancak birkaç küçük sorunumuz var.
İlk işimiz, orada dolaşmaktır.
Bu nedenle, sağ taraftaki üst 13 piksele 13 piksel dolgu ekleyeceğiz.
13 piksel alt ve 20 piksel solda.
Yani bu birinde görebilirsiniz.
Üstümüz ve altımız 13'tür.
Ve solda 20 piksel var.
Dolayısıyla taze olsaydım, şimdi doğru alanı alan daha büyük bir girdimiz var.
Girişin artık çok uzun olduğu bir sorunun var.
Ile birlikte yüzde 100 olması gerektiğini söylediğimizde aslında
yalnızca içeriğin olduğu ve dolguyu içermediğini ve girdinin boşluğa dahil olmadığını ve bunun sonucunda
girdinin div sonuna kadar geçtiğini ve karışıklık yerine geçtiğini söyledik dolgu ile.
Değişiklik yapmanın başka bir yolunu kastetmek istedim, bu da Box kutulama adı verilen bir özelliktir.
Dolayısıyla blok boyutlandırma ile birkaç farklı seçeneğiniz vardır ancak temel
olarak kutunun kutu modelinin boyutlarına nasıl kontrol edeceğini kontrol eder.
Ve onu sınır Dasch kutusuna değiştireceğiz.
Ve ne okuyacağım, genişlik
ve yükseklik özelliklerinin dolgu ve kenarlık değil marjı içerdiğini söylüyor.
Bu yüzden sınır
kutusuna geçersek yapacağım sınır kutusuna gidersek, buraya gidip kutu boyutlandırma sipariş kutusu ekleyip taşımadan önce kaydedin.
Öneklere sahip olmak istediğimiz özelliklerden birisi olduğuna dikkat çekeceğim.
Web Kiti ve Mozy, Moz ve Microsoft'un karmaşası.
Ben şimdi bunu yapmayacağım.
Çözüm kodu olacak.
Ancak yazmak biraz zaman alıyor.
Dolayısıyla Chrome'da nasıl çalıştığını göreceksiniz, en azından şimdi yenileyeyim.
Kutu kenar boşluğunu da içeriyor ancak marjı içermiyor.
Bu yüzden sonuna kadar mükemmel bir uyum sağlıyoruz.
Sonra, oraya yazdığımda yazı tipine bir renk vereceğim.
Bu yüzden tüm yapmamız gereken.
bir renk söyleyeceğim.
Ben sadece H-1'den aynı rengi alıp girdiye ineceğim ve sadece o rengin olduğu
Ve şimdi yenileyip Yazmaya başlarsak gideriz.
Şimdi efekt üzerinde duralım.
Tıkladığımızda girdiye odaklanmak denir, burada etrafında bir sınır olsun görebilirsiniz.
Bu yüzden üzerinde çalışmak gerekir.
Şu an varsayılan odaklama efektimiz var.
Dolayısıyla, yalnızca fareyle üzerine gelip sözde seçici gibi, bu giriş iki nokta üst üste odak için bir seçici var.
Bu hücreler yalnızca bir girdiye odaklandıklarında çalışacaktır.
Bu yüzden odaklanacağım zaman arka planı beyaz yapacağım.
Ayrıca üç piksellik bir kenarlık da
verecek. Çalıştığımız mavi renk ve biz ona bir özet vereceğiz
bir anahat tarayıcı kendisinden aldığımız bu sinir bozucu vurguyu ifade ediyor.
Şimdi girdiye odaklanırsak,
bu yeni mavi kenarlığı elde ederiz ve arka plan rengini de değiştireceğiz, böylece gri beyaz olur.
Gitmemiz ve burada sahip olduğumuz yer tutucu
metni eklememize rağmen, girdi için yapmamız gereken tek şey bu.
Bu yüzden HTL dizinine gideceğim ve girişin yanında veya girişte yer tutucu özniteliğini ekleyeceğim.
Ve ne istersen yapabilirsin.
Sadece maç yapacağım.
Bu yüzden yapmak ve yenilemek için yeni bir şeyler ekleyin.
Oraya gidiyoruz.