CSS: redefinition of project symbols and numbering tips _ CSS/HTML

CSS to redefine the project symbol and number skills Anyone who has used Word knows that Word has a "project symbol and number" function, which is easy to use. The attribute panel of Dreamweaver3 also has a similar "project symbol and number" icon button to generate an automatic list function, but it only has two forms, namely square and Arabic numerals. However, we can use the CSS definition function of Dreamweaver3 to redefine the "List symbol format ". The following describes how to use an "upper-case roman numerals project list symbol:

1,Press F7 (or click the icon in the Quick Start column like the "Gossip graph") to bring up the CSS panel, select "none", and then click the edit icon in the lower part of the panel, in the "Edit Style Sheet" dialog box that appears, press the "New" button. In the "New Style" dialog box that appears, select "Redifine html tag (redefine html tag, in the "Tag" selection box below, select "ol" and press OK. The "Style Definition for ol" dialog box is displayed immediately, as shown in:

Select "list" in the selection window on the left of the "Style Definition for ol" dialog box. On the right panel, just define "Type" and click the triangle button on the right, you can see the list shown in:

2,Let me explain the meanings of the items in this list:

Disc: solid circle;

Circle: hollow circle;

Square: solid square;

Decimal: A decimal number;

Lower-roman: lowercase roman numerals;

Upper-roman: upper-case roman numerals;

Lower-alpha: lowercase English letter;

Upper-alpha: uppercase English letters;

None: The project symbols and numbers are not displayed.

Obviously, in this example, select "upper-roman" and press OK to return the result. (Note that do not select the "Bullet" attribute, otherwise, it may not be the expected result ). In the Edit Style Sheet dialog box, click "Done. The CSS code seen between

<Style type = "text/css"> "〉

<〈! --

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

--> --〉

</Style> 〉

For users who are not using Dreamweaver3, directly copying the above Code between head and head has the same effect.

3,In this way, when designing a webpage, click the project number icon on the property panel.

You can get a list of upper-case roman numerals, but you will still see the decimal number during editing. It will only display its original face when browsing. If you need numbers in other formats, you only need to select other styles in the list in step 2.

If you want to press

After the icon, the image before the project symbol (the default is a solid square) is also changed to a number, select "ol" instead of "ul" when selecting "Tag" in step 1. Other operations are identical. If you want to change it to an upper-case roman numerals, the CSS code is as follows:

<Style type = "text/css"> "〉

<〈! --

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

--> --〉

</Style> 〉

From here, we can see that the two icons play the same role, but they are marked differently.