Matt Black Onglets
Il ya souvent de la beauté dans la simplicité. Matt Black Tabs est un menu CSS liste propre qui n'utilise pas d'images, et de très petite empreinte. Chaque onglet est flottants à gauche pour atteindre son look et tous contenus dans un emballage qui nient la nécessité d'effacer manuellement "float" pour les contenus qui suivent immédiatement.
Remarque: Assurez-vous que votre page contient un doctype valide pour ce menu pour rendre correctement
/*noter :vous pouvez traduire les commentaires de votre css, le modifier et le traduire a votre langue via ce lien http://translate.google.com */
<style type="text/css">
/*noter :vous pouvez traduire les commentaires de votre css, le modifier et le traduire a votre langue via ce lien http://translate.google.com */
.mattblacktabs{
width: 100%;
overflow: hidden;
border-bottom: 1px solid black; /*bottom horizontal line that runs beneath tabs*/
}
.mattblacktabs ul{
margin: 0;
padding: 0;
padding-left: 10px; /*offset of tabs relative to browser left edge*/
font: bold 12px Verdana;
list-style-type: none;
}
.mattblacktabs li{
display: inline;
margin: 0;
}
.mattblacktabs li a{
float: left;
display: block;
text-decoration: none;
margin: 0;
padding: 7px 8px; /*padding inside each tab*/
border-right: 1px solid white; /*right divider between tabs*/
color: white;
background: #414141; /*background of tabs (default state)*/
}
.mattblacktabs li a:visited{
color: white;
}
.mattblacktabs li a:hover, .mattblacktabs li.selected a{
background: black; /*background of tabs for hover state, plus tab with "selected" class assigned to its LI */
}
</style>
Le code html
<div class="mattblacktabs">
<ul>
<li><a href="votre lien ici">Home</a></li>
<li><a href="votre lien ici">DHTML</a></li>
<li><a href="votre lien ici">CSS</a></li>
<li><a href="votre lien ici">Forums</a></li>
<li><a href="votre lien ici">Gif Optimizer</a></li>
</ul>
</div>
0 commentaires:
Enregistrer un commentaire