DIV CSS example tutorial: A fresh style CSS news list production_html/css_WEB-ITnose

Today we talk about the production of a news list. News list is an important element of a website. We will encounter it often, and how to deal with its appearance is particularly important. In this example, we float the title and date separately, and show different color changes when the mouse hovers over the link. And we control the background of LI so that it can also generate some interactions. The overall effect is pretty good. You can take a look at the picture below:

The XHTML code is very simple, it is an unordered list, but we have set different CLASS for the title and time to facilitate control.

                                                                                                                                                 had made Text text for text title2007-08-06
                                                  ="#">Here is the text of the related text title.Here is the text of the related text title.The text title of the related text title.2007-08-06
                                                             Here is the text of the related text titleHere is the text of the related text title2007-08-06
         

Here is the text of the relevant text titleHere is the text of the relevant text title2007-08-06

                                                                      The text of the related text titleHere is the text of the related text title2007-08-06

Here is the text of the related text titleHere is the text of the related text title2007-08-06

                                                             Here is the text of the related text title. Here is the text of the related text title. The text of the text title is the text of the text title. a> /span>2007-08-06
          

< ;span class="lbt">Here is the text of the relevant text titleHere is the text of the relevant text title2007-08-06

                                                                                                                                                                                                     

Here is the text of the relevant text titleHere is the text of the relevant text title2007-08-06

                                    span class="lbt">Here is the text of the relevant text titleHere is the text of the relevant text title2007-08-06 The text of the text title2007-08-06
 

< a href="#">Here is the text of the related text titleHere is the text of the related text title2007-08 -06

Here is the text of the relevant text titleHere is the text of the relevant text title

                                                                 The text of the text title here is the text of the related text title2007-08-06
< ;/ul>

Let’s look at the following CSS code:

#pagelist {border:4px solid #ccc; padding:10px; width:530px; font-size:12px; list-style-type: none; }
#pagelist li {width:530px; height:30px;}
#pagelist li a .lbt {display:block; width:448px; float:left; text-indent:20px; text-decoration :none; white-space:nowrap; text-overflow:ellipsis; overflow: hidden; display:inline;}
#pagelist li a .ldt {display:block; width:75px; float:right; text-align: center; color:#069; text-decoration:none; display:inline;}
#pagelist li a {width:530px; height:30px; display:block; line-height:30px; color:#666; text -decoration:none; cursor:hand; background:url(20070807_bg.png) no-repeat 0 0;}
#pagelist li a:hover{ color:#03c; text-decoration:none; background:url(20070807_bg .png) no-repeat 0 -30px;}
#pagelist li a:hover .ldt {color:#000;}

First we define UL’s borders, padding and other commonly used attributes.
We set the width of LI to 530px and the height to 30px.
We set the title and time separately. The related properties are also easy to understand.
We set the style of the link. The main thing to pay attention to is the color changes and settings cursor:hand;

http://www.52css.com/attachments/month_0708/20070807.html Click to view the final Working effect!