2020-09-15

最新推荐文章于 2020-11-22 10:46:32 发布
最新推荐文章于 2020-11-22 10:46:32 发布
阅读量84 收藏
点赞数
分类专栏： Learning
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/BlackMambaguo/article/details/108605078
版权

前端的布局练习----骰子

这里写目录标题

效果图一：

在这里插入图片描述
html代码：

<div class="box">
     <span class="item"></span>
     <span class="item1"></span>
     <span class="item2"></span>
     <span class="item3"></span>
</div>

css代码：

body {
    font-family: 'Open Sans', sans-serif;
    background: linear-gradient(top, #222, #333);
  }

.box{
    margin: 16px;
    padding: 4px;
    background-color: #e7e7e7;
    width: 90px;
    height: 90px;
    display: flex;
    justify-content:space-between;
    align-content:space-between;
    flex-wrap: wrap;
    /*W3school上的flex-wrap属性：row-reverse*/
    flex-direction:row-reverse;
    /*菜鸟教程上的flex-direction属性：row-reverse*/
}

.item{
    width: 25px;
    height: 25px;
    background-color: black;
    border-radius: 50%;

}

.item1{
    width: 25px;
    height: 25px;
    background-color: brown;
    border-radius: 50%;
}
.item2{
    width: 25px;
    height: 25px;
    background-color:coral;
    border-radius: 50%;
}
.item3{
    width: 25px;
    height: 25px;
    background-color:blueviolet;
    border-radius: 50%;
    align-self:flex-end;
}

效果二：

在这里插入图片描述
html代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="E:\Web前端\Learning\Try_Third.css">
    <title>Document</title>
 </head>
 <body>
<div class="box">
    <div class="a">
     <span class="item"></span>
     <span class="item1"></span>
    </div>
    <div class="b">
     <span class="item2"></span>
     <span class="item3"></span>
    </div>
</div>
 </body>
</html>

css代码块：

body {
    font-family: 'Open Sans', sans-serif;
    background: linear-gradient(top, #222, #333);
  }

.box{
    margin: 16px;
    padding: 4px;
    background-color: #e7e7e7;
    width: 90px;
    height: 90px;
    display: flex;
    justify-content:space-between;
    flex-wrap: wrap;
    align-content: space-between;

}
.a{
    display: flex;
    flex-basis:100%;
    justify-content:space-between;
}
.item{
    width: 25px;
    height: 25px;
    background-color: black;
    border-radius: 50%;

}

.item1{
    width: 25px;
    height: 25px;
    background-color: brown;
    border-radius: 50%;
}
.b{
    display: flex;
    flex-basis:100%;
    justify-content:space-between;
}
.item2{
    width: 25px;
    height: 25px;
    background-color: black;
    border-radius: 50%;

}

.item3{
    width: 25px;
    height: 25px;
    background-color: brown;
    border-radius: 50%;
}

效果三

在这里插入图片描述
代码可参考效果二。

效果四：

在这里插入图片描述
html代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="E:\Web前端\Learning\Try_Third.css">
    <title>Document</title>
 </head>
 <body>
<div class="box">
    <div class="a">
     <span class="item"></span>
     <span class="item1"></span>
     <span class="item2"></span>
    </div>
    <div class="b">
     <span class="item3"></span>
     <span class="item4"></span>
     <span class="item5"></span>
    </div>
</div>
 </body>
</html>

css代码：

body {
    font-family: 'Open Sans', sans-serif;
    background: linear-gradient(top, #222, #333);
  }

.box{
    margin: 16px;
    padding: 4px;
    background-color: #e7e7e7;
    width: 90px;
    height: 90px;
    display: flex;
    flex-direction:column;
    flex-wrap: wrap;
    align-content: space-between;

}
.a{
    display: flex;
    flex-basis:100%;
    flex-direction:column;
    justify-content:space-between;
}
.item{
    width: 25px;
    height: 25px;
    background-color: black;
    border-radius: 50%;

}

.item1{
    width: 25px;
    height: 25px;
    background-color: brown;
    border-radius: 50%;
}
.item2{
    width: 25px;
    height: 25px;
    background-color: black;
    border-radius: 50%;

}
.b{
    display: flex;
    flex-basis:100%;
    flex-direction:column;
    justify-content:space-between;
}
.item3{
    width: 25px;
    height: 25px;
    background-color: black;
    border-radius: 50%;

}
.item4{
    width: 25px;
    height: 25px;
    background-color: brown;
    border-radius: 50%;
}
.item5{
    width: 25px;
    height: 25px;
    background-color:black;
    border-radius: 50%;
}

效果五：在这里插入图片描述

html代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="E:\Web前端\Learning\Try_Third.css">
    <title>Document</title>
 </head>
 <body>
<div class="box">
    <div class="a">
     <span class="item"></span>
     <span class="item1"></span>
     <span class="item2"></span>
    </div>
    <div class="b">
     <span class="item3"></span>
    </div>
    <div class="c">
     <span class="item4"></span>
     <span class="item5"></span>
    </div>
</div>
 </body>
</html>

css代码：

body {
    font-family: 'Open Sans', sans-serif;
    background: linear-gradient(top, #222, #333);
  }

.box{
    margin: 16px;
    padding: 4px;
    background-color: #e7e7e7;
    width: 90px;
    height: 90px;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;

}
.a{
    display: flex;
    flex-basis:100%;
    justify-content:space-between;
}
.item{
    width: 25px;
    height: 25px;
    background-color: black;
    border-radius: 50%;

}

.item1{
    width: 25px;
    height: 25px;
    background-color: brown;
    border-radius: 50%;
}
.item2{
    width: 25px;
    height: 25px;
    background-color: black;
    border-radius: 50%;

}
.b{
    display: flex;
    flex-basis:100%;
    justify-content:center;
}
.item3{
    width: 25px;
    height: 25px;
    background-color: black;
    border-radius: 50%;

}
.c{
    flex-basis:100%;
    display: flex;
    justify-content:space-between;
}
.item4{
    width: 25px;
    height: 25px;
    background-color: brown;
    border-radius: 50%;
    align-self: center;
}
.item5{
    width: 25px;
    height: 25px;
    background-color:black;
    border-radius: 50%;
}

效果六：

html代码：

<div class="box">
     <span class="item"></span>
     <span class="item"></span>
     <span class="item"></span>
     <span class="item"></span>
     <span class="item"></span>
     <span class="item"></span>
     <span class="item"></span>
     <span class="item"></span>
     <span class="item"></span>
</div>

css代码：
body {
font-family: ‘Open Sans’, sans-serif;
background: linear-gradient(top, #222, #333);
}

.box{
margin: 16px;
padding: 4px;
background-color: #e7e7e7;
width: 90px;
height: 90px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: space-between;
}
.item{
width: 25px;
height: 25px;
background-color: black;
border-radius: 50%;
}

Ellie.
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
2020-10-09
baidu_41555315的博客
10-09 1942
HQL笔记内容： -- 一些设置 -- 以本地模式运行 /* 当一个job满足如下条件才能真正使用本地模式： 1.job的输入数据大小必须小于参数：hive.exec.mode.local.auto.inputbytes.max(默认128MB) 2.job的map数必须小于参数：hive.exec.mode.local.auto.tasks.max(默认4) 3.job的reduce数必须为0或者1 */ SET hive.exec.mode.local.auto=true; -- 查看内置函数
特种设备安全监管大数据平台建设方案2020-09-15.docx
12-21
特种设备安全监管大数据平台建设方案2020-09-15.docx
2020-06-09
zh1775825464的博客
06-09 706
应该或者说必须努力下去，这只是为了生存得有意义一点，现在也许可以出错，那就去试试看，至少去做过了一些事情，有一天发现自己真的应该去试试的时候，有可能又有其他原因会让你不再敢去了，或是自身的原因，或是家庭的原因，或是环境的原因，有些年纪是可以让人去碰壁的年纪，如果结果不美好，那你至少也是经历过的，不是吗？ ...
2020-05-09
zero_one666的博客
05-09 1473
1/The easiest thing in the world is persistence. The hardest thing is persistence. Keep in mind that persistence is victory. 2/The idea of breaking at a stroke is not a dream.
2020-07-09
arb1001的博客
07-09 679
Flink windowOperator源码解析 待完成
2020-03-14
东哥的博客
03-14 983
<% } %> 这个怎么改成随机
2020-06-03
zhao_shaoye的博客
06-03 1187
Laravel中表单csrf保护**{{csrf_field()}}**
2020-07-02
thinkoutresult的博客
07-02 998
标题java String类型复杂json串如果解析 1.根据json串解析相应的成相应的entity 2. Gson gson = new Gson（）； 3. gson.fromJson(String类型复杂的json串，根据json串解析的类entity.class ） 4. 注意解析成entity的类其他的类需要注明是public，如果要张一个entity里面去弄的话 ...
2020-05-31
GJJailang的博客
05-31 847
现在后端不做云计算，大数据，人工智能，底层程序员是不是只剩增删改查了。感觉自己混了两年混成运维了。
2020-04-10
m0_46591785的博客
04-10 2309
Super关键字 可以访问父类中定义的属性 可以调用父类中定义的成员方法 可以在子类构造器中调用父类构造器 .子类所有的构造器默认都访问父类中空参数的构造器 .子类一定会调用父类构造器（默认过程调用无参） //如果没有显示定义构造方法，Java编译阶段提供一个默认构造方法 //如果定义了自己的构造器，Java使用自己的构造器 //父类所有的构造器：子类必须实现它，子类默认当中一定使用到了父类的构造...
2020-06-07
lyyzxl的博客
06-07 2703
arcgis engine 实现栅格计算器，包括数学运算、逻辑运算、三角函数运算和代数运算。有大佬能帮一下吗？arcgis用10.2版本，环境用vs2015，代码加注释。求大佬。
Draft 2020-09-15 03:23:02-数据集
03-16
data_outlier.xlsx
阿里巴巴-SW（09988）深度跟踪报告：数字经济底座，智能世界大脑_2020-09-15_中信证券.pdf
09-01
阿里巴巴-SW（09988）深度跟踪报告：数字经济底座，智能世界大脑_2020-09-15_中信证券.pdf
Yohav-Rotsztein-15-09-2020
02-15
该项目是通过。 可用脚本 在项目目录中，可以运行： yarn start 在开发模式下运行应用程序。 打开在浏览器中查看。 如果进行编辑，页面将重新加载。 您还将在控制台中看到任何棉绒错误。... 在交互式监视模式下启动...
mysql5.7初始化命令 mysqld --initialize报错
BlackMambaguo的博客
11-22 4535
问题描述： mysql5.7初始化命令 mysqld --initialize报错 解决方案： 将my.ini中的路径反斜杠\换成斜杠/，即basedir=E:\Program Files\Mysql\mysql-5.7.27-winx64换成
SyntaxError: Invalid shorthand property initializer
BlackMambaguo的博客
10-26 1492
reduce 作为第一次调用 callback函数时的第一个参数的值。 如果没有提供初始值，则将使用数组中的第一个元素。 在没有初始值的空数组上调用 reduce 将报错。 var data = [{ id: 1, name: "办公管理", pid = 0, children: [{ id: 2, name: "请假申请", pid: 1,
css注意事项（一）
BlackMambaguo的博客
09-19 403
1、直接在style上写的内容优先级最高；同样的选择器，谁在后面谁的优先级就更高。 2、在其余情况相同时，选择器的优先级顺序如下： 继承的样式<浏览器模式的样式<标签样式<class样式<id样式<style属性样式。 3、可以在属性后面加上 !important ,可以将属性的优先级提升到最高。 4、越具体越复杂的选择器，其优先级越高。 ...
透视立方体
BlackMambaguo的博客
09-21 373
设置透视立方体需要用到的属性： 定位：把立方体的六个面定位在同一个位置。 opacity：设置透明度 transform的translate：移动 transform的rotate：旋转 transform-style：设置了透视点后用该属性保留3d效果 ...
结果是这样的，没有根据id排：start_date end_date 0 2020-01-15 2020-04-27 1 2020-09-30 2020-10-10 2 2021-02-07 2021-02-22 3 2021-03-06 2021-03-24 4 2020-01-21 2020-03-03 .. ... ... 639 2021-03-09 2021-03-18 640 2021-03-24 2021-04-01 641 2020-01-12 2020-04-19 642 2021-02-09 2021-02-18 643 2020-01-18 2020-03-09
最新发布
06-03
如果你想根据企业id对结果进行排序，可以在输出结果之前加上一行代码： ```python result = result.sort_values(by=['id']) ``` 此代码将会根据id对结果进行排序，使得每个企业的结果排在一起。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值