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

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.

Adresse de lecture du cours : http://www.php.cn/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!