CSS redefine bullets and numbering tips _css/html

people who have used word know that word has a "bullets and numbering" feature that is handy to use. Dreamweaver3 's property panel also has a similar "bullets and Numbering" icon button that produces an automatic list function, but it has only two forms, namely squares and Arabic numerals. However, we can use the Dreamweaver3 CSS definition function to redefine the format of the list symbol. The following is an example of how to define a "capital Roman numeral bulleted list symbol" to use:

1, Press F7 (or click on the Quick Launch bar like "gossip map" icon), pull up the CSS panel, select "None", and then click on the lower part of the Panel edit icon, in the pop-up "Edit Style Sheet" dialog box press the "New" button, in the pop-up "new Style dialog box, select Redifine HTML tag (redefine HTML tags), select "Ol" in the TAG selection box below, and press OK to immediately eject the Style Definition for Ol dialog box, as shown in the following figure:

Select "List" in the selection window to the left of the Style Definition for Ol dialog box, and on the right panel we just define "Type" and click the Triangle button on the right to see the list as shown in the following figure:

2, let me explain the meaning of the items in this list in the above picture:

Disc: solid circle;

Circle: Hollow Circle;

Square: Solid box;

decimal digits;

Lower-roman: lowercase roman numerals;

Upper-roman: Capital Roman numerals;

Lower-alpha: lowercase English letters;

Upper-alpha: uppercase English letters;

None: Bullets and numbering are not displayed.

Obviously, in this example, select "Upper-roman" and then press OK to return (note that the "Bullet" attribute is not selected now, otherwise it might not be the expected result). End with the Done button on the Edit Style Sheet dialog box. The CSS code seen between 〈head〉 and 〈/head〉 in the source code of the Web page is this:

〈style type= "Text/css"

〈!--

OL {List-style-type:upper-romancircle}

--〉

〈/style〉

For users who are not using Dreamweaver3, copying the above code directly between 〈head〉 and 〈/head〉 will produce the same effect.

3, So when we design the page, in the property panel click on the Item number icon

You can get a list of uppercase Roman numerals, but when you edit, you see a decimal number, which is displayed only when you browse. If you need a number in a different format, just select the other style in the list in step two.

If you want to press the

After the icon, the symbol in front of the graphic (the default is a solid box) also changed to number, as long as in the first step select "tag" to choose "ol" and instead of "UL", other operations exactly the same. To change it to a capital Roman numeral bullet, the resulting CSS code is this:

〈style type= "Text/css"

〈!--

UL {list-style-type:upper-romancircle}

--〉

〈/style〉

It can be seen from here that the two icons play a similar role, but the tags are different.