View the CSS layout design from the problems in the CUMT campus navigation (I) CSS box model and cumtcss

View the CSS layout design from the problems in the CUMT campus navigation (I) CSS box model and cumtcss

The campus navigation system is worth mentioning:

1. Level-2 menu bar and iframe embedded window (style design, use hover for effect)

2. AMAP APIs (custom basemap style, bounce point, information form, and line navigation)

3. The function getElementById () in DOM; (read Javascript DOM programming art)

4. Return to the top JS implementation

Then there is a small target:

1. Adjust the style of the blog Garden (Completed) Is a review and connection of the previous content, while understanding the new features.

2. Use bootstrap/ps

3. the free time of the next semester will go through "JS advanced programming.

Enter the subject: after finishing this page, the teacher just looked at it and did not give an evaluation. On the contrary, a computer-born teacher gave a lot of pertinent suggestions when presenting it in another professional class. First, there is no adaptive window, that is, responsive design. After you change the page size, the content arrangement becomes messy. Second, you can consider adding a background database to allow users to log on. At the same time, I also found some problems. At the beginning, JS and CSS were not separated from HTML, and they were all written in the same page. The distinction between different class selectors is also unknown. Almost all are id selectors. There are also poor color matching and design, and the div is messy. I didn't understand it at that time. Now I want to think about it as a basic front-end problem.

CSS traditional box model, which is the core basic knowledge for typographical use.

1. the outer margin is merged. When two adjacent element frames in the upper and lower directions vertically meet each other, the outer margin is merged, the height of the merged outer margin is equal to the higher one of the two merged outer margins. The margin between the inside box, floating box, or absolute positioning is not merged. Transfer between parent and child levels.

2. The width and the value of the margin attribute can be set to auto. When auto is used, the width is as wide as possible, and the height is as narrow as possible, that is, the height of the element should exactly contain the height of its inline content.

3. the elastic layout is available relative to the unit em, which is determined by the vertical length of the parent element's text font-size (1em defaults to 16px), using the online tool PXtoEM (http://pxtoem.com /) you can easily and quickly calculate the required em Value Based on px.

3. Considering compatibility, you must add the browser prefix-moz-border-top-colors to the performance of different browsers.

4. box-sizing actually corresponds to the ie box model (border-box, without changing the overall size) and w3c standard box model (content-box)

5. Add the shadow effect to box-shadow, adjust the spur blur, and determine the Blur size by spread.

6. Subsequent style adjustment details will be added in this article.