Welkom terug.
Nu we de basisfunctionaliteit van onze To Do lijst app gedaan is het tijd voor ons te concentreren op waardoor het lijkt alsof dit.
Dus we hebben zeker wel een manier om te gaan.
En we gaan gewoon om dit een stuk aan te vallen op een moment.
Ik zal proberen en doe dit in de meest logische volgorde mogelijk.
We beginnen met een aantal van de grotere stukken, zoals de achtergrond kleuren en lettertypen ervoor te zorgen dat we de juiste marge en padding op deze grote container hier en dan zullen we ons richten op een aantal van de meer nuance dingen.
OK laten we hier beginnen.
Het eerste wat we doen Ik zal een volledig scherm te doen.
Laten we beginnen met één druk deze naar beneden.
Dit is onze container div.
We zullen een marge toe te voegen aan de top, zodat we meer ruimte hier.
Dus we terug naar onze C S S gaan en kan sluiten of javascript voor nu.
Onze div heeft een idee van de verpakking en dan gaan we en selecteert u die hier die u al hebt gedaan.
En in plaats van een marge van nul OTTO Well geven honderd pixels aan de boven- en onderkant.
En vergeet niet dat we de x nodig als we nul we geen X nodig heeft, maar als we een nummer wat we doen.
Laten we nu eens een kijkje nemen.
OK dus nu zijn ze beginnen op dezelfde plaats.
Ze hebben dezelfde marge daar.
Het volgende wat we doen is het toevoegen van een achtergrondkleur op deze houder, die deze heeft.
Het is een beetje moeilijk te zien, maar als ik iets verwijderen toont door in de rug.
Het is deze kleur hier.
Dus dat opnieuw.
Dus we zullen doorgaan en toevoegen dat.
Dus in plaats van de verpakking goed zeggen de achtergrond en de kleur.
Ik lees net het uit is F 7 7 na 7.
Gewoon zo.
En laten we eens kijken hoe dat eruit ziet.
OK.
Dus hebben we dezelfde grijze kleur die we hebben hier.
Het is hetzelfde lichtgrijs.
Het volgende wat we doen is het werk op de grens.
En dit eigenlijk geen rand.
Wat het wel hebben, is een zeer lichte doos schaduw.
Dus hebben we nog niet gezien box schaduw.
Ik zal laten zien dat hier en ga in MT-NW en het is gewoon een manier van het toevoegen van een schaduw effect.
Dus als ik naar beneden scrollen kun je hier ziet zijn een aantal verschillende box schaduwen en we gaan om een ​​zeer licht een te hebben, maar als je merkt rond dit is er echt een lichte schaduw.
Dus de syntaxis en de schaduw die we gaan gebruiken zal zich te ontdoen van onze grens is doos dash schaduw 0 0 3 pixels en vervolgens een kleur en onze kleur het gaat alleen maar in principe zwart te zijn, maar het is R.G ..
En dan gaan we het echt heel transparant te maken.
Dus gewoon nauwelijks merkbaar.
En als ik te vernieuwen.
We hebben geen rand, maar nu is er een lichte schaduw rond dit element.
OK.
Dat is alles wat we zullen doen om de container voor nu.
Laten we eens een aanval op de H-1.
Dus deze rubriek hier.
Dus dat is in onze tijd hem l slechts beschouwd als een H1.
Het hoeft niet een ID of iets en dat is prima.
Laten we naar de CSSA dossier en beginnen met het toevoegen van een achtergrondkleur.
Dus we zullen elk een te selecteren en de achtergrond is een kleur die 2 9 8 0 9 zijn en ze zullen slaan en te vernieuwen en we hebben nu de juiste schaduw van blauw.
Dus we ook het lettertype wijzigen kleur wit en snel te laten zien dat.
Okee.
Langzaam tippen dichterbij hier.
Het volgende wat we doen is er geen marge en nu zullen we gewoon te ontdoen van deze ruimte die we hier hadden.
Zoals je hier kunt zien is er geen marge.
Dit is onze H-1.
Er is padding hier.
Zodat de tekst niet goed optrekken tegen de rand als het hier doet.
Maar er is geen marge op de buitenkant van de blauwe doos.
Dit is onze tekstinvoer en dat is ook toegenomen opvulling, maar er is geen marge rond dat ook niet.
Dus we zullen beginnen met het toevoegen van een aantal padding rond onze To Do lijst.
H-1 Dus hier gaan we 10 pixels aan de boven- en onderkant en 20 pixels naar links en rechts en slaan.
Je kunt zien dat we steeds dichterbij.
We moeten om de lettergrootte te wijzigen.
Noodzaak om het lettertype te wijzigen.
Ook zullen we dat allemaal hoofdletters en we kunnen dat doen door nu.
U moet weten een van mijn favorieten is de tekst te transformeren hoofdletters.
Ik denk dat het wel cool.
Daar gaan we krijgen we in hoofdletters de lettergrootte moet worden 24 pixels zodat lettergrootte 24 x en op te slaan OK het laatste wat we zullen doen is ervoor zorgen dat het een normaal lettertype gewicht.
Dus een H1 standaard is eigenlijk vet en we willen dat niet.
Dus we Funt manier te doen normaal of we kunnen ook schrijven tekengewicht 400.
Daar gaan we.
Nu is het gewoon een kwestie van het veranderen van het lettertype dat zal terugkomen naar het volgende wat je wilt aan te pakken is het wegwerken van deze bullet points.
U kunt zien of we geen bullet points hier niet hebben.
Die bullet points worden beschouwd als de standaard browser-stijl.
Dus we zullen negeren dat.
We gaan naar de UB te kiezen dat ze de binnenkant van en zeg lijststijl geen.
En als we terug te gaan en te vernieuwen we nu hebben geen bullet points.
Een ander ding dat ik ga doen is eer je goed stel de marge nul te zijn en de opvulling op nul en het zal hier verfrissen en niet alleen te ontdoen van de ruimte aan de zijkanten van de put hebben we de ruimte hier dat we moeten werken met, maar dat is de leugen niet de UB zelf.
Dus we terug naar die komen.
Laten we nu eens toe te voegen in het juiste lettertype en de naam van dit lettertype is rubato en het is onderdeel van Google lettertypen.
Dus ik heb die open hier en ik zal gewoon een zoekopdracht voor te rubato.
En hier gaan we.
Voeg toe aan collectie dan moet gebruiken.
En we gaan normale manier willen.
We zullen voegen in het vet en ook medium.
Laten we nu eens gaan en kopieer deze link naar onze HMO en kunnen we dit venster te sluiten.
Ga terug naar waar elk team hier en gewoon top pasta die in en sla dan gaan we naar ons om te zien evalueren en we zullen een aantal stijlen toe te voegen aan het lichaam.
Alles maakt gebruik van dit lettertype, dus we zullen gewoon toe te voegen in fontfamilie robot.
Gewoon zo.
En als we nu terug te gaan en te vernieuwen onze H-1 is veel er mooi.
Afgezien van deze knop die we niet hebben aangeraakt op alle fonts de zelfde kleur van de afstand dat alles is goed.
En onze bondgenoten daar krijgt.
Zij hebben het juiste lettertype.
We moeten werken op een aantal van de afstand en opvulling problemen.
Het volgende dat we zullen aanpakken zijn de achtergrondkleuren op de leugens.
Dus elke andere leugen.
Het gaat van een witte kleur zuiver wit om deze grijze kleur die we hebben als achtergrond van de het.
Dus we kunnen de SS gebruiken om stijlen toe te voegen aan elk ander bondgenoot.
Dus laten we dat nu doen.
Het eerste wat we doen is het selecteren van alle bondgenoten en geef ze een achtergrond van witte, zodat we kunnen doen met F F F of wit of R-GA 255 255-55 en dan zullen we elke andere leugen te doen.
En de syntax want dat is een leugen en kind te eindigen.
En dat ook en goed gedefinieerd een patroon van ieder ander.
En als we de drie en het zou zeggen dat elke derde, maar we willen gewoon elke andere.
En we zullen de achtergrondkleur maken dezelfde f7 f7 f7 die we hebben gebruikt voor de container achtergrond en te vernieuwen.
Nu is het moeilijk te zien omdat ze een beetje klein, maar elke andere leugen is nu deze grijze kleur.
Dus voeg in een paar meer en je kunt zien dat ze afwisselen perfect.
Laten we nu de kwestie van de hoogte van de leugens en ook de padding aan te pakken.
Het eerste wat je moet doen is hen een hoogte van 40 pixels, zodat alle bondgenoten hoogte 40 x en we zullen terug te gaan vernieuwen.
OK dus ze nemen de juiste hoeveelheid ruimte.
Nu als we ze vergeleken het lettertype heeft een aantal problemen.
En ook moeten we een aantal padding toe te voegen.
Volgende gaan de regelhoogte woning op de leugens veranderen zodat onze tekst verticaal is gecentreerd.
Op dit moment is de lijn is in principe is deze hoog.
We gaan om het te laten nemen van de gehele 40 pixels tonen je line-hoogte 40 x en dat zal de grootte van het lettertype het gewoon verandert de grootte van de lijn niet wijzigen.
Het is nu 40 pixels.
Dus de lijn neemt dit hele gebied.
Het volgende klein minpunt is de kleur die we hebben puur zwart en de kleur die ik heb gebruikt is niet echt zwart.
Het is iets lichter.
Dus we kleur in te stellen en het is zes zes zes refresh en dan gaan we komende laten we pakken de input.
Dus we hebben een paar dingen die je moet doen.
De eerste daarvan is ervoor zorgen dat het comité de juiste hoeveelheid ruimte.
Dus deze ingang is veel groter en het is niet alleen padding of marge de lettergrootte groter is.
We hebben een nieuwe kleur als achtergrond ook.
En er is een grens toen we klikken.
Dus laten we werken aan al deze en we beginnen door gewoon toe te voegen in een groter lettertype.
Dus we ingang lettergrootte en we zullen lettergrootte te zijn 18 pixels ingesteld.
En terwijl we hier zullen we de achtergrondkleur, evenals de achtergrondkleur te doen en het is hetzelfde f 7 7 1/2 7.
Gewoon zo.
En laten we vernieuwen.
OK.
We komen dichterbij.
Het volgende wat we doen is het toevoegen van een breedte en de breedte die we gaan geven is 100 procent.
Dus nu is het alleen maar een deel van de weg over de container.
Als we vernieuwen het gaat nu helemaal over.
Maar we hebben een paar kleine problemen.
Eerste ding dat we willen zorgen voor enige opvulling in daar.
Dus we gaan padding aan de kant toe te voegen 13 pixels op de top 13 pixels aan de rechterkant.
13 pixels op de bodem en 20 pixels aan de linkerzijde.
Zodat u kunt zien op deze.
We hebben boven en onder zijn 13.
En aan de linkerkant is er er 20 pixels.
Dus als ik waren vers We hebben nu een grotere input die in beslag neemt de juiste hoeveelheid ruimte.
Wij doen een probleem en dat is dat de input is nu te lang te hebben.
Toen we zeiden dat met 100 procent moet zijn dat met was eigenlijk alleen de inhoud en het duurde niet de vulling en het niet onder de marge, wat betekent dat onze inbreng gaat naar lang voorbij het einde van de div en in plaats van messing met de vulling.
Ik bedoel om een ​​andere manier te veranderen dat is een eigenschap genaamd Box sizing te laten zien.
Dus met blok dimensionering heb je een paar verschillende opties, maar het in principe bepaalt hoe de doos heeft afmetingen van de box model.
En we gaan om het te veranderen om Dasch box grens.
En wat dit doet zal ik lees net het zegt de breedte en hoogte eigenschappen zijn onder andere de opvulling en de grens, maar niet de marge.
Dus als we het te veranderen aan de grens doos die ik doe nu gaan we hier toe te voegen doos sizing orde doos en sla het op voordat ik verder gaan.
Ik zal erop wijzen dat dit een van die eigenschappen die we willen de voorvoegsels hebben.
Dus de Web Kit en Mozy zijn Moz en de puinhoop van Microsoft.
Ik ben niet van plan dat nu te doen.
Het zal in de oplossing code.
Maar het duurt slechts een lange tijd om te typen op.
Dus het zal werken gewoon hoe het is in Chrome tenminste ik nu vernieuwen.
Ons vak is inclusief de opvulling in de border, maar het omvat niet de marge.
Dus we eindigen met een perfecte pasvorm.
Volgende ga ik het lettertype een kleur te geven wanneer ik typ daar.
Dus alles wat we moeten doen.
Ik ga gewoon door met de zelfde kleur van de H-1 en ga naar onze inbreng en gewoon zeggen kleur het is die kleur.
En als we nu verversen en beginnen we te typen daar gaan we.
Laten we nu focussen op het effect.
Toen we op die wordt genoemd richt in de ingang die u hier kunt zien we een rand er omheen.
Dus moeten we aan werken.
Op dit moment hebben we de standaard focus effect.
Dus er is een selector voor die ingang colon aandacht net als de hover pseudo selector.
Deze cellen zullen alleen worden uitgevoerd als we hebben gericht op een ingang.
Dus ik ga naar de achtergrond wit te maken wanneer we ons richten op het.
Ik ben ook van plan om het een grens van drie pixels stevige De blauwe kleur die we hebben gewerkt met geven en we zullen geven een overzicht van het niet een overzicht verwijst naar dit vervelende hoogtepunt dat we krijgen van de browser zelf.
Nu, als we ons richten op de input krijgen we deze nieuwe blauwe rand en we hebben ook de achtergrondkleur veranderen, dus het is grijs nu is het wit.
Dus dat is alles wat we moeten doen voor het invoeren maar we moeten gaan en voeg de placeholder tekst die we hier hebben.
Dus ik ga naar de index HTL en naast de ingang of in de input zal de placeholder attribuut toe te voegen.
En dit kan zijn wat je wilt.
Ik zal gewoon maken het match.
Dus is het toevoegen van nieuwe te doen en te vernieuwen.
Daar gaan we.