弹性布局（骰子六个面制作）

效果图

html页面

<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>筛子</title><link rel="stylesheet" type="text/css" href="css/Index.css" /></head><body><!--筛子面一--><section class="s1 sbg"><div class=""></div></section><!--筛子面二--><section class="s2 sbg"><div class=""></div><div class=""></div></section><!--筛子面三--><section class="s3 sbg"><div class=""></div><div class=""></div><div class=""></div></section><!--筛子面四--><section class="s4 sbg"><section id="s4-l"><div class=""></div><div class=""></div></section><section id="s4-l"><div class=""></div><div class=""></div></section></section><!--筛子面五--><section class="s5 sbg"><section id="s5-l"><div class=""></div><div class=""></div></section><section id="s5-c"><div class=""></div></section><section id="s5-r"><div class=""></div><div class=""></div></section></section><!--筛子面六--><section class="s6 sbg"><section id="s6-l"><div class=""></div><div class=""></div><div class=""></div></section><section id="s6-l"><div class=""></div><div class=""></div><div class=""></div></section></section></body></html>

页面CSS样式

.sbg {border: 3px solid yellow;width: 300px;height: 300px;background-color: #eee;border-radius: 50px;box-sizing: border-box;padding: 20px;float: left;margin-left: 5rem;margin-top: 5rem;
}.sbg>div {background-color: #000;border-radius: 50%;box-sizing: border-box;
}.s1 {display: flex;justify-content: center;align-items: center;
}.s1>div {width: 100px;height: 100px;background-color: red;
}.s2 {display: flex;justify-content: space-between;
}.s2>div {width: 80px;height: 80px;
}.s2>div:first-child {align-self: flex-start;
}.s2>div:last-child {align-self: flex-end;
}.s3 {display: flex;
}.s3>div {width: 80px;height: 80px;
}.s3>div:nth-child(1) {justify-content: space-between;align-self: flex-start;
}.s3>div:nth-child(2) {justify-content: center;align-self: center;
}.s3>div:nth-child(3) {justify-content: center;align-self: flex-end;
}.s4 {display: flex;justify-content: space-between;
}.s4>#s4-l>div {width: 80px;height: 80px;background-color: #000;border-radius: 50%;
}.s4>#s4-l {display: flex;flex-direction: column;justify-content: space-between;
}.s5 {display: flex;justify-content: space-between;
}.s5 div {width: 80px;height: 80px;background-color: #000;border-radius: 50%;
}#s5-c {display: flex;align-items: center;
}#s5-c>div {background-color: red;
}#s5-l {display: flex;flex-direction: column;justify-content: space-between;
}#s5-r {display: flex;flex-direction: column;justify-content: space-between;
}.s6 {display: flex;justify-content: space-between;
}.s6 div {width: 80px;height: 80px;background-color: #000;border-radius: 50%;
}#s6-l {display: flex;flex-direction: column;justify-content: space-between;
}

弹性布局（骰子六个面制作）相关推荐

网页HTML5制作flex布局骰子,css3 flex布局结合transform生成一个3D骰子
1 Flex 布局首先聊聊Flex 布局,Flex 布局又称"弹性布局",任何容器都可以指定为Flex布局,设置Flex布局会使得子元素的float.clear.vertical ...
微信小程序开发（三)——IE盒子，Flex弹性布局，色子六面
目录 ie盒子模型 Flex弹性布局三大特性: 块元素和内联元素的转换 background-image背景图片尺寸单位rpx 定位练习:色子的六面 ie盒子模型盒子模型是css中一个重要的概 ...
弹性布局案例实操(京东网页制作的草稿)
CSS3的弹性布局_星辰镜的博客-CSDN博客上面的文章弹性布局的详细介绍: Css3的页面布局之定位_星辰镜的博客-CSDN博客上面的文章是定位的介绍 Day02 了解Html+CSS的学习内容 ...
弹性盒布局——骰子布局
弹性盒布局-骰子布局个人认为正常的骰子应该是这样的排布的,不是太复杂,一点应该就是在正中间,不会随便挪动的吧(菜鸡发言hh) 总代码:(每个骰子分别弹性盒布局就好) <!DOCTYPE htm ...
“约见”面试官系列之常见面试题第六篇说说弹性布局（建议收藏）
目录一.基本概念二.容器属性 2.1 flex-direction: 2.2 flex-wrap: 2.3 justify-content: 2.4 align-items: 2.5 ...
flex布局实现骰子六面的示例
显示效果: 下面是示例代码: <html><head><title>flex布局-骰子</title><style>body {backgr ...
网页HTML5制作flex布局骰子,flex布局实现骰子
学习flex布局后的实例布局--骰子具体实现原理可参考阮一峰的Flex 布局教程:实例篇和博客flex布局实现色子效果图: 骰子.png 代码如下: flex布局实例--骰子 *{ margin: ...
弹性布局(Flex布局)
弹性布局(Flex布局) 文章目录弹性布局(Flex布局) 绪论 Flex布局是什么? Flex布局的基本概念 Flex容器的属性以下六个属性设置在Flex容器上 flex-direction属性 ...
CSS中的EM属性-弹性布局
使用CSS也好久了,但一直都是在使用"px"来设置Web元素的相关属性,未敢使用"em".主要原因是,对其并不什么了解,只知道一点概念性的东西,前段时间在项目 ...

弹性布局（骰子六个面制作）

效果图

html页面

页面CSS样式

弹性布局（骰子六个面制作）相关推荐

最新文章

热门文章