The comparison result is shown on the left side of the figure:
2. There are several types of project list symbols for ul: program code ul {list-style-type: none}/* do not display the project symbol */
Ul {list-style-type: disc}/* Solid dot, default */
Ul {list-style-type: ncircle}/* hollow dot */
Ul {list-style-type: square}/* solid square */
The project list symbols for ol are as follows: none (none); decimal (solid dot, default); circle (hollow dot), square (small square ); program code ol {list-style-type: none}/* do not display the project symbol */
Ol {list-style-type: decimal}/* arabic numerals */
Ol {list-style-type: lower-roman}/* lowercase roman numerals */
Ol {list-style-type: upper-roman}/* uppercase roman numerals */
Ol {list-style-type: lower-alpha}/* lowercase English letter */
Ol {list-style-type: upper-alpha}/* uppercase letters */
3. Use the program code ul {list-style-image: url(arrow.gif), border: 1px #33 ccff solid, list-style-position: inside ;}
Here: list-style-position: inside; indicates that the position of the list item is set to internal, and inside and outside are the attribute values of this sentence. The comparison result is shown on the right.
In fact, friends who have used this method will find that using this method is simple, but it is difficult to locate and has great limitations in the effect, the following uses the background image method to implement the project list style:
The css code is as follows: the program code ul {list-style-type: none;}/* remove the project symbol */
Li {background: url(arrow.gif) no-repeat 0px 3px;
Padding-left: 20px ;}
4. Change the list to a paragraph
In the previous tutorial, we came into contact with the attribute definition of display: block;, while in addition to the available value of display, there is also an inline; For details, see: program code display: block; // display the object as a block or box, and display the last object with a line break.
Display: none; // hide, not show objects;
Display: inline; // line inline style. objects are arranged in one row. The last object is connected to the display object;
Display: inline-block; // The object is displayed as a block, but the inline style can be displayed.
Display: list-item; // display the object as a list item;
Perform the following comparison: <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Title> step by step, practical div + css series tutorials </title>
</Head>
<Style tpye = "text/css">
<! --
Ul {list-style-type: none; display: inline; padding: 0px; margin-left: 0px;}/* remove the project symbol */
Li {display: inline}
H1 {display: inline; font-size: 16px; font-weight: normal}
-->
</Style>
<Body>
<H1> This section focuses on the application of list elements: <Ul>
<Li> change the project symbol of the List </li>
<Li> change the list to a paragraph </li>
<Li> indent layout of the List </li>
<Li> layout of complex lists </li>
</Ul>
<H1> in the typographical process, some text-and-text mixing technologies can be used to achieve better results. </H1>
</Body>
</Html>
Effect
Set ul object, li object, and h1 object as inline attributes to form a falling segment, and then control the left margin and inner margin, as shown in the right section.
Next we will continue to improve the Code and set its first line indent:
First line indent code:
Summary: This section mainly describes the ordered list ol and unordered list ul, and common attribute parameters. In the next section, we will integrate this content to implement a more complex list layout.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
