Practical exercises

1. use CSS3 to achieve the following effects

   Requirements:

        1) the width is 257px.

        2) As the mouse passes, the blue area slides slowly from bottom to top。

        Before the mouse passes by                                After the mouse passes by,

2. Complete the production of mobile pages as required

   Requirements:

            1) Use HTML5 tags

            2) Use flexible box layout

            3) The finished effect is consistent with the picture effect

            4) Adapt to all mobile phone screens

   The effects are as follows：

3. Layout the following renderings with DIV+CSS

    Requirements：

            1) Code specification

            2) The final effect is consistent with the renderings

            3) The arrow in front of each column uses a custom font, and the code is 

            4) Rounded corners and box projections must be added to the outermost box

            5) Excessive text displays ellipsis

    The effects are as follows：

3. Complete a simple mobile page layout according to the following requirements

    Requirements：

            1) Semantic tags using HTML5

            2) Use flexible boxes to complete the layout

            3) It is required to adapt to all mobile devices

            4) Boutique recommendation can only display 4 pieces of data

            5) The search box at the top does not scroll with the scroll bar

            6) The final effect is consistent with the renderings

            7) code writing specification

    The effects are as follows：