CSS redefining Bullets and numbering tricks _css/html

people who have used word know that word has a "bullets and numbering" feature that is handy to use. Dreamweaver3 's Properties panel also has a similar "bullets and Numbering" icon button, which produces the Auto list function, but it has only two forms, namely squares and Arabic numerals. However, we can use Dreamweaver3 's CSS definition function to redefine the "list symbol format". The following is an example of defining an "uppercase Roman numeral Item list symbol" As a way to illustrate its use:

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

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 on the Triangle button on the right to see the list as shown:

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

Disc: solid circle;

Circle: Hollow Circle;

Square: solid block;

Decimal: the number of decimals;

Lower-roman: lowercase roman numerals;

Upper-roman: uppercase Roman numerals;

Lower-alpha: lowercase English letters;

Upper-alpha: uppercase English letters;

None: Bullets and numbering are not displayed.

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

〈style type= "Text/css"

〈!--

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

--〉

〈/style〉

For users who do not use Dreamweaver3, the above code is copied directly between 〈head〉 and 〈/head〉, resulting in the same effect.

3, So when we design the page, click on the item number icon in the Properties panel

You can get a list of uppercase Roman numerals, but you'll see the decimal number when you edit it, and only show it when you're browsing. If you need a number in another format, just select the other styles in the list in the second step.

If you want to make the press

icon, the graphic in front of the bullet (the default is a solid block) is also changed to a number, as long as the first step in the selection of "tag" tag do not select "Ol" and choose "UL", the other operations are identical. To change it to uppercase Roman numeral bullets, the resulting CSS code is this:

〈style type= "Text/css"

〈!--

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

--〉

〈/style〉

As you can see from here, the two icons play basically the same role, except that they are marked differently.

