Frontend Development Study Notes 1: Development Study Notes

Frontend Development Study Notes 1: Development Study Notes

 

I just spent some time learning html and css, and a rough look at javascript. After reading the tutorial, I made the following page. (This is the original)

 

There are some problems, such as some rounded corner buttons in the tutorial, use a layer-3 nested structure, which is similar to <ahref = ''> <strong> <span> HOME </span> </strong> </a> to set the background image for each label..

It seems a little outweighs the loss. In fact, it can be achieved by adding a tiled background with border-radius, that is, simple code Looks refreshing and conforms to the semantics of html. <A> HOME </a>, set a {border-radius: 5px} in css.

The implementation diagram is as follows:

Another problem is that the background of the topic of the entire page is a white image with a shadow effect on the rounded corner. In the tutorial, we also use three slices and three layers of html nesting. In fact, this can also be less troublesome. You can add the background white with a rounded border, and then set a shadow effect.

# Content {

Background: # fff;

Box-shadow: 0 3px 5px # e4e4e4;

Border-radius: 25px25px 0 0;

}

As follows:

 

However, there is a problem with the above solutions, that is, the new features in css3 are used, which may not be recognized in older browsers, and the requirements must be taken into account.

Finally, I put the complete page chart, which is better than the top one.