Pour clarifier les choses, je me fait ici un article spécial menu déroulant à plusieurs niveaux: -Tout d’abord le code html(une partie): <nav class= »navigation-principale »> <ul id= »ul-premier-niveau »> <li><a href= »# » class= »li-premier-niveau »>Niveau1</a> <ul class= »ul-deuxieme-niveau »> <li class= »li-deuxieme-niveau li-deuxieme-menu-b »><a href= »# »>Niveau2</a> <ul class= »ul-troisieme-niveau »> <li class= »li-troisieme-niveau »><a href= »# »>Niveau3</a></li> <li class= »li-troisieme-niveau »><a href= »# »>Niveau3</a></li> </ul> </li> <li class= »li-deuxieme-niveau »><a href= »# »>Niveau2</a></li> <li class= »li-deuxieme-niveau »><a href= »# »>Niveau2</a></li> </ul> </li> <li><a href= »# »…
Catégorie : CSS
EvalBlog
Une évaluation! Chaud… La partie écran de téléphone, avec menu déroulant progressif et couleur de survol. HTML et CSS uniquement. Les photos et les titres d’article doivent devenir partiellement transparent à leurs survole. La partie écran PC. Vous pouvez remarquer que je n’ai pas pue m’empêcher, il est évident que la première photo (un…
Responsive avec menu déroulant
Un autre travail en responsive: Dans un premier temps il faut créer le code html puis une feuille de style css commune à toutes les pages. les pages: Le cod html: Le code css commun: Ensuite le code responsive: Par la suite nous avons fait plusieurs menu: Le burger se transforme en croix et le…
Responsive
Le responsive consiste à adapter le contenu à différent écrans. En déplaçant les blocs la lisibilité reste claire. Pour cela il faut déjà insérer une balise dans le head du html: <meta name= »viewport » content= »width=device-width, initial-scale=1.0, maximum-scale=3.0″> Puis indiquer à partir de quelle taille d’écrans nous voulons ces modifications. pour le premier exemple le code…
Les bordures
Ce qu’on peut faire avec border: Au survole certain exemple réagisse. La 13 au survole applique une rotation de la croix.
Les dégradés
background dégradés:
Background avec menu fixe.
Pour le fond de la page: et son code: L’ordre de déclaration des valeurs de la propriété background va être le suivant : La valeur relative à la propriété background-image ; Les valeurs relatives aux propriétés background-position / background-size (avec le slash entre les deux valeurs); La valeur relative à la propriété background-repeat ; La valeur relative à la propriété background-attachment ; La valeur relative à la…
Structurer une page sur la base de flottants.
Exercice assez complexe que d’utiliser les flottants pour la mise en pages. Voici quelques exemples: Le code CSS: Deuxième exemples: Le CSS: Autre exemple: Avec menu burger. Le code:
Liste
Liste UL (à puces) les balises<li> sont dans les< ul> et nous refaisons la même chose à l’intérieur des <li> liste OL (numérotée) Même chose que précédemment. Glossaire Le glossaire, lui est différant. La liste des définitions utilise les balises <dl> Dedans il y a les terme à définir <dt> et la définition du terme…
Police et CSS
Intégration de polices dans le CSS La page HTML La page CSS Un autre travail