Shulou(Shulou.com)06/01 Report--

In this article, the editor introduces in detail "how to achieve mixed arrangement of picture and text in css". The content is detailed, the steps are clear, and the details are handled properly. I hope that this article "how to achieve mixed arrangement of picture and text in css" can help you solve your doubts.

The production of a "mixed picture and text CSS list". First of all, analyze the characteristics of this list, then write HTML code, and finally apply CSS style to achieve the final effect.

At the top is the column name "template carefree" and the column navigation "CSS cool site to enjoy the DivCSS tutorial CSS template download". The column name is represented by the title element Hx, and the column navigation can be represented by the unordered list of ul li.

The form of the lower three link areas is basically the same, with picture links on the left and article list elements on the right. Think of the picture and text on the left as a paragraph, represented by the p tag, and the list of articles on the right with an unordered list of ul li.

With the above analysis, start with the following HTML coding:

? Example Source Code

?

? Place all elements in a layer with an id of list_mb5u_com for easy control of the overall layout. Set up four layers inside it, they are: list_title, l_showcase, l_article, l_templates. For the lower three content layers, apply the same class, which is list_unit.

Let's start writing HTML code in detail:

Template worry-free

CSS cool station to appreciate

DivCSS tutorial

Download CSS template

CSS cool station to appreciate

The Highland Fling

We Make Merch We Sell Merch

Kingsfield Church Connecting with God Each Other and the World

Adventure Trekking in Nepal

Web Design Hamilton-VO2 Studio

We have been doing strategic consulting Digiwize

Modern Arboricultural Services

Div CSS tutorial

CSS controls Table cells to force line wrapping and force no line wrapping

DivCSS example: CSS menu Flash effect is realized by picture simulation

DivCSS layout instances use dl dt dd to make lists

Method of embedding Flash in accordance with web standard-JS call

CSS experience: how to manage style CSS?

DIV CSS example: CSS page turning effect of orange-blue interchange

Div css form layout skills and CSS Form form Design skills

Download CSS template

Download CS template-Scuba Holding

Download CS template-Keeping It Clean

Download CS template-Culture Shock

Download CS template-Simply CSS

Template download-Doctors Office

Template download-Mint Chocolate Chip

Download CS template-Andrea Layout

? In the list_title layer, place the h4 element as the column name to create a ul list to place the column navigation.

The lower three content layers (list_unit), respectively, place the paragraph tag p, introduce linked pictures and text, and create a ul to place the article list.

At the bottom, place a layer with the class clear to clear the float.

With the above basics, start with the following CSS coding:

? Example Source Code

* {margin:0; padding:0; font-size:13px; color:#000; list-style:none;}

A {color:#03c; text-decoration:none;}

A:hover {text-decoration:underline;}

# list_mb5u_com {width:418px; margin:30px auto; border:1px solid # 999;}

Overall layout statement:

Set the style of the whole layer, the width is 418px, the outer margin is 30px, and the left and right sides are automatically aligned horizontally. The border is set to the solid gray line of 1px.

? Example Source Code

.list _ title {width:418px; height:32px; border-bottom:1px solid # 999; background:#f2f9fd; overflow:hidden;}

.list _ title h4 {float:left; width:160px; line-height:32px; text-indent:15px;}

.list _ title h4 a {color:#c00;}

.list _ title h4 a:hover {color:#03c;}

.list _ title ul {float:right; width:230px;}

.list _ title ul li {float:left; line-height:32px; padding:0 5px;}

.list _ title ul li a {font-size:12px; color:#333;}

The CSS style definition for the list_title layer of the title area:

Set the width and height of the list_title layer to: 418px, 32px; the bottom border is the solid gray line of 1px; set the background color and overflow hiding.

The column name h4 element floats to the left; the width is 160px; the line spacing 32px aligns the text vertically; the text is indented to 15px. Then set the style of the column name h4 link.

Column navigation ul list CSS style, floating to the right; width is 230px; set list item li to float to the left; line spacing is 32px; upper and lower inner margin is 0, left and right inner margin is 5px; then set the link text size and color.

? Example Source Code

.list _ unit {float:left; width:388px; margin-left:15px; padding:15px 0 8px 0; border-bottom:1px dotted # 9AC4E9;}

.list _ unit {display:inline;}

Content layer (list_unit) overall style definition:

Float to the left; the width is 388px, the left margin is 15px, the upper margin is 15px, and the lower margin is 8px; set the lower border to a light blue dashed line.

Set to inline to avoid IE's two-sided BUG.

? Example Source Code

.list _ unit p {float:left; width:164px;}

.list _ unit p a {display:block; border:1px solid # 03c;}

.list _ unit p a:hover {border:1px dashed # 00f;}

.list _ unit p an img {width:160px; height:120px; margin:1px; border:0;}

.list _ unit span {display:block;}

.list _ unit span a {display:block; width:164px; height:22px; border:0; line-height:22px; text-align:center;}

.list _ unit span a:hover {border:0; color:#c00;}

Definition of picture link style in the content layer (list_unit):

The entire paragraph p, floating to the left, has a width of 164px.

Set the link as a block element; set the border to 1px solid blue line.

In the link suspense state, the border changes to the 1px dark blue dashed line.

The definition of the picture in the link element, the width and height are: 160px, 120px; the outer margin is 1px; the border is 0 (eliminate the default frame of the picture link browser).

Set the link text style, because the above settings are overall, so in the following content, pay attention to some of the above content cascading off.

Converts the span to a block element. Links within span are also converted to block elements, with width and height set to 164px and 22px respectively; border set to 0 (cascading previous setting); line spacing set to 22px; and text horizontal alignment.

When the link text in span hovers, the border is set to 0, the color is set to # c00, and the underscore is displayed.

Example Source Code

.list _ unit ul {float:right; width:216px; margin-top:-5px;}

.list _ unit ul li {float:left; width:216px; line-height:22px; color:#039; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}

Article list style definition in the content layer (list_unit):

The entire list ul floats to the right; the width is 216px; the top margin is-5px.

The CSS style setting of the list item li, floating to the left, is 216px wide; the line spacing is 22px; the color is # 039; the last three properties are to achieve the "truncation" effect, which is described in detail on the mb5u.com website. (please note that this effect has no effect under FF)

? Example Source Code

# l_templates {border-width:0;}

.clear {clear:both;}

The final CSS settings:

The last content layer (list_unit) has no lower border, and the id for this layer is l_templates. Therefore, the cascading definition is carried out here to eliminate the border of this layer.

Clearing floats is necessary, otherwise confusion may occur under FF. This is a good coding practice.

Read this, the "css how to achieve mixed typesetting" article has been introduced, want to master the knowledge of this article also need to practice and use to understand, if you want to know more related articles, welcome to pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.