Recently in the Web site encountered a problem: I use the UL tag and the Li tag to build the navigation bar to be unsure of the number of Li and Li, ul width of the case of the center, but to UL used Text-align:center but did not play its due effect.
The original page structure is:
Copy CodeThe code is as follows:
The style sheet structure is:
Copy CodeThe code is as follows:
This is also not a problem, but because to implement a function is defined by an ID (menu) and two Class (Menu_ul, Menu_li), so the CSS file is bloated.
I can not get the problem of the center of the UL, because the CSS is too messy to write too much, to the last ring set a ring, they are confused, the definition of the structure of the code mixed in various to show the effect and write code, so it was messy.
In the case of brain dizzy, do not want to modify, and then re-write the implementation of the above functions of the Code, page structure:
Copy CodeThe code is as follows:
Complete style sheet:
Copy CodeThe code is as follows:
Like this, it is easy to solve the problem of UL can not center. Back to check my code, the original is because in the Li style added a sentence float:left, because the definition of display is not block, but inline, so do not float, resulting in conflict, eventually led to UL can not display.
To summarize, when writing the structure of the Web page, it is best to use a relatively uniform CSS name for the same function module. If you can define a style name to solve the problem, try not to define more than one, the code should be as concise as possible. Because the code is bloated, it is prone to problems, and it is difficult to find out where the error is. Use something like menu, menu ul, menu Li, menu A, menu a:hover this series of styles, rather than defining something like menu, Menu_ul, Menu_ul_li, which appears to be well-defined, layered, but actually confusing.
Habit is the essence of the past experience in the subconscious, but with the progress of technology, many of the past habits have become a further obstacle to improve, this time to reference the standard, to see if the past habits are worth sticking to. The same as the site, the standard is to improve efficiency, improve performance and direction, the design of web standardization can help us improve the efficiency of the maintenance site.
