Study notes chapter eighth using CSS Landscaping list

8th. The basic structure of the list 8.1 using CSS Landscaping

In HTML, a list structure can be divided into two basic types: a sequence table and an unordered list. Use the following tags:

• <ul>...</ul>: identifies unordered lists;
• <ol>...</ol>: identifies a sequence list;
• <li>...<li>: Identifies list items.

In addition, you can use the definition list. The definition list includes terms and explanations for two pieces of content. The included labels are described below:

• <DL>...</DL>: identity definition list;
• <DT>...</DT>: identification entry;
• <dd>...</dd>: Identification explanation.

8.2 Create List 8.2.1 unordered list 8.2.2 ordered list

The <ol> tag contains 3 more useful properties, which are supported at the same time for HTML5. Specify the following:

<ol> Tag Properties

Properties	Take value	Description
Reversed	Reversed	Define List Order Descending
Start	Number	Defines the starting value for a sequence table
Type	1, a, a, I, I	Define the type of markup that is useful in the list

8.2.3 Definition List

The definition list appears as a <dl> tag, with <dt> and <dd> tags in the <dl> tab, and one <dt> tag for one or more <dd> tags.

8.2.4 Menu List

Redefined <menu> tags in HTML5. Useful <menu> You can define a list or menu of commands. <menu> can include <command> and <menuitem> tags, which define commands and items.

<command> tags can define command buttons, such as radio buttons, check boxes, or buttons. This element is visible only if the command element is inside a menu element.

Currently, only IE9 (earlier or later versions are not supported) and the latest version of Firefox support <command> tags.

The <command> tags contain attributes such as:

<command> Tag Properties

Properties	Take value	Description
Checked	Checked	Defines whether or not it is selected. Only for radio or checkbox types
Disabled	Disabled	Define whether the command is available
Icon	Url	Defines the URL of an image to display as a command
Label	Text	Define the visible label for the command
Type	CheckBox, Command, Radio	Defines the type of command, which is the default command
Radiogroup	GroupName	Defines the group name to which the command belongs, only when the type is Radio

The <menu> tag also contains two private properties, which are described briefly as follows:

• Label: Defines the visible label of the menu;
• Type: Defines which type of menu to display, with the following values:
  • List: Default value, define menu;
  • Context: Defines the afternoon menu, which must be activated before the user can interact with the command;
  • Toolbar: Defines a toolbar menu, an active command, that allows the user to interact with the command immediately.

8.2.5 popup Menu

<menuitem> tags define commands/menu items that users can invoke from the pop-up menu.

Currently, only firefox8.0+ version support <menuitem> tags are available.

<menuitem> contains the following attributes:

<menuitem> Tag Properties

Properties	Take value	Description
Checked	Checked	Defines the command/menu item to be selected after the page is loaded. For type= "Radio" or type= "checkbox" only
Default	Default	Set command/menu item as default command
Disabled	Disabled	Defining Commands/menu items should be disabled
Icon	Url	Define icons for commands/menu items
Label	Text	Necessary. Defines the name of the command/menu item to display to the user
Radiogroup	GroupName	Defines the name of the command group, which toggles when the command/menu item itself is toggled. For type= "Radio" only
Open	Open	Define whether details are visible
Type	CheckBox, Command, Radio	Define the type of command/menu item

8.2.6 case: Design picture rotation function 8.2.7 case: Design sharing function 8.2.8 Case: Add Task List 8.3 design CSS style

List default state: Additional bullets to the left, and list items indented display. CSS defines several specialized properties for the list structure:

CSS Private List Properties

Properties	Description
List-style	conforms to the attribute. Set list item related content
List-style-image	Set the symbol image for a list item
List-style-position	Sets the display position of the list symbol, based on or outside the text, with values including outside | Inside
List-style-type	Set the type of list bullet

8.3.1 Design Bullet Type

CSS uses the List-style-type property to define the type of list bullet, and the attribute value is described as follows:

List-style-type Property Value

Property Value	Description	Property Value	Description
Disc	Solid Circle, default value	Upper-roman	Uppercase Roman Numerals
Circle	Hollow Circle	Lower-alpha	lowercase English letters
Square	Internship Box	Upper-alpha	Uppercase English letters
Decimal	Arabic numerals	None	Bullets Not applicable
Lower-roman	Lowercase Roman Numerals	Armenian	The traditional Armenian numerals
Cjk-ideographic	Plain, ideographic numerals	Georigian	The traditional George number
Lower-greek	Basic Greek Small Letter	Hebrew	The traditional Hebrew numerals
Hiragana	Japanese Hiragana characters	Hiragana-iroha	Japanese Hiragana serial Number
Katakana	Japanese Katakana Characters	Katakana-iroha	Japanese Katakana Serial Number
Lower-latin	lowercase Latin alphabet	Upper-latin	Uppercase Latin alphabet

CSS uses the List-style-position property to define where bullets are displayed, with values including outside and inside. Outside indicates that a bullet appears outside the text line of the list item, and inside indicates that the bullet is displayed within the text line.

8.3.2 Customizing bullets

Use the List-style-image property to customize a bullet that allows you to specify an external icon file to meet your individual design needs, using the following:

< URL >

The default value is None.

8.3.3 using background graphic to design bullets

Using a background image to define bullets requires two design tips:

1. Hides the default bullet for the list structure by setting List-style-type:none.
2. Define the background image for the list, specify the bullets to display, control its display position with the background map precise positioning technology, and increase the left margin of the list items to prevent the background map from being obscured by the list text.

Study notes chapter eighth using CSS Landscaping list