利用Flex弹性布局实现与现实骰子五点

本文作者李国林分享如何使用Flex弹性布局设计出别具一格的网页布局,以骰子为例,通过DW开发工具和特定的CSS代码展示了如何实现骰子的五个点布局。内容适合初学者,旨在提供一种不同于传统布局的方法。
摘要由CSDN通过智能技术生成

作者:李国林
可能对于很多初学者在学习网页的布局上常常想要搞出一些与其他人不一样的布局,但有的时候,总是做不出自己的风格,就像梦想很美好,现实很残酷那样,所以今天,我发的这个是与以前的传统布局相比,flex布局可能对您有点好处,当然有一些人用惯了传统的布局方式,那也看你的喜欢。PS:之所以用这个标题是因为我用了以下的flex弹性布局做了个骰子。
开发工具:DW
代码:源代码:

CSS:.row5{ flex-direction: column; justify-content: space-between; } .row5 div{/*.row5 div:后面两个点的代码。*/ justify-content: space-between;

}

.row5 div:nth-child(2){/.row5 div:nth-child(2){}:第五个中间点的代码。/
align-self: center;
}
图一:
在这里插入图片描述
图二:
在这里插入图片描述

图三:
在这里插入图片描述
小小的分享希望对初学者带来帮助,不喜欢勿喷;因为我也才学不久,只能搞一些小玩意,入不了你的法眼,请看那些大神的作品。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值