Recently in doing a Web site encountered a problem: I used the UL tag and the Li tag to build the navigation bar to be in the uncertainty of Li and Li, the UL width of the case center, but to the UL used Text-align:center after did not have the effect.
The original page structure is:
Copy Code code as follows:
<div id= "Menu" >
<ul class= "Menu_ul" >
<li class= "Menu_li" ><a href= "#" >Firede</a></li>
<li class= "Menu_li" ><a href= "#" >Style5</a></li>
</ul>
</div>
The style sheet structure is:
Copy Code code as follows:
<style>
#menu {...}
. menu_ul{...}
. menu_li{...}
</style>
This is not a problem, but because to implement a function but defined an ID (menu) and two Class (Menu_ul, Menu_li), so the CSS file is bloated.
I do not have the problem of UL Center, is because the CSS write too much chaos, to the last ring set a ring, they are confused, the definition of the structure of the code mixed in various to display the effect of the code, and then write chaos.
In the brain dizzy situation, do not want to modify, and then rewrite the code to achieve the above functions, page structure:
Copy Code code as follows:
<div id= "Menu" >
<ul>
<li><a href= "#" >Firede</a></li>
<li><a href= "#" >Style5</a></li>
</ul>
</div>
Complete style sheet:
Copy Code code as follows:
<style>
#menu {text-align:center;}
#menu ul {padding:0;margin:0;}
#menu Li {display:inline;padding:0 10px;}
</style>
Like this, it is very simple to solve the problem of the UL can not be centered. Back to check my code, the original is because in the Li's style added a float:left, because the definition of display is not block, but inline, so and can not float, resulting in conflict, eventually led to UL can not be centered display.
To sum up, when writing a Web page structure, 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 multiple, and the code should be as concise as possible. Because the code is bloated, it's easy to go wrong and it's hard to see where the bugs are. Use more like menu, menu ul, menu Li, menu A, menu a:hover this series of styles, rather than define some like menu, Menu_ul, Menu_ul_li This seemingly conditioning clear, hierarchical, but in fact very confusing name.
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 increase in the obstacles, this time will be more reference to the standard, to see the past is not worth sticking to the habit. The same as the Web site, the standard is able to improve efficiency, improve performance and indicate direction, the design of web standardization will help us improve the efficiency of maintaining the site.
