I recently found that my CSS is not very good, so I read the CSS authoritative guide again. I always feel that I cannot grasp the key points. Abandon treatment... Let's look at other books. Then the school girl told me that her level-2 menu was messy. At that time, I was thinking about Level 2 menus. Why? I think this can be done in 10 minutes. I spoke to her very arrogant and said, "I'll write something simple later ". As a result, the bloody case is triggered...
The second-level menu must be implemented in the following ways:
(If I find similarities, it's no coincidence that I took screenshots from other webpages ~ _~). Since it is simple, the effect is certainly not so elegant. But at least the basic effects and principles should be achieved.
10 minutes have passed... 15 minutes have passed... this "wait" seems a bit long. At this point, the school girl said she would try again at night (I was not together, chatting via QQ, and living on the first floor ). At that time, I calmly returned one: "OK ". In fact, my heart is not calm, because it has not been implemented yet. If I come to ask me at night, I cannot say that I will not. So I continued my research. I don't know how long it will take to finally write it out...
Actual:
Do not spray it too early. It is not a rub, It is very frustrating ....
Later, when I communicated with my school girl at night, I found that many problems were hidden.
I attached the code for implementing the effect: (the code is a little long and collapsed on its own)
<! Doctype HTML> <HTML lang = "en">Summary:
1. horizontal navigation bars can be arranged horizontally. One is float: left, and the other is display: inline-block. Advantage: This effect can be achieved.
Disadvantage: compatibility issues exist.
Float: left. Compatibility issues:
(1) Clear floating: I usually use two types
// The first type. clearfix: After {content :'. '; Height: 0; display: block; visibility: hidden; clear: Both ;}. clearfix {ZOOM: 1;} // type 2. clearfix {overflow: hidden; ZOOM: 1 ;}I usually use the first one, because he will not have any problems. But in fact, I prefer the second one because the code is short. However, the second one has some disadvantages: for example, I cannot use it now, because the sub-menu needs to locate the parent element overflow, overflow: hidden;, which causes overflow not to be displayed. So I chose the first one.
(2) floating double margin in IE6: condition: block + horizontal margin + float. Solution: _ display: inline ;. But I didn't write it because I didn't use margin.
(3) 3px offset in IE6: When an element floats and does not want the adjacent section to surround it, margin-left is set, and 3px offset _ Height: 1% is generated in IE6 ;, this can trigger haslayout of IE. In addition, when the height of IE is different from the actual height, ie uses stretching to include the child element, rather than overflow. Of course, this is not used in the level-2 menu. I just thought about it. Let's make a summary.
There are other compatibility issues about float.
Display: inline-block. Compatibility.
(1) The inline-block display varies with browsers. Solution: * display: inline;/* IE6, 7 block element */* ZOOM: 1 ;.
(2) blank placeholder gap. Solution: font-size: 0. But! Some browsers do not support font-size: 0. Safari still has a 5px gap, while IE6 and 7 still have a 1px gap. So the solution is: Set ul element style to: font-size: 0;/* all browsers */* word-Spacing:-1px; /* IE6, 7 */Letter-Spacing:-5px;/* safari and other browsers with 0 font sizes are not supported. N is adjusted based on the parent font */. However, Li sets the font style back to: font-size: 16px; letter-Spacing: normal; Word-Spacing: normal; Vertical-align: Top ;.
2. implement Sub-menu placement. Absolute positioning of sub-menus, but relative to who? Is the direct parent element or ancestor element of the sub-menu? Finally, I chose the ancestor element. (That is, the ancestor element: Position: relative ;)
The reason is: The test will definitely locate relative to the direct parent element (that is. parent {position: relative;}) or relative to the ancestor element (I .e. the difference between nav {position: relative;}) is. Because Li is set to float: left, it is arranged horizontally below the parent element when Positioning Relative to the ancestor element, when Positioning Relative to the parent element, it is vertically arranged below the parent element. (Top: 40px; so below)
In fact, this raises another question: Since it is relative to the ancestor element arrangement, why is it horizontal arrangement below the parent element, rather than horizontal arrangement below the ancestor element ?? The reason is that left: 0 is not specified;
So what is the difference between specifying left: 0 and unspecified left values (the default value is auto) during absolute positioning? Isn't the processing effect the same?
Actually not. about absolute positioning: When the element is set to position: absolute and top is Auto, the top of the element must be aligned with the original top position before it is not set (left: auto, right: auto also uses this principle ). I didn't notice it at ordinary times. I thought that setting left: 0 is the same as setting left: 0?
This raises a question. How does one locate the top, right, bottom, and left values when only position: absolute is specified? Is it in the upper left corner of the ancestor element? Or in the original place?
The answer is: none. By default, the four values are auto by default. According to the preceding principle, the top of an element must be aligned with the original top position before its unposition. The element is a little bit below the uncertain position, and other elements remain unchanged.
3. About selector weight :! Important (infinite)> inline (1000)> ID (100)> class/pseudo class (10)> tag/pseudo element (1)> * (0)> inherit (none ).
4. Content overlap issues.
For floating and other elements:
When the box inside a row overlaps with a floating element, its border, background, and content are displayed on top of the floating element.
When a block box overlaps with a floating element, is its border and background displayed below the floating element, and the content displayed above the floating element.
Use Z-index if location causes overlap. Note that Z-index can only be used to locate elements.
5. Concerning the problem that the sub-menu in the level-2 menu actually needs to implement content under its parent element. I read the source code of the webpage at the beginning of the article. He added an empty Li in the sub-menu. Use js to calculate the width of the Li. I thought we should set different values in the margin of the first element of the sub-menu. But how does this value come from. In fact, I did not think about it. Guidance ~~
In addition to discovering these CSS technical problems. In fact, I would like to say that no matter what you learn, especially the technology, you must learn to share and communicate. If my school girl didn't ask me, maybe I still think the level-2 menu is very simple. If I don't finish it, maybe I don't know that I don't even write the level-2 menu. If I don't talk about it, I will just try to achieve the result without asking for the result of the process, but I will not think about it, give examples, and understand it.
Share more, share more wisdom, and exchange more. Good night, everybody.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
