I encountered a problem when I learned how to copy an H5 website.

I encountered a problem when I learned how to copy an H5 website.

 

 

 

In the second week of studying H5, I started to copy the website and found more problems in the process.

1. TOP block: the first problem encountered during top creation, how to adjust the background color once the top left and right sides are different

Solution: create two divs to replace one div.

 

2. Not proficient in floating arrangement:

When floating is used, various blocks are always float.

The solution is to use positioning to forcibly locate the position of each block, but the disadvantage is that the response is not easy to do and it feels that there are too many codes.

 

 

 

 

3. Handling of some Z axis problems is not clear

After locating the Z axis problem

Adjust the z axis of each block using the z-index attribute

But there are two blocks with both float and positioning, it seems that you cannot use the Z axis transformation.

4. For hover events of hidden blocks:

At first, I didn't understand the hidden attribute, so I didn't like to use hidden to hide and extend the display.

Use display: none hover to use display: block instead.

However, after learning the transition, we found that the display does not use the transition attribute.

 

 

 

 

5. For the middle block, the div label is excessively used, resulting in a weight conflict when writing the css of the div.

You can only add the id attribute to each div if it cannot be modified.

 

The above are some common problems and solutions encountered this week.