Une évaluation qui portait sur la création HTML et CSS en flex et responsive: Version mobil: Le code HTML: Détail du menu au survol: Version tablette: Version PC: Le code CSS: @import url(‘https://fonts.googleapis.com/css?family=Lobster+Two|Open+Sans:400,700’); *, ::after, ::before{ box-sizing: border-box; } figure { margin: 0; } img { max-width: 100%; } body {…
Catégorie : web
Flex box et responsive.
Nous rentrons dans le concret! Voici l’exercice: Format mobil: Son css: @import url(« https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300i,700|Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i »); *, ::before, ::after { box-sizing: border-box; } figure { margin: 0; } img { max-width: 100%; } body { line-height: 1.5; font-family: « Open Sans », sans-serif; color: black; } h1, h2, h3, h4, h5, h6 { font-family: « Open Sans Condensed », sans-serif; line-height: 1;…
Flex box
Voila, nous attaquons les « flex-box ». Mise en page beaucoup plus simple que les flottant. Les codes: dispay: flex; (place les blocs horizontalement) flex-wrap: wrap; (passe à la ligne, aussi pour les colonnes) no-wrap; wrap-reverse; flex-direction: (désigne l’axe principal) row; row-reverse; column; column-reverse; justify-content: …
Rentrée et révisions
Révision 11 page de css axée sur les flottants. Plus un peu de responsive. Après 768 px. Après 1200 px. Le code css.
Spécial Menu
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= »# »…
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: