div+css (ul li) implements list layout with text above the picture

css style sheet code:

html layout code:

Rendering:

In the html layout part, you can add the corresponding div according to your needs.

1. Explanation of CSS key style words

1), ul.imglist{ margin:0 auto; width:536px; overflow:hidden}
Use margin:0 auto to center the ul structure layout;
Use overflow:hidden, because the use of float attributes by the children of ul will produce Float, so use clear children and use float to cause the problem that the parent cannot be opened;
Use width width: 536px; fixed width allows the child li to accurately row only 3 effects

2), ul.imglist li{ float:left; padding:4px 8px; width:160px}
float:left, let li start juxtaposition from the left;
padding:4px 8px set the spacing between li and li boxes;
width :160px The li width must be set and fixed (the width value is measured through the slicing tool of ps software)

3), ul.imglist li img{ display:block; width:160px; height:90px}
display:block sets an exclusive line 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 allows span to set the width and height to take effect while occupying one line;
width:100%; height:30px; Set the width and height. A width of 100% will inherit the width of the parent li and is equal to the setting (160px width. The advantage of setting a 100% width is that the 100% width is automatically calculated with the parent width. Keep the width consistent);
line-height:30px; Set the text to be vertically centered in 30px;
background: #F6F6F6 Set the span background color

2. HTML key points
Use ul li combined list tag layout. Each li box contains pictures + text title content. The li box directly uses a hyperlink tag to wrap the picture and text content. Use the img tag to introduce pictures and span. The label and img form two boxes, and the CSS sets the style (display:block) of an exclusive row of functional effects to avoid text and pictures being arranged in a row instead of a top-down structure.