Maison > interface Web > Tutoriel H5 > Partage de ressources pour les didacticiels de blog de style plat HTML5 et CSS3

Partage de ressources pour les didacticiels de blog de style plat HTML5 et CSS3

黄舟
Libérer: 2017-09-01 14:41:35
original
1639 Les gens l'ont consulté

Ce cours explique en détail à travers des exemples de blogs de style plat CSS3, permettant à chacun de comprendre plus facilement les composants des pages Web classiques, d'utiliser de manière flexible différentes parties des composants WEB, de comprendre ses idées de composition, ainsi que la mise en page et la conception flexibles de pages Web. Nous pouvons également saisir la disposition globale du macro au micro.

Partage de ressources pour les didacticiels de blog de style plat HTML5 et CSS3

Adresse de lecture du cours : //m.sbmmt.com/course/307.html

Le style d'enseignement de l'enseignant :

Les cours de l'enseignant sont simples et approfondis, de structure claire, analysés couche par couche, imbriqués, rigoureux dans l'argumentation, rigoureux dans la structure et l'utilisation le pouvoir logique de la pensée pour attirer l'attention des élèves. Force, utiliser la raison pour contrôler le processus d'enseignement en classe. En écoutant les cours de l'enseignant, les étudiants acquièrent non seulement des connaissances, mais reçoivent également une formation à la réflexion, et sont également influencés et influencés par l'attitude académique rigoureuse de l'enseignant

Le point le plus difficile de cette vidéo est l'appartement style du blog HTML5 et CSS3 :

Analyse des modules :
Mise en page de style plat : en-tête et corps
Analyse des composants de la page :
1, En-tête (en-tête de page) :
①h1>a, mettez le lien de la page d'accueil Il est généralement recommandé qu'une page n'ait qu'un seul h1, et les autres peuvent utiliser h2, h3, etc. Jiangzi est propice à l'optimisation des pages <.>②nav>ul>li>a>span , imbrication des menus couche par couche, principalement en utilisant une méthode structurée, car on ne sait pas exactement combien de boutons ou de liens sont nécessaires dans la barre de navigation,
Partie bannière : intérieure. partie + bouton de défilement vers le bas
①div>h2+ul,
h2>p
ul>li>a
②a
3, section de texte1
①section>div>header+ul
header>h2>p
header écrit le titre et le sous-titre
ul>li>aUn titre de même niveau
l'intérieur est utilisé pour limiter la largeur de la page entière
3, section de texte2
section>section>div1+div2
div1>img
div2>h2 +p
Si vous n'avez pas d'attribut de liste fort, vous pouvez utiliser div pour l'écrire.
4, sections3 et 4 sont omis
5, footer footer part
footer>ul+ul, div ou span convient ici.

1. Réinitialiser le style et la structure des fichiers :

Objectif de la réinitialisation du style :
Rendre le style cohérent sous différents navigateurs,
Site Web : site officiel de réinitialisation du style cssreset.com,
Couramment URL utilisée : necolas.github.io/normalize.css Le navigateur est normalisé et peut être importé directement

2. Analyse du cadre de la page :

en-tête+contenu+pied de page
En-tête>Navigationnav> Bannière thématique

3. Analyse structurelle et mise en page de l'en-tête de la page

※ La saisie de lorem+tab dans l'éditeur sublime peut générer un remplissage de texte dénué de sens.



Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal