bygger en api - drevet web - app med html og css,,,,,,, hvad du vil lave,,, har konstrueret en visuel håner til at hjælpe os med at bygge vores lille app til browseren, lad os komme til den spændende del og start!,, fil struktur, lad os fælde vores fil struktur for projektet.det kommer til at se sådan noget (med hvert enkelt aktiv i dens tilsvarende mappe):,,.├──. └── aktiver ├── css ├── img ├── er └── skitse, har vi nu en mappe til hver af vores aktiver samt. skitse, sag, vi skabte tidligere, som holder vores side håner.,, indledende html, baseret på vores fil struktur, lad os fælde vores grundlæggende html dokument med forbindelser til vores aktiver (som vi vil skabe et øjeblik.,, <!doctype html > < http: //lang = "en os" > < head > < meta - charset = "utf - 8" > < afsnit > vil have dat ikon < /afsnit > < meta - navn = "viewport" indhold = "bredde = anordning bredde, oprindelige omfang = 1, 0" > < forbindelse href = "http://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet" type="text/css"> <link rel="stylesheet" href="assets/css/styles.css"> </head> <body> <header></header> <main></main> <footer></footer> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="assets/js/main.js"></script> </body> </html> , ,Here’s what we have so far:, , ,Basic HTML page structure with header, main content, and footer areas., ,Link to our custom CSS (which we will create), ,Link to Pacifico on Google Fonts (as mentioned earlier, this is the font we will use to display our little app’s name), ,Links to our custom javascript (som vi vil skabe) samt jquery bibliotek på google er vært for biblioteker cdn, indledende forskning, fordi denne lille app er forholdsvis lille og enkel, går jeg til tjeneste ved hjælp af vanille css i dette projekt (nr. preprocessor), men du kan skrive din css - uanset i hvilken form, du kan lide. start ved at oprette en grundlæggende side styles, og at kommentere henvisningerne til farver, vi skal bruge.i aktiver /css /styles.css, lad os gøre følgende: /* generelle styles farver @ fremhæve:Äe76 @ tekst:a4a4a; @ tekst lys: a9a9a @ lig baggrund:&#eeeeee; * /* *: før *: efter {æske størrelsessortering: arve; margen: 0: polstring: 0,} {æske størrelsessortering: http: //grænse boks; baggrund:&#eeeeee; tekst tilpasse: center;} organ (skriftstørrelse: 1em; linjehøjde: 1.5; skrifttype familie: lucida grande, uden serif; max bredde: 43.75em; /* * /880 /16 margen: 0 -; fyld: 0; farve:a4a4a;} img (max bredde: 100%, højde: auto;} en (farve: arve;}, her har vi oprettet et par grundlæggende side former for billeder, forbindelser, og den model, vi bruger.som du har bemærket, vi bruger, et organ, et som et stykke papir med sin, max bredde.det vil holde alle vores indhold centreret i midten af side uden at strække sig ud over en vis bredde.,, bemærker vi også defineret farven værdier, vi vil anvende i den øverste bemærkninger.vi er ikke ved hjælp af en preprocessor, der giver os mulighed for at fastsætte undtagelser, der vil komme i handy, som vi fortsat skrive vores stilarter.,, app header, lad os skabe overskriften vores app.husk, vi har konstrueret en skitse:,,,, så lad os skabe html matcher vores model.vi vil sætte dette indhold i, header, element, vi skabte tidligere.,, < header > < h1 > < en href =. "/" > vil have dat ikon < /a > < /h1 > og lt; p > hente fuldstørrelse ikon kunst til programmerbare & amp; mac apps. < /p > < /header >,, og nu har vi vores app 's navn og beskrivelse på toppen af side.men den stil er ret grundlæggende.,,,,,,, lad os skrive en stil om vores side hovedstød det mere i overensstemmelse med vores håne:,, /* header styles * /header {margen: 1em 0 2em; farve:Äe76;} header h1 {skrifttype familie: pacifico, serif; skriftstørrelsen: 3em; tekst skygge: 0 4px 2px rgba (0, 0 0, 1) margen: 0} header h1 en (tekst): ingen;} header p {margen top: -. 625em; tekst led: 7.75em; /* led lidt * /tekst skygge: 0 1px 0px rgba (0, 0 0, 15); skriftstørrelsen:. 875em; /* 14 /16 * /}, her er et kort overblik over, hvad vi har:,,, farve og afstand til header container, app navn, header h1,der er brug pacicifo fra google skrifttyper (husk, vi har fastsat et link til denne ressource i vores header), app beskrivelse, header p, er en smule kompensation for at undgå at løbe ind i nedstigeren af "g" på app navn. nu har vi vores kampe og lignede design:,, og dog huske på, at vores app vil være lydhøre.så, hvis vi kan kontrollere disse stile et smallere bredde ved hjælp af krom er dev værktøjer, vil i se teksten indpakning af beskrivelsen er lidt underligt på grund af vores tekst led,.,,,, at afhjælpe dette ved smallere bredde, fjerner vi teksten aftryk og bump beskrivelsen tekst med en større på toppen, så pakker, ser mere naturligt.lad os skrive en medier forespørgsel til at hjælpe os:,, @ medier skærm og max bredde: 600px) (header p {tekst led: 0; margen top:. 5em;}}, der, nu har vi en lydhør hovedstød.,,,,, at app input, er næste skridt at gå videre til input og output områder af vores model.husker de så sådan her:,,,,,,,, så lad os tilføje input område til den vigtigste, html element, vi skabte tidligere:,, < vigtigste > <!- input - > < form klasse = "stille" > < input type = "url" indikation af en art = "itunes link" > < knap type = "stille" > vil have < /knap > < /form > <!-. input - > < /main >, har vi nu en formular med en input - og forelægge knap.god semantik indtil videre, men det er ikke helt se, hvordan vi vil have det.vi bliver nødt til at tilføje nogle stilarter.,,,,,,, så lad os tilføje nogle former for vores form for input og knap elementer.,, /* form input styles i form af input og knap * /form {holdning: relativ;} formular input (bredde: 100%; display: blok; skriftstørrelsen: 1em; fyld:. 625em. 85em; polstring. 7em; linjehøjde: 1.5; margen: 0; grænse: 1px fast&#bbb; rubrik skygge: 0 1px 3px rgba (0, 0 0, 1) indpresningsdybde, 0 2px 4px rgba (0, 0 0, 1); grænseoverskridende radius - 3px;} form input: vægt {grænse farve:Īcda;} udgør knap (tekst): ingen; baggrund:Äe76, højde: 100%.om: absolut; ret: 0; top: 0; linjehøjde: 1.5; farve: hvid; skriftstørrelsen: 1em; grænseoverskridende radius: 0 3px 3px 0; grænse: 0; udkast: 0; tekst tilpasse: center; - webkit udseende: ingen; margen: 0; polstring: 0 1em skrifttype familie. "pacifico, serif;} udgør knap: den {markør: pointer.} udgør knap: handicappede (uklarhed:. 5}, her har vi tilføjet nogle former for vores form for input og knap så godt som andre stater som: svæv,,: fokus, og: handicappede.det har givet os et input i aften, ligesom vi har designet det i vores mock.,,,,, at app produktion, på det punkt kan vi skabe, hvad vi kalder "output" område.det er, hvor vi vil dynamisk gøre ikon retur fra itunes api - grænseflade.på den første side belastning, brugeren har endnu ikke anmodet om noget.så vi skal bruge vores nul statslig design for nu.kan du huske vores spotter, det ser sådan ud:,,,, vi vil fortsætte med at tilføje, at den vigtigste, html element, vi har arbejdet på:,, < vigtigste > <!- input - > < form klasse = "stille" > < input type = "url" indikation af en art = "itunes link" > < knap type = "stille" > vil have < /knap > < /form > <!-. input - > <!- output - > < div klasse = "papir" > < div klasse = "indhold" > < p > < stærk > træde et gyldigt itunes app butikken sammenhæng, dvs. < /stærk > < en href = "http://itunes.apple.com/us/app/twitter/id333903271?mt = 8 "> http://itunes.apple.com/us/app/twitter/id333903271?mt = 8 < /a > < /p > < img src = "aktiver /img /ikon indikation af en art. perspektivgruppen" alat = "ikon indikation af en art" /> < /div > < /div > <!-. /output - > < /main >,, bemærke, at vi tilføjede http: //efter vores input /output.det består af et stykke papir, der fungerer som den store hvide kasse i vores udformning og indhold, som er koncentreret i den.vi bruger css at fastsætte,. indhold, element til en max bredde af 512 pixels, som er den største, som vi vil vise vores ikon.for nu har vi noget, der ligner dette:,,,, får vores ikon indikation af en art er forsvundet.hvis vi går tilbage til vores skitse dokument, kan vi let produktion, at aktiv som et perspektivgruppen til brug i browseren.,,,, så vi skal have det billede, som viser sig i browseren.,,,,,,, så lad os tilføje nogle former for vores produktion kasse.,, /* indhold styles vigtigste beholder til indhold, dvs. ikoner, fejlmeddelelser osv. * /. papir (baggrund:&#fff; grænse: 1px fast&#ccc; tekst tilpasse: center; polstring: 2em; margen:. 5em 0 2em; rubrik skygge: 0 2px 4px rgba (0, 0 0, 1) grænsen 3px radius:. position: relativ;}. indhold (max bredde: 512px; margen: 0 auto. position: relativ; ord pakke: bryde ord; /* længe url - adresser * /}. indhold * {* gøre en simpel nulstille den elementer i. indhold * /margen: 0;fyld: 0}. indhold stærk (font vægt: dristigt, display: blok.}, er de fleste af css tilføjede vi her har bemærkninger i koden for at forklare det.vi tilføjede stil vores uden indpakning, fordi vi ikke har en fuld css nulstille den side, vi har en simpel nulstille på http: //elementer i vores område ved at anvende. indhold *,.,, vi har tilføjet nogle på vej til bolded elementer i vores nul.nu skal vi have noget, der minder om vores nar!,,,, godt arbejde!, nu, hvor vi har vores html struktur alle fælde, sammen med tilsvarende styles, vi er klar til at hoppe i og håndtere samspillet mellem den side med javascript!, i det næste og sidste lektion i denne serie, finder vi ud af at tage brugerinput, foretage en api anmodning, og gøre produktionen i browseren.se, du der!,
