Stylization of lines (digits) in ordered OL lists. Examples of stylish decoration UL Li lists CSS tag OL sets
Hello, dear blog readers Website. Today, within the framework of this category, I want to talk about a variety of HTML lists that can be created based on specially designed tags UL, OL, LI and DL. Using the UL and LI pair, labeled lists are created using OL and LI - numbered, and with the help of DL, DT and DD elements, the so-called definition listings are created. We also consider brief principles for creating nested structures.
I want to remind you that we have already managed, managed to talk about the basics of modern, as well as layouts tabile (). In addition, we touched on the foundations, well, learned through.
MARKED lists based on tags UL and LI
UL tag is used to create label lists, and to create numbered - OL. These tags are pair and block, just as element Li.
Separate list items are located between the opening and closing tag, which in turn consist in the opening and closing element Li. From above and from the bottom of HTML lists, the browser adds indents to one line, similar to the retreats created by the paragraph tag.
Let's see, for example, a labeled version that may look like this:
- First line
- Second
- The last element
Inside the opening and closing tags, UL, only Li elements can be installed, and any content (text, pictures, headers, paragraphs, links, and even other lists can be inserted inside these elements themselves.
Those. UL serves only for organizing a marked (not ordered) listing, and all that you will see on the Web page inside it is implemented using the contents of Li elements.
For UL, you can change the view of the marker, prescribing different values \u200b\u200bin it for the "Type" attribute. If "type" (managing the appearance of markers) for the UL element is not specified, the default marker view will be displayed (DISC - painted in the text color of the circle):
- - Circle cream (default);
- - not painted circle;
- - Square
In the examples, the type attribute, we were prescribed in the UL element, using this type of markers for all items. But the "Type" attribute can be prescribed for each individual Li tag, setting its own type of marker for this item.
An example of a marked list with various types of marker for each item:
- Disk marker
- Marker in the form of a not painted disk
- Square
Numesed lists in HTML based on Tag OL
To create a numbered listing, OL tags are used, inside which the elements Li will be located again. OL and LI, as I have already mentioned, are blocks (i.e., seek to take all the place available in width) and inside OL will not be placed anything other than Li elements.
It turns out that OL and UL are service tags that are needed only to indicate the browser, which kind of list we form (labeled or or numbered). In the case of a numbered one - to the left of each item we will see not a marker, but the point and the point behind it:
- First line
- Second point
- Third String
As I have already mentioned a little higher, the elements of UL, OL and Li have the ability to use the Type attribute. It allows you to configure the type of marker or set, what numbers or letters will be numbered listing items. For a numbered list, the parameters of this attribute may receive the following values:
- - the numbering will be performed by conventional Arabic numbers (the same option will be used by default, if there is no "Type" attribute);
- - capital letters as numbering;
- - lower case;
- - Capital Roman figures;
- - lower case roman numbers;
An example of a numbered list with different types of numbering for each item:
- with numbering by big Roman numbers
- Numbering with small Latin letters
- Small Roman Numbering
When creating numbered lists, it also has the ability to start the numbering from a unit, but from the number specified in the attribute attribute. For example:
- The first element whose number is set in the OL tag attribute Start \u003d "23"
- The next item, with a number per unit large
- Another one more
For OL, you can also start a new numbering from any value, starting from any item, speaking in the Value attribute at the opening LI item with the desired number. For example:
- First point with number one
- This element will receive the number specified in the Value \u003d "32" attribute
- Point with a large number
Registration of the appearance of lists in CSS (Style Tables)
But, as a rule, now the appearance of the markers is not given via the Type attribute, but for which the corresponding properties are prescribed.
Here I will simply give an example of various markers for non-numbered lists, the appearance of which is set through a separate file with cascading style tables.
- First point
- Second
- Last
But about we talk in subsequent articles. It is in this way that the appearance of markers for UL on this blog is set. Pictures are used as markers: for ordinary items of non-numbered list -, for nested items of non-measured -.
Special and subfed lists in HTML code
The third and the last view is called "Definition Lists" and they are set using three tags - DL, DT and DD. DL reports the browser, which will follow the list of definitions.
Usually this kind is used (well, or it was assumed that it would be used) to write dictionary articles consisting of terms (prisoners in DT tags) and their descriptions (prisoners in DD tags).
- First term
- Description
- The second term
- His description
If you look at the example above, remove that the DD element (term description) is shifted (by 40 pixels) relative to the DT element (the term itself).
In general, DL, DT and DD are block tags, and, inside the DT element, you can only insert content with line tags (it turns out that inside the DT it is impossible to use block elements of titles and paragraphs). And within DD tags, you can insert any elements and lowercase and blocks.
Nested list HTML is created by analogy with simple, but inside the main list, the part of the items is to once again in the opening and closing UL or OL tag.
Please note that a closing Li of that item in which the attached item will be created is made only after the entire code of the attached list (it is very important for its proper display on the Web page). The attached list may look something like this:
- The first point of the main numbered
- Second point
- The first element of the nested marked
- Second
- The third and last point of the marked
- The third element is numbered
Good luck to you! To ambiguous meetings on the blog pages Website
You may be interested
How to insert in HTML link and picture (photo) - IMG and A tags Select, Option, Textarea, Label, Fieldset, Legend - HTML Tags Forms of drop-down lists and text field 
HTML forms for the site - Tags Form, Input and Select, Option, Textarea, Label and others to create webform items 
As colors are set in HTML and CSS code, the selection of RGB shades in the tables, the issuance of Yandex and other programs 
Embed and Object - HTML tags to display media content (video, flash, audio) on web pages 
Tags and attributes of H1-H6 headers, HR horizontal line, briefing RR and paragraph P according to HTML 4.01 
Tables in HTML - Tags Table, TR and TD, as well as COLSPAN, CellPadding, CellSpacing and Rowspan to create them 
What is the HTML Hypertext Markup language and how to see the list of all tags in the W3C Validator 
Font Tags (Face, Size and Color), Blockquote and Pre - Outdated text formatting in pure HTML (without using CSS) 
IFrame and Frame - what it is and how best to use frames in html 
IMG - HTML tag for inserting pictures (SRC), alignment and streamlining it with text (align), as well as background tasks (background)
Based on the basics, we now consider the items used to provide the structure and values \u200b\u200bfor different parts design. If someone does not know, then ul and li, it is a much better option than simple text text, because when the text is wrapped, especially in a mobile phone, it is excellent indentation and does not flow around the marker.
It is believed that lists are a great way to present information on pages, because they are easy to read and look good. Many people seem to think that points bullets are small images, but in fact all of them are created through a fairly simple HTML code. You can insert different types of lists in each other if you want, just do not forget to close them correctly. You can play with the text you want in all these list commands.
You also need to know that the lists initially contain several elements:
1
. Unordered information.
2
. Ordered information.
3
. Definitions.
Getting to install:
1. Option:
- List element
- Unique list
- Original lists
- Zornet.ru - Webmaster
- Another list
CSS.
KsAnopan (
margin: 19px 0 0;
Padding: 0;
List-Style: None;
Counter-Reset: Li;
}
.ksangelopan Li (
Border: 2px Solid # 3575ad;
Background: # D7Dee4;
Position: relative;
Margin-Bottom: 17px;
Padding: 15px 9px;
}
.ksangelopan Li: Hover (
z-index: 1;
}
.ksangelopan Li: Before (
Border: 2px Solid # 2270B3;
Position: Absolute;
TOP: -14PX;
Padding: 3px 9px;
Font-Size: 11px;
Font-Weight: Bold;
Color: # 246eaf;
Background: # F2F4F7;
Counter-Increment: Li;
CONTENT: Counter (LI);
-WebKit-Transition-Duration: 0.4s;
Transition-Duration: 0.4s;
}
.ksangelopan Li: Hover: Before (
Background: # 2672B3;
Color: # F7F9FB;
-Webkit-transform: translate (-11px, 0);
-MS-transform: translate (-11px, 0);
-O-transform: translate (-11px, 0);
transform: translate (-11px, 0);
}
.ksangelopan li: after (
Content: "";
Position: Absolute;
Transition-Duration: 0.3s;
-WebKit-Transition-Property: width;
Transition-Property: width;
z-index: -1;
Background: #FFF;
Height: 100%;
left: 0;
Top: 0;
width: 0;
}
.ksangelopan Li: Hover: After (
width: 100%;
}
On this all installation.
2 Second option:
- List element
- Unique list
- Original lists
- Zornet.ru - Webmaster
- Another list
CSS.
Beleduzlopamges (
Margin-Bottom: 8px;
Padding: 0;
List-Style: None;
Counter-Reset: Li;
}
.beleduzlopamges Li (
Position: relative;
Border: 2px Solid # 195588;
Background: # EFF3F7;
Padding: 15px 19px 15px 27px;
margin: 12px 0 12px 40px;
-Webkit-Transition-Duration: 0.3s;
Transition-Duration: 0.3s;
}
.beleduzlopamges Li: Hover (
Background: #FFF;
}
.beleduzlopamges Li: Before (
Line-Height: 32px;
Position: Absolute;
TOP: 4PX;
left: -39px;
width: 39px;
TEXT-ALIGN: CENTER;
Font-Size: 16px;
Font-Weight: Bold;
Color: # F9F5F5;
Background: # 275B88;
Counter-Increment: Li;
CONTENT: Counter (LI);
Transition-Duration: 0.2S;
}
.beleduzlopamges Li: Hover: Before (
width: 46px;
}
.beleduzlopamges Li: After (
Position: Absolute;
left: 0;
TOP: 4PX;
Content: "";
Height: 0;
width: 0;
Border: 16px Solid Transparent;
Border Left-Color: # 275B88;
-Webkit-transition-Duration: 0.2S;
Transition-Duration: 0.2S;
}
.beleduzlopamges Li: Hover: After (
margin-left: 6px;
}
The center gamut can be independently set up the main style of the site.
3 Third Option:
- Scripts for ucoz.
- Templates for ucoz.
- Design for the site
- Styles for the site
- Stylistics on CSS.
CSS.
Nizualisanelag (
Padding: 0;
List-Style: None;
Counter-Reset: Li;
}
.nizualisanelag li (
Position: relative;
Padding: 9px 17px 17px 25px;
margin-left: 39px;
Transition-Duration: 0.2S;
CURSOR: POINTER;
Font-Weight: Bold;
Color: # 343638;
}
.nizualisanelag Li: Before (
BORDER: 3PX Solid Transparent;
Line-Height: 35px;
Position: Absolute;
Top: 0;
left: -29px;
width: 41px;
TEXT-ALIGN: CENTER;
Font-Size: 14px;
Font-Weight: Bold;
Color: # 619DCE;
Counter-Increment: Li;
CONTENT: Counter (LI);
Transition-Duration: 0.3s;
BOX-SIZING: BORDER-BOX;
}
.nizualisanelag Li: Hover: Before (
Color: # 337ab7;
}
.nizualisanelag li: after (
Position: Absolute;
Top: 0;
left: -29px;
width: 41px;
HEIGHT: 41PX;
Border: 5px Solid # 468BD0;
Border-Radius: 50%;
Content: "";
OPACITY: 0.5;
-Webkit-Box-Sizing: Border-Box;
-MOZ-BOX-SIZING: BORDER-BOX;
BOX-SIZING: BORDER-BOX;
}
.nizualisanelag li: hover: after (
Animation: 500ms Ease-In-Out 0s Bouncein;
OPACITY: 1;
}
@KeyFrames Bouncein (
0% {
OPACITY: 0;
transform: scale3d (.3, .3, .3);
}
20% {
TRANSFORM: scale3d (1.3, 1.3, 1.3);
}
40% {
TRANSFORM: scale3d (.9, .9, .9);
}
60% {
OPACITY: 1;
TRANSFORM: scale3d (1.03, 1.03, 1.03);
}
80% {
TRANSFORM: scale3d (.97, .97, .97);
}
To (
OPACITY: 1;
TRANSFORM: scale3d (1, 1, 1);
}
}
It goes with a beautiful animation.
4 Fourth Option:
- First element for the site
- Second element for the site
- Third element for the site
- Fourth element for the site
- Fifth element for the site
CSS.
Padding: 0;
List-Style: None;
}
.kudezamuden li (
Padding: 6px;
}
.kudezamuden Li: Before (
Padding-Right: 11px;
Font-Weight: Bold;
Color: # 4979a0;
CONTENT: "\\ 2606";
Transition-Duration: 0.4s;
}
.kudezamuden Li: Hover: Before (
Color: # 235E90;
Content: "\\ 2605";
}
Similar to previous versions, only the icon itself is changed.
In general, this is a small selection of lists, will give a web master to make a beautiful list on the portal, where he himself can make it more as he wants to see him.
If you need to place items in a numbered list instead of marked, then ordered HTML will be used here. This list is created using the OL tag. The numbering begins with a unit and increases by one for each subsequent ordered element of the list with the LI tag.
In the HTML hypertext markup language there is a tag
- used to create label lists. It is supported by all modern browsers and allows you to output elements in order not needed. For example, it is very part with the help of the menu items and all that concerns lists on the page: dishes, products, equipment, tools, and much more, which should be listed without indicating the priority of one or another item.
- Element # 1.
- Element # 2.
- Element # 3.
- ...
- Element # 1.
- Element # 2.
- Element # 3.
- Element # 1.
-
- Element # 2-1.
- Element # 2-2.
- Element # 2-3.
- Element # 3.
- ...
- Element # 1.
- Element # 2.
- Element # 1.
- Element # 2.
- Element # 1.
- Element # 2.
- Element # 1.
- Element # 2.
- ...
- dISC - a marker in the form of a mug (an example was higher)
- circle - a marker in the form of a transparent mug (an example was higher)
- square - a marker in the form of a square (an example was higher)
- decimal - marker in the form of a numerennov list by Arabic numbers: 1, 2, 3, ...
- decimal-Leading-Zero - a marker in the form of a numerennov list by Arabic numbers with zero at the beginning: 01, 02, 03, ...
- lower-Roman - marker in the form of a numerennov list of the Roman alphabet of small letters: I, II, III, IV, V
- upper-Roman - a marker in the form of a numerennov list of the Roman alphabet in large letters: I, II, III, IV, V
- lower-Latin - a marker in the form of a list of Latin alphabet with small letters: a, b, c, d, ...
- upper-Latin - a marker in the form of a list of Latin alphabet in large letters: a, b, c, d, ...
- lower-Greek - marker in the form of a list of Greek alphabet with small letters
- upper-Greek - marker in the form of a list of Greek alphabet in large letters
- . When setting an attribute tag
- All list items will be displayed as the attribute indicates this. But we can ask one or another element to display. Example in Figure:
- Element # 1.
- Element # 2.
- Element # 3.
- Element # 1.
- Element # 2.
- Element # 3.
- Element # 1.
- Element # 2.
- Element # 3.
- Element # 1.
- Element # 2.
- Element # 3.
- (List element).
Support browsers
Attribute
Opera.
Iexplorer.
Edge.start, Type Yes Yes Yes Yes Yes Yes reversed Yes Yes Yes Yes Not Not Attributes
Attribute Value Description compact. compact. Not supported in HTML5.
Indicates that the list should be less than the usual size (Line-Height: 80%).
Use CSS instead of this attribute.reversed Indicates that the order in a numbered (ordered) list should follow descending. The attribute is not supported by Internet Explorer and EDGE browsers. start. number Specifies the initial value of the numbered (ordered) list. Values \u200b\u200bshould be integer, it is allowed to use negative values. When using with letters (type \u003d "a" and type \u003d "a"), the number specified in the attribute value is the serial number of the letter in the alphabet. For example, start \u003d "4" will fit the letter "D" And the list will begin with it. When using the START \u003d "27" value, the counter is reset, while the list becomes two-digit ("27" \u003d "AA", "28" \u003d "AB", "29" \u003d "AC" ...). type 1 (default)
A (big)
a (lower case)
I (Roman Large)
i (Roman small)Determines the type of marker, which is used in the construction of a numbered (ordered) list. Example of use
An example of using tag <ol> <span> - First point Second point
- Third point
- First point.
- The second item.
- Third point.
Look on page it will be, respectively, so:
If you want the list to start from a specific number (not from 1), you must specify the Start attribute for the tag
-
.
For example:
Another interesting attribute is type, which will allow you to set an alphabetic numbering ("A" - large, "a" - line), or the numbering from Roman numbers ("I" - in the upper case, "I" - in the lower register).
Consider an example in which all possible Type attribute values \u200b\u200bare presented (different from the default value):
An example of using the Type HTML Tag Attribute<оl> - >
- Third point
- First point Second point
- Third point
- First point Second point
- Third point
- First point Second point
- Third point
- ):
An example of a numbered list invested in another numbered list <span> -
First point
- Third point Second point
-
First point
- Third point
- Element # 1.
- Element # 2.
- Element # 3.
- ...
- A - Specifies markers in the form of capital Latin letters (A, B, C ..);
- a - sets markers in the form of lowercase Latin letters (A, B, C ..);
- I - sets markers in the form of large Roman numbers (I, II, III, IV ..);
- i - sets markers in the form of small Roman numbers (I, II, III, IV ..);
- 1 (by default) - sets markers in the form of Arabic numbers (1, 2, 3 ..);
- . There are separate words, phrases, paragraphs, images, pieces of code, and more, which are the contents of the marked list, are located between the opening and closing tags.
Note
Inside the list it is possible to change your account to your. To do this, there is a special attribute Value \u003d "" The tag
- which is assigned some numeric value. for example
- Element # 1.
- Element # 2.
- Element # 3.
- Element # 1.
- Element # 2.
- Element # 3.
- Element # 1.
- Element # 2.
- Element # 3.
- Element # 10.
- Element # 11.
- Element # 12.
- Element # 1.
- Element # 2.
- Element # 3.
- Element # 1.
- Element # 2.
- Element # 3.
- Element # 1.
- Element # 2.
- Element # 3.
- Element # 1.
- Element # 2.
- Element # 3.
- Element # 1.
- Element # 2.
- Element # 3.
- Element # 1.
- Element # 2.
- Element # 3.
- Element # 1.
- Element # 2.
- Element # 3.
- .
- Element # 1.
- Element # 2.
- Element # 3.
- Element # 4.
This is how it looks on the page:
- Element # 1.
- Element # 2.
- Element # 3.
- Element # 4.
Example 5. Reversible numbered list in HTML
The following is an example of a reversing numbered list (account in the reverse order).
- Element # 1.
- Element # 2.
- Element # 3.
- Element # 4.
This is how it looks on the page:
- Element # 1.
- Element # 2.
- Element # 3.
- Element # 4.
The code looks like this:
Change of tag markers
- Using CSS
The elements of the marked list created by the tag
- may be marked with arbitrary images. CSS is used to change the marker type. for example
And it looks like on the page:
With the CSS help, we can set other types of marker display. But you need to remember that when you specify any style tag
- It applies to all the elements of the list. HTML Tags
Meaning and application
Numerized (ordered) List is designed for items that follow in a definite order. Numbered list begins with tag
- (abbreviated from English ordered List. - Ordered list). Each element of the list begins with a tag
- >
- >
- >
I draw your attention that it is allowed to generate numbered (ordered) lists invested in other numbered lists (inside the list item
Look on page it will be, respectively, so.
The only difference is that this tag is strictly made to number the lists. The title of the tag came from English reduction "Ordered List" - a numbered list.
Syntax tag
Where the attribute type \u003d "value" can take the following values
The START \u003d "VALUE" attribute sets the initial value (starting value) of the report.
The Reversed attribute sets the return account (if necessary).
Tag
- requires mandatory use of a closing tag
For the formation of the list item, a pair tag is used
Examples with numbered lists in HTML (
- )
Example 1. Numbered HTML List in the form of Latin letters
Example with capital letters
Example with stringent letters
This is how it looks on the page:
Example 2. Numerized HTML List in the form of Roman letters
Example with capital letters
This is how it looks on the page:
Example with stringent letters
This is how it looks on the page:
Example 3. Numbered HTML List Miscellaneous Start Position
An example that shows the features of the start attribute that allows you to set the starting value of the meter.
This is how it looks on the page:
Example 4. Change counting in numbers HTML
Below is an example with the ability to change the meter values \u200b\u200busing the Value attribute when displaying new items in the tags
Syntax tag
This code is converted to a marked list on the site:
Tag
- requires mandatory use of a closing tag
For the formation of the list elements, a pair tag is used. There are separate words, phrases, paragraphs, images, pieces of code, and more, which are the contents of the marked list, are located between the opening and closing tags.
What can be the contents of the marked list?These can be various texts, including single words, phrases and paragraphs, images, invested lists, php code slices and much more, in need of simple labeling.
Each element of the marked list retreats by default on 40 pixels to the right. Using CSS styles, we can change the display of this list at your discretion. Tag
- It is block, so it takes an all-available area, limited by the edge of the screen, a table frame or other elements of the page.
It is allowed to invest "List in the list"
for example
Attributes and tag properties
Widespread tag attribute
- Is the Type attribute indicating how the list marker will look like. Can take the following values
1. Type \u003d "Disc" - a marker in the form of a painted mug (this value is determined by default). An example with a disk was slightly higher.
2. Type \u003d "Circle" - a marker in the form of a transparent mug
For example:
3. Type \u003d "Square" - a marker in the form of a square
For example:
But what it looks like on the page:
In CSS, the marker type is set using the List-Style-Type attribute:
Consider what values \u200b\u200bcan take List-Style-Type:
Note 2.
Attribute can be assigned as the tag itself.
- and tags
Global Attributes Attributes forms HTML5
Introduction to JSON What the JSON TXT file
Regular Expressions (Regexp Object) Form Check Regular JavaScript Expressions Examples