Création de listes - Apprenez à code HTML - CSS
- Leçon 1 Construire votre première page Web
- Leçon 2 Prise en main HTML
- Leçon 3 Apprendre à connaître CSS Nouveau
- Leçon 4 Ouverture du modèle de boîte
- Leçon 5 Positionnement nouveau contenu
- Leçon 6 Travailler avec Typographie
- Leçon 7 Fonds de réglage - Dégradés
- Leçon 8 Création des listes
- Leçon 9 Ajout d'un média
- Leçon 10 Création de formulaires
- Leçon 11 Organisation des données avec les tableaux
- Leçon 12 Rédaction de votre meilleur code
Apprenez à code HTML - CSS est écrit par le concepteur - développeur front-end Shay Howe.
Commander Apprenez à code HTML avancé - CSS pour un regard plus profond sur la conception front-end - développement.
Vous voulez en savoir plus HTML - CSS, ou étudier d'autres sujets? Trouver la bonne pour vous.
Dans cette leçon 8
Les listes sont une partie de la vie quotidienne. Pour faire des listes de déterminer ce qu'il faut se faire. les routes de navigation fournissent des listes tour-par-tour de directions. Les recettes fournissent des listes d'ingrédients et des listes d'instructions. Avec une liste pour presque tout, il est facile de comprendre pourquoi ils sont également en ligne populaires.
Listes désordonnées
Listes désordonnées Demo
Liste sténographie Style
Les propriétés de style de liste ont discuté jusqu'ici, la liste de style et de type liste-style-position. peuvent être combinés en une seule valeur de propriété raccourcie liste de style. Lorsque vous utilisez la propriété list-style, nous pouvons utiliser une ou toutes les valeurs de propriété de style de liste à la fois. L'ordre de ces valeurs doit être raccourcies liste de style de type suivi par liste-style-position.
Horizontalement Affichage de la liste
Liste Affichage
Le moyen le plus rapide pour afficher une liste sur une seule ligne est de donner la
Inline-block Affichage de la liste de démonstration
Liste flottante
Liste flottante Demo
Comme tout élément flottant lorsque, ce casse le flux de la page. Nous ne devons pas oublier d'effacer nos flotteurs le plus souvent avec la clearfix technique et retourner la page à son débit normal.
Exemple de navigation Liste
Liste de navigation Demo
En pratique
Actuellement, les menus de navigation dans le
L'utilisation d'une liste non ordonnée (via le
- élément) et les éléments liste (via le
- élément) va structurer nos menus de navigation. Cependant, ces nouveaux éléments, afficheront verticalement nos menus de navigation.
Il ne faut pas oublier de faire ces changements dans tous nos fichiers HTML.
Avec la liste non ordonnée en place, faisons en sorte que les éléments de liste aligner horizontalement et Nettoyons leurs styles un peu. Nous allons utiliser la classe de navigation existants pour aider à cibler nos nouveaux styles.
Au sein de notre fichier main.css, ci-dessous nos styles de navigation existants, nous allons ajouter le CSS suivant:
Nos menus de navigation ne sont pas les seuls endroits que nous allons utiliser des listes. Nous allons également les utiliser sur certains de nos pages internes, y compris la page de haut-parleurs. Ajoutons quelques orateurs à notre conférence.
Au sein de notre fichier speakers.html juste au-dessous de notre section de plomb, nous allons créer une nouvelle section où nous allons présenter tous nos conférenciers. Réutilisant certains styles existants, nous allons utiliser un
élément avec une valeur d'attribut de classe de la ligne pour envelopper tous nos haut-parleurs et d'appliquer un fond blanc et le rembourrage derrière eux. À l'intérieur de élément, nous allons ajouter un élément avec une valeur d'attribut de classe de la grille pour centrer nos haut-parleurs sur la page et nous permettent d'utiliser plusieurs colonnes en le faisant.Jusqu'à présent, notre code HTML ci-dessous la section plomb ressemble à ceci:
Grâce à nos grandes lignes de la section des haut-parleurs col-2-3 et les classes col-1-3 existants, ressemblera à ceci:
Il y a quelques éléments à noter ici. Tout d'abord, chaque
élément pour chaque haut-parleur comprend un attribut ID avec le nom que la valeur d'attribut du haut-parleur. Plus tard, quand nous créons le calendrier de notre conférence, ces attributs d'identité serviront de points d'ancrage, ce qui nous permet de faire le lien de l'annexe de profil d'un haut-parleur. Y compris ce contenu, une section de haut-parleur ressemblera à ceci:
Avant d'entrer dans tous les styles, cependant, nous allons ajouter une liste à puces dans le
élément qui comprend comme éléments de la liste des liens pertinents pour le haut-parleur.Maintenant, notre HTML pour un haut-parleur ressemblera à ceci:
Avec le
élément avec une valeur d'attribut de classe de haut-parleur-info prêt, nous pouvons ajouter des styles à elle.Nous allons commencer par l'ajout d'une nouvelle section au sein de notre fichier main.css pour les styles de page Haut-parleur. De là, ajoutons une bordure grise solide 1 -pixel avec un rayon de 5 -pixel autour de tout élément qui comprend la valeur d'attribut de classe de haut-parleur-info.
Enfin, nous allons centrer tout le texte dans l'élément.
Dans l'ensemble, notre CSS pour le haut-parleur-info règle de classe qui se présente comme suit:
Prenons une minute pour examiner pourquoi nous utilisons un
élément ici et les styles correspondants.Nous plaçons une
élément à l'intérieur du