Stap 1: De CSS
De eerste stap in het creëren van onze raster/modeloverzicht is om de stijl van het gebruik van Cascading Style Sheets (CSS). Maak je geen zorgen hebt u weinig kennis van HTML en CSS, je niet hoeft te weten van deze talen voor dit Instructable (hoewel ze erg handig zijn).
De CSS-regels voor de product grid kan worden toegevoegd aan uw website op twee manieren.
1. een extern opmaakmodel
2. een intern opmaakmodel
Extern opmaakmodel:
Open Kladblok en plak in de volgende code: (het is hier beschikbaar: [http://pastebin.com/b5nzGfbg]) merk op dat ik niet komen met deze code, het is eigenlijk van [http://alijafarian.com/responsive-image-grids-using-css/]
Sla vervolgens als [filenameofyourchoice] .css. Ik heb het opgeslagen als cool.css.
Nu, dit bestand uploaden naar een webhost, en krijg een directe link naar het. Veronderstellend hebt u een website, zal u zitten kundig voor uploaden naar uw server via FTP, en een directe koppeling. Als je niet zo, een Dropbox account, (hier is een verwijzingslink voor het aanmelden), upload het bestand naar de map ' publiek ', en een directe koppeling. Of als dat niet mogelijk, Meld u aan voor de Tumblr en hoofd naar [https://www.tumblr.com/themes/upload_static_file]. Tumblr laat die u thema activa voor gratis hosten.
In dit geval heb ik mijn bestand geüpload naar Tumblr, om de volgende link: [http://static.tumblr.com/xtiqrla/c4Qn872fi/cool.css]
Nu, open te stellen uw websitepagina (een HTML-document), en plak de volgende code tussen de < head > en < / head > tags: < link rel = "stylesheet" type = "text/css" href = "http://static.tumblr.com/xtiqrla/c4Qn872fi/cool.css" > zorg ervoor dat u ook de URL in de bovenstaande code met de URL naar uw CSS-bestand.
Ik heb geen een reeds gemaakte website document aan kant, dus ik ben een nieuwe te maken in Kladblok, en plakken van de bovenstaande code tussen de < head > en < / head > en tags, als bovengenoemde (gezien hieronder):
Intern opmaakmodel:
U kon gewoon plakken in de CSS-code in uw website HTML-document tussen de < head > en < / head >, en binnen een paar < stijl >< / style > tags.
Groot, dat is de CSS gedaan.
