Implementation of the mobile phone classification page and end classification page

Mobile phone classification page implementation, terminal classification page
Let's not talk about it first. First, I split the page into the following modules. There are several important points to note: 1. Click "City 1" and "City 2" in section 1 to switch the different div modules in section 2; 2. There are different div modules in Section 2. Their layout is shown in section 2, but only one div module is displayed. Other modules are hidden; 3. Click a leftBar entry in a div module to display the corresponding rightBar module in the rightBar module. Other rightBar modules are hidden. 4. the header must be fixed at the top. 5. Set the page layout by percentage and adjust the width to adapt to different screens. 6. To adapt to different mobile phone screens, add the following code to the head label: <meta name = "viewport" content = "width = device-width, initial-scale = 1, minimum-scale = 1.0, maximum-scale = 1, user-scalable = 0 "> now explain the implementation difficulties of each part. I. header Part 1. fixed the header, so set the header to position: fixed; top: 0; 2. Set the header height, which will be useful later. 3. In section 1, "City 1" and "City 2", I directly use ul and li layout and set li to display: inline-block. In order to achieve the split line (for example ), I set the padding and border-right of li, and set the border-right: none; of the last li. 4. The background image of the header can be solved by the CSS 3 background color gradient or image. I stole it and used it directly. Ii. leftBar Part 1. The options in leftBar are still laid out by ul and li. As for leftBar, I set float: left. 2. During the leftBar process, I encountered two problems: first, how to implement leftBar to scroll the content in rightBar, The leftBar remains fixed on the left side of the screen, the height must be extended to the bottom of the screen. Let's talk about how to solve this problem. At the beginning, we set the leftBar height to 100%, but we found it useless. At the boss's prompt, the height of the leftBar parent element, such as html and body, is set to 100%, and then the leftBar height is set to 100%, which solves the height problem. To achieve this, the leftBar remains fixed on the left side of the screen when the content is scroll in the rightBar. I set the leftBar position: fixed. Because the leftBar height is 100% of the screen height, the leftBar is too long, scroll bars appear in the vertical direction for no reason. To solve this problem, I set position: absolute; top: 0 for the entire section 2; then adjust the padding-top of leftBar and rightBar to the header height. (I also set float: left in section 2, so it can enclose leftBar & rightBar) but another problem occurs. Some leftBar is covered by the header. At this time, I have set the header to position: relative; z-index: 100; so that the header can be suspended on the leftBar. Question 2: How can I enable no edge on the right of the selected leftBar? At first, I set border-right for each option, but I found that this edge is always below. At the boss's prompt, I directly set the border-right of leftBar, and use margin-right:-1px for the selected item to block the edge, but I am using margin-left: 1px; I don't know why margin-right worked at the beginning, but it didn't work at the end (I hope someone can explain it, O (skip _ margin) O Thank you ). 3. The rightBar part is relatively simple. For convenience, I directly use the table for layout, which is neat. Similarly, the rightBar should also set padding-top as the header height, there should be no other problems. The JS Switching Module is relatively simple, so I will skip it. If you want to discuss the communication or source code, you can leave a message.