How to implement image layout in html

Methods to implement image layout in HTML: 1. Create a new file and create a box; 2. Set up image boxes and use p tags to distinguish paragraphs; 3. Create style to modify content; 4. Save the file Preview the effect in the browser.

The operating environment of this tutorial: windows7 system, html5&&Adobe Dreamweaver cc2020 version, DELL G3 computer.

Methods to implement image layout in HTML:

1. Before typing the code, first think about the structure, and finally draw a structure on paper. In this example, it can be divided into three parts as a whole, the upper and left parts, the top is the title bar, the left side below can be placed with pictures, and the right side is text matching.

Then we open DW, create a new HTML file, and then create a large box under the body tag. Give the big box containing the three parts a class name of box; then add the title bar of the first row Represent it as h1

2. Then set a picture box in the left column with the class name pic, and then insert the picture img under the label

3. The text is on the right side. It is set in a separate box. The paragraphs inside can be distinguished by p tags.

4. After completing the content, start creating style-modified content under the head tag. First, set a width for the overall box, and then align it in the center

5. Title bar text , basically don’t need to move, you can add a link to it or change the font color; then set the fixed width and height of the image, and float it to the left

6, Then modify the text on the right, float it to the right, and then save the file to preview the effect in the browser.

#7. As shown in the figure, the effect after previewing in the browser. In practical applications, it may be necessary to clear floating objects.

Related learning recommendations: html tutorial

The above is the detailed content of How to implement image layout in html. For more information, please follow other related articles on the PHP Chinese website!