CSS layout Tutorial: How to Use CSS to create a mix of images and text

A friend asked me a question about CSS on QQ, a product display page with product images and product names, and how to use CSS layout, let's talk about my points and propose my methods.
If you are engaged in web design work, you should have had many such cases: Put the company's product pictures on the top, put the product name below, click the picture or product name to view the product details. Of course, such forms often appear on other websites, such as news and photo and wallpaper sites. Watch the video (click to zoom in ):

First, let's analyze the form. Each group is similar: the upper image link, the lower text link, and then repeat. You can arrange the adaptation. We can regard them as a group of unordered list items, and all products on one page are Unordered Lists.

Each list item contains an image, links, and text links. We can use CSS to properly control images and text to achieve this effect. Then let each list item float, let them have three rows, and horizontally align the three list items in the whole unordered list.

Okay, I don't need to talk much about it. The above ideas are basically clear. Let's start writing HTML code:

Example source code [www.52css.com] <ul id = "Products">
<Li>
<A href = "#"> </a>
<Span> <a href = "#"> title Position </a> </span>
</LI>
<Li>
<A href = "#"> </a>
<Span> <a href = "#"> title Position </a> </span>
</LI>
...... Omitted below
</Ul>

We created an unordered list with the ID of products. Each list item includes an image link and a text link. To facilitate CSS control, we place the text link in the span.

The following describes how to write CSS code:

Example source code [www.52css.com] * {
Margin: 0;
Padding: 0;
Font-size: 12px;
Color: #000;
Text-Decoration: none;
}

CSS overall layout Declaration: margin and fill are both zero, 12 PX text size, black text, remove text decoration line (that is, define link text without underline ).

Example source code [www.52css.com] # products {
Width: 582px;
Margin: 50px auto;
}

Define the width of the unordered list as 582px. The following describes the origins of this value. The top and bottom margins are 50px, and the left and right margins are automatic, enabling the horizontal center alignment of ul.

Example source code [www.52css.com] # products Li {
Width: 154px;
Height: 154px;
Float: left;
Margin-left: 30px;
Display: inline;
}

Defines the style of the list items in the unordered list, that is, a group of "product images" and "text names": the width is 154px, the height is 154px, float to the left, and the left margin is 30px. To eliminate the bug of double margin, we set display: inline ;. There are three groups of contents in one row, with four margins: 154*3 + 30*4 = 582. This is the origin of the unordered list width. See the following example image (click to enlarge ):

Example source code [www.52css.com] # products Li {
Display: block;
}
# Products Li a IMG {
Border: 1px solid #666;
Padding: 1px;
}

All links are block elements. It is easy to control, and when it is set as a block element, the area of the mouse is increased to improve the user experience.
Set the solid line of the border of the linked image to 1 px, and the color is dark gray. Set the padding to 1px to create a gap between the edge and the image.

Example source code [www.52css.com] # products Li span {
Width: 154px;
Height: 30px;
Line-Height: 24px;
Text-align: center;
}

These codes define the style of the link text. The width and height are 154px and 30px. The row height is 24px, and the text is centered and aligned. Let's take a look at the current results!

Maybe you think our work is over, pictures and text are arranged up and down in the predefined way, and the whole page looks good. However, we need to note that the text may not be fixed. It may be three or fifteen words. What will happen if there are too many words? (Click to enlarge)

Fainted! The text squeezed li away, and everything went away. You may think that you can use the ASP script to control the number of texts to read. Maybe this is not a good idea. We can do it through CSS. Our link is a block element, when the text exceeds the 154px width, it is automatically hidden, and the ellipsis can be implemented in IE. we add the following code in # products Li span:

Example source code [www.52css.com] white-space: nowrap;
Text-overflow: ellipsis;
Overflow: hidden;

Let's take a look at the effect! The layout will not be damaged now!