DIY produkt rutnät för din webbplats (3 / 4 steg)
Steg 3: Knapparna produkt
Rutnätet i detta Instructable är inte särskilt användbar för att visa dina produkter, ännu. Det är dags att börja anpassa. Ta en titt på koden från föregående steg.
För att komma igång med en produkt, ersätta den ovan URL med en URL som pekar till din produktbild. Ersätt "Bilden titel" med namnet på din produkt. Hålla beskrivningen mellan taggarna < s. > om du vill, men följande är bättre; Glöm beskrivningen och lägga till några snygg produkt knappar t.ex. Hämtningssida, stöd etc. Detta förenklar din produkt rutnät och gör det mer tilltalande.
Att göra detta, gå tillbaka till HTML-filen i anteckningar och lägga till denna kodrad. höger efter (från PureCSS.io):
PureCSS låter dig infoga knappar på din webbplats. För att ha vackra ikoner att gå med dina knappar, måste du lägga till följande också rätt efter ovanstående kod (från fortawesome.github.io):
Titta runt två platserna ovan, hittar du massor av anpassningsmöjligheter, men för nu, ersätta hela < s. > raden med följande:
Spara dina HTML-dokument, öppna den i ett webbrowser och voila! En cool kassan knapp på en av dina produkter!
Ta en titt på webbplatsen FontAwesome (ovan), där du bara kan välja någon ikon för din knapp.