北京胡同 - 第2页 - 动画音画 - 花潮论坛

起个网名好难 发表于 2023-2-11 12:08

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

谢谢您的欣赏，中午好！

马黑黑 发表于 2023-2-11 12:16

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

{:4_181:}

深秋红枫 发表于 2023-2-11 17:19

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

起个网名好难 发表于 2023-2-11 18:45

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

谢谢您的欣赏，晚上好！

红影发表于 2023-2-11 21:53

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

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

内容也很好的呢{:4_187:}

小辣椒 发表于 2023-2-12 22:49

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

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

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

起个网名好难 发表于 2023-2-12 23:48

本帖最后由起个网名好难于 2023-2-12 23:56 编辑 <br /><br />小辣椒发表于 2023-2-12 22:49
刚才已经下了，再上来找你的，我想做个中间宽度800X500的，上面6个小图，旁边5个小图差不多的，结果自己 ...

<style>
#parentBlk {
width:1250px;;height:900px;
display: grid;place-items:center;
grid-template-rows:repeat(7, 1fr);
grid-template-columns:repeat(8, 1fr);
background-color:skyblue;
padding:8px;margin:100px 0 40px -280px;
position:relative;
}

.middleBlk {
width:800px; height:600px;
grid-area: 2 / 2 / span 5 / span 6 ;
display:grid;
place-items:center;
}

.roundBlk {
width:150px; height:120px;
border:thin brown dotted;
display:grid;
place-items:center;
}
</style>

<div id="parentBlk">
<div class="roundBlk"></div>
<div class="roundBlk">1</div>
<div class="roundBlk">2</div>
<div class="roundBlk">3</div>
<div class="roundBlk">4</div>
<div class="roundBlk">5</div>
<div class="roundBlk">6</div>
<div class="roundBlk"></div>
<div class="roundBlk">一</div>
<div class="roundBlk"></div>
<div class="roundBlk">二</div>
<div class="roundBlk"></div>
<div class="roundBlk">三</div>
<div class="roundBlk"></div>
<div class="roundBlk">四</div>
<div class="roundBlk"></div>
<div class="roundBlk">五</div>
<div class="roundBlk"></div>
<div class="roundBlk"></div>
<div class="roundBlk"></div>
<div class="roundBlk"></div>
<div class="roundBlk"></div>
<div class="roundBlk"></div>
<div class="roundBlk"></div>
<div class="roundBlk"></div>
<div class="roundBlk"></div>

<div class="middleBlk"></div>
</div>

起个网名好难 发表于 2023-2-12 23:50

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

<style>
#parentBlk {
width:1250px;;height:900px;
display: grid;place-items:center;
grid-template-rows:repeat(7, 1fr);
grid-template-columns:repeat(8, 1fr);
background-color:skyblue;
padding:8px;margin:100px 0 40px -280px;
position:relative;
}

.middleBlk {
width:800px; height:600px;
grid-area: 2 / 2 / span 5 / span 6 ;
display:grid;
place-items:center;
}

.roundBlk {
width:150px; height:120px;
border:thin brown dotted;
display:grid;
place-items:center;
}
</style>

<div id="parentBlk">
<div class="roundBlk"></div>
<div class="roundBlk">1</div>
<div class="roundBlk">2</div>
<div class="roundBlk">3</div>
<div class="roundBlk">4</div>
<div class="roundBlk">5</div>
<div class="roundBlk">6</div>
<div class="roundBlk"></div>
<div class="roundBlk">一</div>
<div class="roundBlk"></div>
<div class="roundBlk">二</div>
<div class="roundBlk"></div>
<div class="roundBlk">三</div>
<div class="roundBlk"></div>
<div class="roundBlk">四</div>
<div class="roundBlk"></div>
<div class="roundBlk">五</div>
<div class="roundBlk"></div>
<div class="roundBlk"></div>
<div class="roundBlk"></div>
<div class="roundBlk"></div>
<div class="roundBlk"></div>
<div class="roundBlk"></div>
<div class="roundBlk"></div>
<div class="roundBlk"></div>
<div class="roundBlk"></div>

<div class="middleBlk"></div>
</div>

起个网名好难 发表于 2023-2-13 10:18

本帖最后由起个网名好难于 2023-2-13 10:56 编辑 <br /><br />或
<style>
#parentBlk0 {
width:1250px;;height:900px;
display: grid;place-items:center;
grid-template-rows:repeat(5, 1fr);
grid-template-columns:repeat(6, 1fr);
background-color:skyblue;
padding:8px;
position:relative; margin:80px 0 40px -300px;
}

.middleBlk0 {
width:800px; height:500px;
grid-area: 2 / 2 / span 3 / span 4 ;
display:grid;
place-items:center;
}

.roundBlk0 {
width:200px; height:160px;
border:thin brown dotted;
display:grid;
place-items:center;
}
</style>

<div id="parentBlk0">
<div class="roundBlk0">1/一</div>
<div class="roundBlk0">2</div>
<div class="roundBlk0">3</div>
<div class="roundBlk0">4</div>
<div class="roundBlk0">5</div>
<div class="roundBlk0">6</div>
<div class="roundBlk0">二</div>
<div class="roundBlk0"></div>
<div class="roundBlk0">三</div>
<div class="roundBlk0"></div>
<div class="roundBlk0">四</div>
<div class="roundBlk0"></div>
<div class="roundBlk0">五</div>
<div class="roundBlk0"></div>
<div class="roundBlk0"></div>
<div class="roundBlk0"></div>
<div class="roundBlk0"></div>
<div class="roundBlk0"></div>

<div class="middleBlk0">中</div>
</div>

起个网名好难 发表于 2023-2-13 10:21

本帖最后由起个网名好难于 2023-2-13 10:57 编辑

#parentBlk0 {
width:1250px;;height:900px;
display: grid;place-items:center;
grid-template-rows:repeat(5, 1fr);
grid-template-columns:repeat(6, 1fr);
background-color:skyblue;
padding:8px;
position:relative; margin:80px 0 40px -300px;
}

.middleBlk0 {
width:800px; height:500px;
grid-area: 2 / 2 / span 3 / span 4 ;
display:grid;
place-items:center;
}

.roundBlk0 {
width:200px; height:160px;
border:thin brown dotted;
display:grid;
place-items:center;
}
</style>

<div id="parentBlk0">
<div class="roundBlk0">1/一</div>
<div class="roundBlk0">2</div>
<div class="roundBlk0">3</div>
<div class="roundBlk0">4</div>
<div class="roundBlk0">5</div>
<div class="roundBlk0">6</div>
<div class="roundBlk0">二</div>
<div class="roundBlk0"></div>
<div class="roundBlk0">三</div>
<div class="roundBlk0"></div>
<div class="roundBlk0">四</div>
<div class="roundBlk0"></div>
<div class="roundBlk0">五</div>
<div class="roundBlk0"></div>
<div class="roundBlk0"></div>
<div class="roundBlk0"></div>
<div class="roundBlk0"></div>
<div class="roundBlk0"></div>

<div class="middleBlk0">中</div>
</div>

小辣椒 发表于 2023-2-14 13:51

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

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

页: 1 [2]

花潮论坛's Archiver