How div and CSS implement radio list design _div and CSS implement radio list design code

For the use of P and CSS design is also more interesting design effect, this article will give you a simple introduction of the next p and CSS implementation of radio list design, how to achieve the effect of P and CSS implementation of the radio list design effect code is what? Take a look below.

CSS spite technology: that is, CSS sprite technology, in fact, CSS Sprite is a picture of the icon elements, these icons can make buttons, labels and logos and so on. This technology is used in many websites to reduce the number of transfer requests, and the icons needed are summarized in one image, and can be applied to the entire page once downloaded.

The following example is mainly the application of CSS sprite technology, the direct PO code:

<! DOCTYPE html>
Build Effect:


Code Analysis:

The 1.UL tag contains 10 Li tags, because each li tag has a different sub-image, so add a different class attribute to each Li tag.

2. Each Li tag has a P tag with a class attribute of D containing 3 p tags whose class attributes are IMG, mask, and play, the three tabs are the theme icon, the Mask icon, and the play icon, and their parent node P (class attribute D) takes a background picture as a border.

3. The onmouseover and onmouseout event response letters are added to each Li tag.

4. The last section of JS code is to simulate the music box song when the song changes the effect of the name rise.

First the program obtains a label with the ID of frm and obtains all the Li sub-labels for that label, acquires all Li's span labels, and binds the first span tag to the span_obj of the Li tag object.

Two timeout functions: Shownext () and Showup (), where the showup () function is responsible for generating the song name Rise effect, and the function Shownext () is responsible for switching the playback of songs to the next music table.

Object can not set itself as a timeout function inside a method