Figure:
This effect is even the News Module with three columns and four columns. I used table in the past and thought it was more convenient than CSS. After a floating occurs, Ul was used, it is easier to control. Let's take a look at the Code:
Reference:
. News {}
. News Li {list-style: none; clear: both}
. News Li a # N1 {text-Decoration: none; float: Left; line-Height: 22px ;}
. News Li a # N2 {text-Decoration: none; float: Right; color :# 999}
. News Li a # N3 {float: Right; padding-Right: 20px; color: #999}
. News Li a # N1: hover {text-Decoration: underline ;}
. News Li a # N3: hover,. News Li a # N3: hover {text-Decoration: none ;}
A # N1 is the news title, float left, N2 and N3 are the number of clicks and release date, and float right, 20 PX away;
Note that all floating points must be cleared on Li.
Tests support IE6, IE7, ff, and opera.
Example:Xmlns = "http://www.w3.org/1999/xhtml">
This is three columns.
- In the left column, click the news title item to view the release date.
- > Warmly congratulate weilaixu.cn on its grand launch 88882008-08-08
- > Warmly congratulate weilaixu.cn on its grand launch 88882008-08-08
- > Warmly congratulate weilaixu.cn on its grand launch 88882008-08-08
- > Warmly congratulate weilaixu.cn on its grand launch 88882008-08-08