Dreamweaver's CSS layout examples ul and li

In CSS layout, ul, li of the application is very common. With DIV and CSS, create a free form layout.

In fact, there also comes with Dreamweaver CSS layout example

Click to view larger image

LI code formatting:

A). Using CSS to format a list of character:

ul li (

list-style-type: none;

)

For example, the following:

Supply and demand information

B). If you want to replace the list of character images, then:

ul li (

list-style-type: none;

list-style-image: url (images / icon.gif);

)

For example, the following:

Supply and demand information

C). To left-aligned, you can use the following code:

ul (

list-style-type: none;

margin: 0px;

)

For example, the following:

Supply and demand information

D). If you want to add background color to the list, you can use the following code:

ul (

list-style-type: none;

margin: 0px;

)

ul li (

background: # CCC;

)

For example, the following:

Supply and demand information

E). If you want to list Add MOUSEOVER background color effects, you can use the following code:

ul (list-style-type: none; margin: 0px;)

ul li a (display: block; width: 100%; background: # ccc;)

ul li a: hover (background: # 999;)

Description: display: block; this line must be added, so as to block display!

For example, the following:

Supply and demand information

F). LI elements horizontally, the key FLOAT: LEFT:

ul (

list-style-type: none;

width: 100%;

)

ul li (

width: 80px;

float: left;

)







Recommended links:



MPEG4 To WMV



Increase The Availability Of Sql Server 2008



FLASH to MPEG



WMV to MOV