网格布局入门学习

马黑黑

第十二讲是一个 div+span模拟表格 的应用实例，另外开帖

马黑黑

马黑黑

82#代码：

1. <style>
   
2. #mama {
   
3.         margin: 50px auto 0;
   
4.         position: relative;
   
5.         width: 400px;
   
6.         height: 400px;
   
7.         display: grid;
   
8.         grid-template-rows: repeat(8,8fr);
   
9.         grid-template-columns: repeat(8,8fr);
   
10.         border-radius: 50%;
    
11.         overflow: hidden;
    
12. }
    
13. #mama > span {
    
14.         width: 40px;
    
15.         height: 40px;
    
16.         border-radius: 0 100%;
    
17.         opacity: .75;
    
18. }
    
19. </style>
    
20. 
    
21. <div id="mama"></div>
    
22. 
    
23. <script>
    
24. for(j=0; j<64; j++) {
    
25.         let span = document.createElement('span');
    
26.         let size = Math.random()*30 + 20;
    
27.         span.style.cssText = `
    
28.                 width: ${size}px;
    
29.                 height: ${size}px;
    
30.                 background: linear-gradient(135deg, #${Math.random().toString(16).substr(-6)}, #${Math.random().toString(16).substr(-6)});
    
31.                 transform: rotate(${Math.random()*180}deg);
    
32.         `;
    
33.         mama.appendChild(span);
    
34. }
    
35. </script>

复制代码

马黑黑

82# 是网格布局简单应用实例：

父元素 mama 定义了自身尺寸和 8*8 的网格布局；CSS里还设定了 mama 第一代子元素的基础样式。

在JS，生成 8*8=64 个子元素，这些子元素：

① 随机定义了尺寸

let size = Math.random()*30 + 20;

Math.random()*30 会得到 0 - 30 的随机数，再加上 20，则子元素的宽高在 20 - 50 之间随机获取（宽高是一样的值）。

② 定义所生成子元素的额外样式

        span.style.cssText = `
                width: ${size}px;
                height: ${size}px;
                background: linear-gradient(135deg, #${Math.random().toString(16).substr(-6)}, #${Math.random().toString(16).substr(-6)});
                transform: rotate(${Math.random()*180}deg);
        `;


span 是前面定义的变量，指向要添加的 span 标签。这里，用符号 `` 将CSS样式一一定义，和写 CSS 代码基本一样，不同的地方是JS变量的表示方法，用如下方式——

width: ${size}px;

红色部分，就是JS在 `` 符号里表示变量和（或）算式的方式。

此处，定义了宽度高度、背景颜色、旋转，都是随机的。