DivCSS example tutorial: CSS list of mixed graphics and text with top and bottom structure

Today we will learn together how to make a frequently used "CSS list with mixed graphics and text". First, analyze the characteristics of this list, then write HTML code, and finally apply CSS styles to achieve the final effect.

The effect of this example:


Author of this article: 52CSS.com Li Xiang If you want to reprint, please create a link to this site (http://www.52css.com/), and you are not allowed to change the content of the article at will, and retain the text of this copyright statement!
The top is the name of the column I love 52css and more, and then the bottom is divided into two blocks, one displays thumbnail images, and the other displays text links, both of which can be achieved through ul+li. With the above analysis, start the following HTML encoding:


Put all elements into the layer with id wrap, and set its border color to #e5f2f8. This is to make it look like it has a shadow effect.
Then create a layer list inside it, and create three layers inside the list, namely:


Let’s start writing HTML code in detail:


Float h3 left in the list_title layer to create the title, float right to create more connections, and create ul+li pictures left floating in the list_pic layer;
Create ul+li in the list_text layer to create a news list;
At the very bottom, place a layer with class clear to clear the floats.

With the above foundation, start the following CSS coding:
Overall statement:

Set the style of the entire layer wrap, the width is 450px, the top and bottom margins are 30px, the left and right sides are aligned horizontally, and the border is set to blue (here to increase the shadow effect)


Style definition of the title part list_title:
Set the width to 426px, the top and bottom padding to 0, and the left and right margins to 10px
The column name h3 element floats to the left; the width is 300px;
Set the span element to float to the right with a width of 60px; align the text to the right and set the link


Style definition of picture layer list_pic:
First, use the ul list and set the width to 433px;
What needs attention is the setting of padding: padding:15px 0 0 15px;
(The reason why the right inner margin is set to 0 is because of the spacing problem of li, which improves the performance of the page. You can also set it to: padding: 15px 15px 0 15px; contrast effect)
li sets the size of the picture block to 94px, and the spacing margin: 0 14px 0 0;
The border color of the picture changes from blue to gray when the mouse is hovering;

Set link text style,
Convert span to block element. The links within the span are also converted to block elements, and the width and height are set to 94px and 20px respectively; the line spacing is set to 20px; and the text is aligned horizontally and centrally.


Style definition of text layer list_text:
Define the news list through ul+li. It should be noted that the time span is floated to the right, and the text is written on the top border with a blue dotted line on the right, and the top margin is set to 10px;


Finally, clear the float: .clear{ clear:both;}