Introduction to 1:

Jiugong appeared in the payment link with wechat

9 elements, each cell has a number, and each cell has a different background color.

Implementation steps:

1. Nine grid arrangement: Using display: Flex elastic layout, divide into three rows, each row contains three child elements to achieve nine grid. But using display: Grid, we can quickly implement nine grids.

Create nine boxes in the body

<div class="containter">      
    ...   
<div class="box">9</div>    
</div>
Copy the code

Using grid to lay out the grid, like display: Flex must be set on the parent element,

.containter {           
    height: 100vh;             
    display: grid;            
    justify-content: center;             
    align-content: center;         
    grid-template-columns: 100px 100px 100px;             
    grid-template-rows: 100px 100px 100px;       
 }  
Copy the code

Use the align – the content: Center this is the same as setting the function of align-items:center in display: Flex. Since elastic layout is difficult to solve in modern mobile terminal and even in the future Internet of Things, it is difficult to solve or solve the problem. Nine grid has more parent elements for each line, so the two-dimensional layout scheme of grid comes. Then a copy of Flex comes in align-content: Center, which is better for layout.

grid-template-columns: 100px 100px 100px; Three 100px means three columns, and 100px sets the width of the column

grid-template-rows: 100px 100px 100px; Three 100px means three columns, and 100px sets the height of the row

Color the nine boxes: _ Does each box have a different background color?

The first possible CSS scheme is:

.box:nth-child(n) {       
     background-color: pink;        
}      
Copy the code

The: nth-Child (n) selector matches the NTH child of its parent, regardless of the element’s type. N can be a number, keyword, or formula.

When n is odd, the even number box has pink as its background color

If n is even, the odd-th box has pink as its background color

When n is a number, the background color of the NTH box is pink

The nine boxes of the nine grid are not the same, then use numbers

The second is the JS scheme:

<script>       
 const boxes = document.querySelectorAll('.box');       
 let i = 1;        
for (let box of boxes) 
{            
    i++;            
    box.style.backgroundColor = `rgba(${i * 20}, ${i * 10}, ${i * 5})`       
 }    
</script>
Copy the code

Boxes are Nodelist with the id.box. Object. The style. The backgroundColor = “# 00 ff00” to describe color value for the background color of the color name (for example, red), in which I can achieve nine grid color is different.

The third option is to use the styl scheme:

This guy’s stylus is a CSS preprocessor framework. CSS preprocessing, as the name implies, preprocesses CSS. How to preprocess stylus? Stylus adds programmable features to CSS. That is, you can write a style file in Stylus using variables, functions, judgments, and loops that CSS does not have. After performing this set of operations, the file is compiled into a CSS file.

.box color white display flex align-items center justify-content center for n in (1.. 9) &:nth-child({n}) background-color rgba(n*20, n*5, n*9, n*0.1)Copy the code

For stylus, visit juejin.cn/post/684490…

for n in (1.. 9) Stylus supports if statement for loop statements and functions, and stylus turns our CSS into a programming language.

Introduce 2:

Page requirements: When the scroll bar falls enough, the Accept button slides out from the left

<div class="wrapper">        
<div class="terms-and-conditions">          
     <p></p>            
    <p></p>            
    <strong class="watch">watch for me</strong>            
    <p></p>            
    <p></p>            
    <p></p>        
    </div>        
<button class="accept" disabled >Accept</button>    </div>
Copy the code

Put the article

body { display: grid; justify-content: center; align-content: center; } .wrapper { display: grid; grid-template-rows: 1fr auto; } button {transition: a11 0.2s; Opacity: 0.1;} button[disabled] {opacity: 0.1; The transform: translateX (200%) scale (0.5); }Copy the code

1. The CSS code above is only the most important code, the other height, line height is not shown

2.grid-template-rows: 1fr auto; Flex 1 sets an element that can be called the primary element. The other elements take what’s right, and everything else goes.

3. The transform: translateX (200%) scale (0.5) :

The transform property allows you to rotate, scale, move, tilt, translateX(-200%), i.e., move the element 200% to the left on the X-axis, and reduce scale(0.5) by 2

<script> const terms = document.querySelector('.terms-and-conditions'); const watch = document.querySelector('.watch'); const button = document.querySelector('.accept'); Function obCallback(payload) {// Instantiate an oberver if(payload[0].IntersectionRatio >0.5){button.disabled = false; // Start the element, Const ob = new IntersectionObserver(obCallback, obCallback) const ob = new IntersectionObserver(obCallback, obCallback) {root: terms, threshold: 0.75}); ob.observe(terms.lastElementChild) </script>Copy the code

 

Payload [0]. IntersectionRatio intersectionRatio: 0 The ratio of intersectionRatio is 0, so it is not visible

When the scrollbar reaches 75% to enter the window, the callback function obCallback() is triggered.

3.IntersectionObserver gives us the ability to monitor whether an element in a window is monitored by the Observer

Root :terms: specifies the terms of the listening root

Ob.observe (terms.lastelementChild) add the last element to terms namely