In addition to simple treatments such as layout, text, and links in Changchun web design, you can learn about a few key points of creating sliding doors with CSS. In fact, before studying the CSS sliding door technique, I realized that I had already created many similar menu effects. The most representative one was the search box on the Sogou URL navigation page, which was later widely applied in Sogou's search engine. I hope this can help everyone in learning CSS, and combining JavaScript and CSS can create even more dazzling effects.
1. Background: From my understanding, CSS sliding doors were inspired by challenges. Many people think that CSS cannot create beautiful websites, but in fact, the opposite is true. CSS can not only create very attractive web pages, but also effectively separate content from presentation, giving designers and developers more space to be creative.
2. Definition: Sliding Door Technique: When a navigation button on the page is clicked, its CSS properties change, distinguishing it from other navigation buttons in the group. This indicates to the user that the content currently being viewed corresponds to the target indicated by the button whose CSS properties have changed. One major advantage of this effect is that on pages with multiple navigations, it clearly reflects which section or category the current browsing content belongs to, while providing an aesthetically pleasing, clear, and intuitive visual experience. The main character in the sliding door technique is the object being operated on, i.e., the clicked object. Its CSS properties mainly refer to changes in the attributes of the navigation button and other elements within it. Of course, the form of the button can be BUTTON, A, TD, or even P or DIV, which are closed elements. Their attributes mainly refer to the element's border, background, font color, size, thickness, as well as margins and padding, etc. In short, all attributes that can distinguish its "status" from other objects can be used in the sliding door technique.
3. Application Scope: Website navigation menus
4. Technical Points:
1) Use unordered lists (ul) and list items (li) to compose the menu structure;
2) Set the background for li (if there are rounded corners, set them as right-aligned or left-aligned, with the background image exceeding the length of the submenu);
3) Set the display property of the a inside li to block and add background attributes to a (if there are rounded corners, set them as right-aligned or left-aligned, with the background image being just the width of one rounded corner);
4) Set the properties of the current menu's a (add n pixels to padding-bottom to cover the entire bottom edge of the menu; n depends on the specific effect);
5) Use JavaScript to control the effect after a mouse click (first reset all button backgrounds in a loop, then change the style of the current button).
More techniques in Changchun web design need to be summarized during the design process. With enough practice, you will naturally become proficient.