Example of a CSS layout with Dreamweaver

In CSS layout, the use of ul,li is very common. With Div and CSS, create no table layout.

In fact, Dreamweaver also has a sample of the CSS layout, as shown in the following figure:

The format of the Li code:

A). Use CSS to format A list character:

UL li{
List-style-type:none;
}

B). If you want to change the list character to an image, then:

UL li{
List-style-type:none;
List-style-image:url (images/icon.gif);
}

C). To align Left, you can use the following code:

ul{
List-style-type:none;
margin:0px;
}

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

ul{
List-style-type:none;
margin:0px;
}
UL li{
Background: #CCC;
}

E). If you want to add a mouseover background color effect to the list, 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 the display!

F). The elements in Li are arranged horizontally, with key float:left:

ul{
List-style-type:none;
width:100%;
}
UL li{
width:80px;
Float:left;
}