1. Now I want to make the effect of Xiaomi's left sidebar, how should I do it?
2. After touching Xiaomi mall, new product cases will be displayed
3. Once touched, this list will appear
4. This involves the element display mode:
5. Employing people can be divided into men and women. According to the characteristics of men and women, the corresponding division of labor and cooperation are carried out. What is the display mode is the way you want to display this element. Specifically, it can be divided into block elements and inline elements. element
For example, this box occupies an element exclusively, because the accounting element is more suitable
6. Those elements are block-level elements. The following are common accounting elements:
A Note About Block Elements
Block-level elements cannot be placed inside the P element, or the code in the browser will become like this
7. What are the common inline elements
7.1 The characteristics of inline elements are displayed in one line: it is invalid to directly set the height and width, and the default width is the width of the content itself
7.2 Precautions: The following writing is wrong
7.3 In special cases, a can be placed with block-level elements, such as the following a, and there are boxes and accounting elements in it
8. Inline block elements
8.1 The characteristics of inline block elements, one line can also display many
8.2 The case of inline block elements, the inline block elements are also arranged in a row, but its biggest feature is that the height and width can be set
9. The conversion of inline block elements is often used to increase the click range of a in development
9.1 Conversion to inline elements
9.2 Inline-block elements
10. The a link is an inline element, but why is it displayed vertically: the solution is to convert the a link into a block-level element
10.1 Conceptual ideas:
10.2 Case code:
How to quickly design: use snipaste, press and hold F1, then press and hold F3
10.3 Convert a link to an accounting element, and design width and height at the same time:
Press and hold the cut with snipaste to view the width and height of page design elements:
How to write the code:
10.4 The background color after the mouse is transformed
11. Discuss the use of padding to change the width of the box
