北京胡同

起个网名好难

海笑 发表于 2023-2-11 10:37
欣赏老师佳作！

谢谢您的欣赏，中午好！

马黑黑

起个网名好难 发表于 2023-2-11 12:07
那是那是， 宇宙韩嘛

深秋红枫

欣赏老师佳作！学习、收藏了！

起个网名好难

深秋红枫 发表于 2023-2-11 17:19
欣赏老师佳作！学习、收藏了！

谢谢您的欣赏，晚上好！

红影

起个网名好难 发表于 2023-2-10 21:54
谢谢点评！

这帖只是练习一下网格布局。

内容也很好的呢

小辣椒

起个网名好难 发表于 2023-2-11 09:45
就是一无所事事的老头

上午好！

刚才已经下了，再上来找你的，我想做个中间宽度800X500的，上面6个小图，旁边5个小图差不多的，结果自己修改代码没有成功

聪明的老头子你高手帮我修改一个可以吗，反正就是中间要宽度大一点的，先谢谢了

起个网名好难

小辣椒 发表于 2023-2-12 22:49 刚才已经下了，再上来找你的，我想做个中间宽度800X500的，上面6个小图，旁边5个小图差不多的，结果自己 ...

1

2

3

4

5

6

一

二

三

四

五

起个网名好难

1. 
   
2. <style>
   
3. #parentBlk        {
   
4.         width:1250px;;height:900px;
   
5.         display: grid;place-items:center;
   
6.         grid-template-rows:repeat(7, 1fr);
   
7.         grid-template-columns:repeat(8, 1fr);
   
8.         background-color:skyblue;
   
9.         padding:8px;margin:100px 0 40px -280px;
   
10.         position:relative;
    
11. }
    
12. 
    
13. .middleBlk        {
    
14.         width:800px; height:600px;
    
15.         grid-area: 2 / 2 / span 5 / span 6 ;
    
16.         display:grid;
    
17.         place-items:center;
    
18. }
    
19. 
    
20. .roundBlk        {
    
21.         width:150px; height:120px;
    
22.         border:thin brown dotted;
    
23.         display:grid;
    
24.         place-items:center;
    
25. }
    
26. </style>
    
27. 
    
28. <div id="parentBlk">
    
29. <div class="roundBlk"></div>
    
30. <div class="roundBlk">1</div>
    
31. <div class="roundBlk">2</div>
    
32. <div class="roundBlk">3</div>
    
33. <div class="roundBlk">4</div>
    
34. <div class="roundBlk">5</div>
    
35. <div class="roundBlk">6</div>
    
36. <div class="roundBlk"></div>
    
37. <div class="roundBlk">一</div>
    
38. <div class="roundBlk"></div>
    
39. <div class="roundBlk">二</div>
    
40. <div class="roundBlk"></div>
    
41. <div class="roundBlk">三</div>
    
42. <div class="roundBlk"></div>
    
43. <div class="roundBlk">四</div>
    
44. <div class="roundBlk"></div>
    
45. <div class="roundBlk">五</div>
    
46. <div class="roundBlk"></div>
    
47. <div class="roundBlk"></div>
    
48. <div class="roundBlk"></div>
    
49. <div class="roundBlk"></div>
    
50. <div class="roundBlk"></div>
    
51. <div class="roundBlk"></div>
    
52. <div class="roundBlk"></div>
    
53. <div class="roundBlk"></div>
    
54. <div class="roundBlk"></div>
    
55. 
    
56. <div class="middleBlk"></div>
    
57. </div>
    
58. 
    

复制代码

起个网名好难

或

1/一

2

3

4

5

6

二

三

四

五

中

起个网名好难

1. 
   
2. #parentBlk0        {
   
3.         width:1250px;;height:900px;
   
4.         display: grid;place-items:center;
   
5.         grid-template-rows:repeat(5, 1fr);
   
6.         grid-template-columns:repeat(6, 1fr);
   
7.         background-color:skyblue;
   
8.         padding:8px;
   
9.         position:relative; margin:80px 0 40px -300px;
   
10. }
    
11. 
    
12. .middleBlk0        {
    
13.         width:800px; height:500px;
    
14.         grid-area: 2 / 2 / span 3 / span 4 ;
    
15.         display:grid;
    
16.         place-items:center;
    
17. }
    
18. 
    
19. .roundBlk0        {
    
20.         width:200px; height:160px;
    
21.         border:thin brown dotted;
    
22.         display:grid;
    
23.         place-items:center;
    
24. }
    
25. </style>
    
26. 
    
27. <div id="parentBlk0">
    
28. <div class="roundBlk0">1/一</div>
    
29. <div class="roundBlk0">2</div>
    
30. <div class="roundBlk0">3</div>
    
31. <div class="roundBlk0">4</div>
    
32. <div class="roundBlk0">5</div>
    
33. <div class="roundBlk0">6</div>
    
34. <div class="roundBlk0">二</div>
    
35. <div class="roundBlk0"></div>
    
36. <div class="roundBlk0">三</div>
    
37. <div class="roundBlk0"></div>
    
38. <div class="roundBlk0">四</div>
    
39. <div class="roundBlk0"></div>
    
40. <div class="roundBlk0">五</div>
    
41. <div class="roundBlk0"></div>
    
42. <div class="roundBlk0"></div>
    
43. <div class="roundBlk0"></div>
    
44. <div class="roundBlk0"></div>
    
45. <div class="roundBlk0"></div>
    
46. 
    
47. <div class="middleBlk0">中</div>
    
48. </div>
    

复制代码

小辣椒

起个网名好难 发表于 2023-2-12 23:48
本帖最后由 起个网名好难 于 2023-2-12 23:56 编辑

谢谢~~~回复来迟，最近2天晚上做帖迟了一点，结果早上起不来了，阳过后一直感觉容累复。白天单位不能玩电脑，手机回帖太累了，这个代码晚上我试一下，但也是心里在琢磨，我的都是动图，而且是频谱的，文件大，不晓得会不会打不开。