Div + css (ul li) implements the layout of the text list on the image, divul

Div + css (ul li) implements the layout of the text list on the image, divul

Css style sheet code:

Html layout code:

:

Html layout section. You can add the corresponding div as needed.

1. CSS key style word explanation

1) ul. imglist {margin: 0 auto; width: 536px; overflow: hidden}
Use margin: 0 auto to center the ul structure layout;
Overflow: hidden is used. Because the float attribute of the ul sub-level will fluctuate, the use of float to clear sub-level will not support the problem of parent-level generation;
Use width: 536px; fixed width to make sure that the sub-level li has only three results in one row

2) ul. imglist li {float: left; padding: 4px 8px; width: 160px}
Float: left, so that li starts to be tied to the left;
Padding: 4px 8px sets the spacing between the li and li boxes;
Width: 160px the li width must be fixed (the width value is measured by the PS software slicing tool)

3) ul. imglist li img {display: block; width: 160px; height: 90px}
Display: block sets an exclusive row for the image;
Width: 160px; height: 90px the image height and width must be fixed.

4) ul. imglist li span {display: block; width: 100%; height: 30px; line-height: 30px; background: # F6F6F6}
Display: block enables the span to set the width and height to take effect and exclusively occupies one row;
Width: 100%; height: 30px; set the width and height. The width of 100% inherits from the parent class li width equal to the setting (160px width, the benefit of setting the 100% width is that the 100% width is automatically calculated with the parent width to be consistent with the parent width );
Line-height: 30px; set the vertical center of text in 30px;
Background: # F6F6F6 set span background color

2. HTML key points
Use ul li to combine the list label layout. Each li box contains images and text titles. The li box directly uses the hyperlink label to wrap the image and text content, and uses the img label to introduce the image, the span tag and img are used to form two boxes, while CSS sets the display: block style that exclusively occupies one row of function effect, avoiding text and images arranging in a row rather than upper and lower structures.