DIY produkt rutnät för din webbplats (1 / 4 steg)
Steg 1: CSS
Det första steget i att skapa vår produkt grid/galleri är att styla den med Cascading Style Sheets (CSS). Oroa dig inte om du har lite kunskap om HTML och CSS, behöver du inte känna dessa språk för detta Instructable (även om de är mycket användbart).
CSS för rutnätet produkt kan läggas till din webbplats på två sätt.
1. en extern formatmall
2. en intern formatmall
Extern formatmall:
Öppna Anteckningar, och klistra in följande kod: (den finns här: [http://pastebin.com/b5nzGfbg]) Observera att jag inte kom med denna kod, det är faktiskt från [http://alijafarian.com/responsive-image-grids-using-css/]
Spara sedan, som [filenameofyourchoice] .css. Jag har sparat det som cool.css.
Nu ladda upp denna fil till ett webbhotell, och få en direkt länk till den. Förutsatt att du har en webbplats, kommer du att kunna ladda upp den till din server via FTP, och få en direkt länk. Om du inte kan göra så, få en Dropbox konto, (här är en remiss länk för att registrera dig), ladda upp filen till din mapp och få en direkt länk. Eller om detta inte är möjligt, Anmäl dig till Tumblr, och chef över till [https://www.tumblr.com/themes/upload_static_file]. Tumblr kan du vara värd tema tillgångar för gratis.
I detta fall, jag har lagt upp min fil till Tumblr, att få på följande länk: [http://static.tumblr.com/xtiqrla/c4Qn872fi/cool.css]
Nu öppen upp din webbsida (ett HTML-dokument), och klistra in följande kod mellan < head > och < / head > Taggar: < länka rel = "stylesheet" type = "text/css" href = "http://static.tumblr.com/xtiqrla/c4Qn872fi/cool.css" > se till att ersätta URL i ovanstående kod med URL-adressen till din CSS-fil.
Jag har inte en redan gjord webbplats dokument å så jag skapar en ny i anteckningar, och klistra in ovanstående kod mellan < head > och < / head > och taggar, som nämnda (visas nedan):
Intern formatmall:
Alternativt, du kan bara klistra in i CSS-koden i din webbplats HTML dokument mellan < head > och < / head >, och inuti ett par < style >< / stil > taggar.
Bra, det är CSS gjort.