Les titres | Contenu spécial | Les listes | Les paragraphes | Les bulles | Les boites et légendes | Les modules
1- Les titres
Titre 1
pour obtenir cette typographie, il faut utiliser la syntaxe <h1>contenu </h1>
Titre 2
pour obtenir cette typographie, il faut utiliser la syntaxe <h2>contenu</h2>
Titre 3
pour obtenir cette typographie, il faut utiliser la syntaxe <h3>contenu</h3>
Titre 4
pour obtenir cette typographie, il faut utiliser la syntaxe <h4>contenu</h4>
2- Contenu spécial
Insersion de Code :
#ja-rightcol {
width: 180px;
float: right;
color: #EEEEEE;
}
Pour obtenir cette typographie, il faut utiliser la syntaxe <pre></pre> ou <div class="code"> à noter que celà fonctionne aussi avec la balise <p>.
Vous n'obtiendrez pas un fond bleu, mais un fond jaune avec une bordure grise, j'ai modifié le style pour ce Site.
Lettrine :
Nous allons utiliser la syntaxe <p><span class="dropcap">1ere lettre</span>contenu</p>
Ceci est un exemple d'utilisation de la classe dropcap. On utilise souvent ce style pour la première lettre d'un article ou d'un paragraphe dans les magazines ou journaux. Si vous essayez cette pseudo classe, il faut avoir suffisament de mots pour que l'affichage soit sur plusieurs lignes, sinon le rendu ne sera pas terrible.
Citations :
Pour obtenir ce résultat, il faut utiliser la syntaxe suivante :
<blockquote><span class="open"></span>contenu<span class="close"></span></blockquote>
Il faut impérativement désactiver le nettoyage du code du plugin de l'éditeur, sinon les quotes ne seront pas affichées
3- Les styles de listes
- Ceci est une liste ordonnée.
- Voici la syntaxe à utiliser :
- <ol><li>texte première ligne</li><li>texte deuxième ligne</li><li>texte troisième ligne</li></ol>
- Ceci est une liste non-ordonnée.
- Voici la syntaxe à utiliser :
- <ul><li>texte première ligne</li><li>texte deuxième ligne</li><li>texte troisième ligne</li></ul>
- Ceci est une liste flèche.
- voici la syntaxe à utiliser :
- <ul class="arrow"><li><span class="icon"></span>contenu de la liste ici</li></ul>
- Ceci est une liste étoile.
- Voici la syntaxe à utiliser :
- <ul class="star"><li><span class="icon"> </span>contenu de la liste ici</li></ul>
- Ceci est un exemple de Checklist.
- Utiliser <ul class="checklist"><li><span class="icon"> </span>Votre texte ici</li></ul>
- En utilisant la syntaxe ci-dessus vous obtiendrez ce résultat.
- Ceci est une Liste téléphone.
- Utiliser <ul class="phone"><li><span class="icon"> </span>Le contenu de votre liste ici</li></ul>
- Utilisez la syntaxe ci-dessus pour obtenir ce résultat.
- Ceci est une Liste adresses.
- Utiliser <ul class="address"><li><span class="icon"> </span>contenu de votre liste ici</li></ul>
- Utilisez la syntaxe ci-dessus pour obtenir ce résultat.
- Ceci est une Liste Emai.
- Utiliser <ul class="email"><li><span class="icon"> </span>contenu de la liste ici</li></ul>
- Utilisez la syntaxe ci-dessus pour obtenir ce résultat.
01Ceci est un exemple de bloc de nombre. Utiliser <p class="blocknumber-1"><span class="bignumber">01.</span>Votre contenu ici!</p> pour avoir un bloc de nombre!
152Voici un autre exemple de bloc de nombre. Utiliser <p class="blocknumber-2"><span class="bignumber">152.</span>Votre texte ici!</p> pour avoir un bloc de nombre !
199Ceci est encore un exemple de bloc de nombre. Utiliser <p class="blocknumber-3"><span class="bignumber">199.</span>votre texte ici !</p> pour former un bloc de nombre !
4- Les styles de paragraphes
Utiliser la syntaxe suivante : <p class="error"><span class="icon"></span>Votre message ici</p> pour réaliser ceci.
Utiliser la syntaxe suivante : <p class="tips"><span class="icon"></span>Votre message ici</p> pour réaliser ceci.
Utiliser la syntaxe suivante : <p class="key"><span class="icon"></span>Votre message ici</p> pour réaliser ceci.
Utiliser la syntaxe suivante : <p class="tag"><span class="icon"></span>Votre message ici</p> pour réaliser ceci.
Utiliser la syntaxe suivante : <p class="cart"><span class="icon"></span>Votre message ici</p> pour réaliser ceci.
Utiliser la syntaxe suivante : <p class="doc"><span class="icon"></span>Votre message ici</p> pour réaliser ceci.
Utiliser la syntaxe suivante : <p class="note"><span class="icon"></span>Votre message ici</p> pour réaliser ceci.
Utiliser la syntaxe suivante : <p class="photo"><span class="icon"></span>Votre message ici</p> pour réaliser ceci.
Utiliser la syntaxe suivante : <p class="mobi"><span class="icon"></span>Votre message ici</p> pour réaliser ceci.
5- Les bulles
<div class="bubble bubble-l1 clearfix">
<div class="box-ct">
<div class="box tl"> </div> <div class="box tr"> </div> <div class="box bl"> </div> <div class="box br"> </div>
Contenu de la bulle
</div>
<span class="arrow"> </span> <span class="author">Nom de l'auteur ici</span>
</div>
<div class="bubble bubble-l2 clearfix">
<div class="box-ct">
Contenu de la bulle
</div>
<span class="arrow"> </span>
<span class="author">Nom de l'auteur</span>
</div>
<div class="bubble bubble-d1 clearfix">
<div class="box-ct">
<div class="box tl"> </div> <div class="box tr"> </div> <div class="box bl"> </div> <div class="box br"> </div>
Contenu de la bulle
</div>
<span class="arrow"> </span> <span class="author">Nom de l'auteur</span>
</div>
<div class="box-ct">
Contenu de la bulle
</div>
<span class="arrow"> </span>
<span class="author">Nom de l'auteur</span>
</div>
<div class="box-ct">
<div class="box tl"> </div> <div class="box tr"> </div> <div class="box bl"> </div> <div class="box br"> </div>
Contenu de la bulle
</div>
<span class="arrow"> </span> <span class="author">Nom de l'auteur</span>
</div>
<div class="box-ct">
Contenu de la bulle
</div>
<span class="arrow"> </span>
<span class="author">Nom de l'auteur</span>
</div>
6- Les styles de boites et légendes
Ceci est une note. Utilisez la syntaxe : <p class="box-sticky">Le texte de votre note ici</p> pour afficher votre note.
Ceci est une boite de téléchargement. Utilisez la syntaxe : <p class="box-download">Le texte de votre boite de téléchargement ici</p> pour afficher ceci.
Ceci est une boite grise. Utilisez la syntaxe : <p class="box-grey">Le texte de votre boite grise ici</p> pour afficher ceci.
Ceci est une boite hilite. Utilisez la syntaxe : <p class="box-hilite">Le texte de votre boite hilite ici</p> pour afficher ceci.
Style Légende
utiliser cette syntaxe : <div class="legend"><h3 class="legend-title">Votre titre ici</h3><p>Le texte de votre légende ici.</p></div> pour afficher le style légende comme ici.
Style Légende en surbrillance
utiliser cette syntaxe : <div class="legend-hilite"><h3 class="legend-title">Votre titre ici</h3><p>Le texte de votre légende ici.</p></div> pour afficher le style légende comme ici.
