Using CSS to realize the effect of JS implementation

This article mainly introduces how to use CSS3 code better to achieve the effect of JS, Clac Counters tooltip and other functions make the code more concise and clear, very interesting, the need for friends can refer to, hope to help everyone.

1. Pure CSS Tooltip

Many websites still use JavaScript to create a ToolTip effect, but it's actually easier to implement with CSS. The simplest way is to add a property with hint text in your HTML code, such as data-tooltip= "...". You can then add the following code to your CSS file by using the attr () function to display the hint text

2. CSS3 Counters

Counters this is not a very well-known attribute, and most people may even think that the browser does not support this property, but in fact all browsers support this property:

Insert a piece of code here

　　<input type="checkbox" /><lable>里面是内容</label>

What we need here is a check function similar to input AH upload ah and so on. But we don't like their style, they need to write their own style.

At this point we can use Position:absolute; Left: -9999px; leave the document flow so that it does not occupy space and does not show up on the label to write the effect and style you want.

3. Create a better grid with CLAC ()

Using Flex layouts

Temporarily pending

4. By CLAC () to its position:fixed element

Another function of Calc () is to use the elements of its position:fixed such as you have a content wrapper. There is a flow of space between the left and right you want to precisely position:fixed the elements within this content wrapper. However, it is difficult to calculate the specific assignment of the left and right properties in this case. The Calc () allows precise positioning.

. wrapper{max-width:1000px;　　margin:0 Auto;　　}. float-bubble{positon:fixed; Right:calc (50% -500px); }

Clac (): calc () literally we can interpret him as a function. In fact, Calc is the abbreviation for the English word Calculate (calculation), is a new function of CSS3, which is used to specify the length of the element. For example, you can use Calc () to set dynamic values for attributes such as border, margin, pading, font-size, and width for an element. Why is it a dynamic value? Because we use the expression to get the value. The biggest benefit of Calc (), however, is that the width of the element can be calculated from Calc () using the fluid layout.