Etape 1: Le CSS
La première étape dans la création de notre produit grille/Galerie est de style à l’aide de feuilles de Style en cascade (CSS). Ne vous inquiétez pas si vous avez peu de connaissances de HTML et CSS, vous n’avez pas besoin de connaître ces langues pour ce Instructable (même si elles sont très utiles).
Le CSS pour la grille de produit peuvent être ajouté à votre site Web de deux façons.
1. une feuille de style externe
2. une feuille de style interne
Feuille de style externe :
Ouvrir le bloc-notes et collez le code suivant: (il est disponible ici: [http://pastebin.com/b5nzGfbg]) Notez que je ne suis pas venu vers le haut avec ce code, c’est en fait de [http://alijafarian.com/responsive-image-grids-using-css/]
Puis, enregistrez sous [filenameofyourchoice] .css. J’ai enregistré en tant que cool.css.
Maintenant, téléchargez ce fichier sur un hébergeur et obtenir un lien direct avec elle. En supposant que vous avez un site Web, vous serez en mesure de télécharger sur votre serveur via FTP et obtenir un lien direct. Si vous ne pouvez pas le faire, obtenir un compte Dropbox, (Voici un lien de parrainage pour vous inscrire), Télécharger le fichier vers votre dossier Public et obtenir un lien direct. Ou si cela n’est pas possible, inscrivez-vous à Tumblr et rendez-vous sur [https://www.tumblr.com/themes/upload_static_file]. Tumblr vous permet de que vous héberger actifs de thème pour gratuit.
Dans ce cas, j’ai transféré mon dossier à Tumblr, pour obtenir le lien suivant: [http://static.tumblr.com/xtiqrla/c4Qn872fi/cool.css]
Maintenant, ouvrez votre page de site Web (format HTML) et collez le code suivant entre la tête de < > et < / head > tags : < link rel = « stylesheet » type = « text/css » href = "http://static.tumblr.com/xtiqrla/c4Qn872fi/cool.css" > n’oubliez pas de remplacer l’URL dans le code ci-dessus avec l’URL de votre fichier CSS.
Je n’ai pas un document du site déjà faite sur place, donc je suis créer un nouveau dans le bloc-notes et collez le code ci-dessus entre la tête de < > et < / head > et balises, comme mentionné plus haut (voir ci-dessous) :
Feuille de style interne :
Sinon, vous pourriez juste coller dans le code CSS dans votre document site Web HTML entre la tête de < > et < / head > et à l’intérieur d’une paire de < style >< / style > tags.
Génial, c’est le CSS fait.