Comment implémenter la mise en page d'image en HTML

Comment implémenter la mise en page d'une image en HTML : 1. Créez un nouveau fichier et créez une zone ; 2. Configurez la zone d'image et utilisez la balise p pour distinguer les paragraphes ; 3. Créez un style pour modifier le contenu ; 4. Enregistrez le fichier. Prévisualisez l'effet dans le navigateur.

L'environnement d'exploitation de ce tutoriel : système windows7, html5&&Adobe Dreamweaver version cc2020, ordinateur DELL G3.

Comment implémenter la mise en page d'une image en html :

1 Avant de taper le code, réfléchissez d'abord à la structure, et enfin dessinez une structure sur papier. Dans cet exemple, il peut être divisé en trois parties dans leur ensemble, les parties supérieure et gauche, la partie supérieure est la barre de titre, le côté gauche en dessous peut être placé avec des images et le côté droit est la correspondance de texte.

Ensuite, nous ouvrons DW, créons un nouveau fichier HTML, puis créons une grande boîte sous la balise body. Donnez à la grande boîte contenant trois parties un nom de classe box ; Représentez-le comme h1

2. Définissez ensuite une zone d'image dans la colonne de gauche avec le nom de la classe pic, puis insérez l'image img sous l'étiquette

3. Le texte est sur le côté droit, qui est placé séparément dans une case. Les paragraphes à l'intérieur peuvent être distingués par des balises p

<.>4. Après avoir terminé le contenu, commencez à créer du contenu avec un style modifié sous la balise head. Tout d'abord, définissez une largeur pour la boîte globale, puis alignez-la au centre

. 5. Le texte de la barre de titre n'a pas besoin d'être déplacé, vous pouvez y ajouter un lien ou changer la couleur de la police, puis définir la largeur et la hauteur fixes de l'image et la faire flotter vers la gauche

6. Modifiez ensuite le texte à droite, faites-le flotter vers la droite, puis enregistrez le fichier pour prévisualiser l'effet dans le navigateur.

7. L'image montre l'effet après prévisualisation dans le navigateur. Dans des applications pratiques, il peut être nécessaire de dégager des objets flottants.

Recommandations d'apprentissage associées : tutoriel HTML

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!