Tag：css
-
Time：2021-3-8
effect: css: .s_type { border: none; border-radius: 5px; background-color: #f3f3f3; padding: 7px 0; color: #606266; margin: 5px 2.5% 5px 0; width: 30%; position: relative; } .selecd { background-color: #ebf3ff; color: #5999fc; } .select { background-color: #ebf3ff; color: #5999fc; } .select:before { content: ”; position: absolute; right: 0; bottom: 0; border: 9px solid #5999fc; border-top-color: transparent; […]
-
Time：2021-3-6
CSS matches to multiple classes The following HTML tags Li and class have the open style. My requirement is to change the background color to white only when open and active exist at the same time <li id=”menu_ 268098 “title =” account information query “class =” open “>” <li id=”menu_ 270008″ class=”nav_ SEC “title =” […]
-
Time：2021-3-5
What you’re going to create In this new tutorial, we will use CSS and JavaScript to create a responsive Management Dashboard layout. To build it, we’ll take some ideas from the WordPress dashboard, such as its collapsible sidebar menu. Throughout the tutorial, we will face many challenges, but these challenges will provide us with good […]
-
Time：2021-3-4
clip-path CSS properties use clipping to create the displayable area of an element. The part inside the area is displayed, and the part outside the area is hidden. example div { width: 200px; height: 200px; background: #6c00af; -webkit-clip-path: polygon( 28% 6%, 71% 15%, 100% 75%, 18% 39%, 63% 27%, 16% 22%, 65% 19% ); clip-path: […]
-
Time：2021-3-3
preface With the development of big front-end, UI frameworks emerge in endlessly, which makes our front-end development less demanding or less strict on CSS, at least less important than JS programming. However, we still need to master the basic CSS. Today, let’s summarize and write down the way of CSS layout. Two column layout Left […]
-
Time：2021-3-1
For the above navigation effect, the navigation is fixed at the top. You can slide left and right and click more options. This kind of production is quite simple. This paper just points out a few points Fixed position The menu is fixed at the top and can be used position:fixed; top:0; left:0; . At […]
-
Time：2021-2-26
Dynamic realization of simple two level menu When the mouse is placed on the first level label, the mouse will become the shape of a small hand to display the second level menu. The source code is as follows. You can copy it and use it directly <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <meta […]
-
Time：2021-2-25
Recommended articles: CSS pseudo class click the bottom right corner to appear a diagonal sign, indicating the selected sample code：https://www.jb51.net/css/731762.html effect Analysis: 1. Use pseudo element selector to add content.2. Using wide border to achieve the background effect of √3. Using transparent border to remove the redundant background color.4. The √ sign is located in […]
-
Time：2021-2-23
1、 Qualitative changes brought by CSS variables The improvement brought by CSS variables is not only to save CSS code, but also to reduce the cost of CSS development and maintenance. More importantly, the interaction development of components is transferred from the original JS to the CSS code, which makes the component code more concise […]
-
Time：2021-2-22
This paper mainly introduces the method of CSS layout of two buttons on the left and right sides of the same parent tag, which is shared with you as follows: design sketch Layout code <view class=”grace-footer” style=”width:100%;” slot=”gFooter”> <view style=”float:right;width:50%”> < button type = “primary” style = “line height: 85rpx; margin: 25rpx; @ Click =” […]
-
Time：2021-2-20
**CSS viewport units * * have appeared in the past few years, and as time goes on, more and more developers begin to use them. The advantage of them is that they provide us with a way to dynamically adjust the size without using J avascript. Moreover, if it fails, there are many alternatives. In […]
-
Time：2021-2-19
preface As we all know, “how can CSS center elements vertically?” It has become a commonplace problem. At present, there are many solutions to this problem. These solutions also have their own applicable scenarios, advantages and disadvantages, which are roughly as follows: Flex layout Grid layout Table layout Line height with height Position with margin […]
