麻将点数布局（flex布局应用（存在不足，欢迎大神指正））

其他 2018-09-08 18:51:02 阅读次数: 0

一点

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
       .box {
        border-radius: 10%;
        width: 110px;
        height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #FFFFFF;
  border: 2px solid #008000;
   box-shadow: 3px 3px 1px 4px   #2F4F4F; 
}
.zz{
     width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: #FFFFFF;
        border: 10px solid  #00FF00;
        display: flex;
  justify-content: center;
  align-items: center;
}
.zzz{
     width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: #FFFFFF;
        border: 10px solid  #00FF00;
         display: flex;
  justify-content: center;
  align-items: center;
}
.zzzz{
     width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #00FF00;
}
    </style>

</head>
<body>
<div class="box">
    <div class="zz">
       <div class="zzz">
        <div class="zzzz"></div>
    </div>
    </div> 
</div>
</body>
</html>

二点

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
       .box {
        border-radius: 10%;
        width: 110px;
        height: 150px;
 display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  background-color: #FFFFFF;
  border: 2px solid #008000;
   box-shadow: 3px 3px 1px 4px   #2F4F4F; 
}
.zz{
     width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: #FFFFFF;
        border: 10px solid  #00FF00;
        display: flex;
  justify-content: center;
  align-items: center;
}
.zt{
     width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: #FFFFFF;
        border: 10px solid  #00FF00;
        display: flex;
  justify-content: center;
  align-items: center;
}
.zzz{
     width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: #FFFFFF;
        border: 10px solid  #00FF00;
         display: flex;
  justify-content: center;
  align-items: center;
}
.zzzz{
     width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #00FF00;
}
    </style>

</head>
<body>
<div class="box">
    <div class="zz">
       <div class="zzz"><div class="zzzz"></div></div>
    </div>
    <div class="zt">
       <div class="zzz"><div class="zzzz"></div></div>
    </div>
    </div> 
</div>
</body>
</html>

三点

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
       .box {
        border-radius: 10%;
        width: 110px;
        height: 150px;
   display: flex;
   background-color: #FFFFFF;
  border: 2px solid #008000;
   box-shadow: 3px 3px 1px 4px   #2F4F4F; 
}
.zz{
     width: 25px;
        height: 25px;
        border-radius: 50%;
        background-color: #FFFFFF;
        border: 6px solid #00FF00;
        display: flex;
  justify-content: center;
  align-items: center;
}
.zt{
     width: 25px;
        height: 25px;
        border-radius: 50%;
        background-color: #FFFFFF;
        border: 6px solid #00FF00;
        align-self: center;
        display: flex;
  justify-content: center;
  align-items: center;
}
.zy{
     width: 25px;
        height: 25px;
        border-radius: 50%;
        background-color: #FFFFFF;
        border: 6px solid #00FF00;
        align-self: flex-end;
        display: flex;
  justify-content: center;
  align-items: center;
}
.zzz{
     width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #FFFFFF;
        border: 5px solid #87CEFA;
         display: flex;
  justify-content: center;
  align-items: center;
}
.zzzz{
     width: 5px;
        height: 5px;
        border-radius: 50%;
        background-color:#87CEFA;
}
    </style>

</head>
<body>
<div class="box">
    <div class="zz">
       <div class="zzz"><div class="zzzz"></div></div>
    </div> 
    <div class="zt">
       <div class="zzz"><div class="zzzz"></div></div>
    </div> 
    <div class="zy">
       <div class="zzz"><div class="zzzz"></div></div>
    </div> 
</div>
</body>
</html>

四点

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
       .box {
        border-radius: 10%;
        width: 110px;
        height: 150px;
  background-color: #FFFFFF;
  border: 2px solid #008000;
   box-shadow: 3px 3px 1px 4px   #2F4F4F; 
   display: flex;
  flex-wrap: wrap;
  align-content: space-around;
}
.z{
 flex-basis: 100%;
  display: flex;
  justify-content: space-between;
}
.zz{
     width: 25px;
        height: 25px;
        border-radius: 50%;
        background-color: #FFFFFF;
        border: 6px solid  #00FF00;
        display: flex;
  justify-content: center;
  align-items: center;
}
.zzz{
     width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #FFFFFF;
        border: 5px solid  #00FF00;
         display: flex;
  justify-content: center;
  align-items: center;
}
.zzzz{
     width: 5px;
        height: 5px;
        border-radius: 50%;
        background-color: #00FF00;
}
    </style>

</head>
<body>
<div class="box">
  <div class="z">
    <div class="zz">
       <div class="zzz"><div class="zzzz"></div></div>
    </div> 
    <div class="zz">
       <div class="zzz"><div class="zzzz"></div></div>
    </div> 
    </div>
    <div class="z">
    <div class="zz">
       <div class="zzz"><div class="zzzz"></div></div>
    </div> 
    <div class="zz">
       <div class="zzz"><div class="zzzz"></div></div>
    </div> 
</div>
</body>
</html>

五点

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <style type="text/css">
        .box {
            flex-wrap: wrap;
            flex-direction: column;        
            border-radius: 10%;
        width: 110px;
        height: 150px;
  background-color: #FFFFFF;
  border: 2px solid #008000;
   box-shadow: 3px 3px 1px 4px   #2F4F4F; 
   display: flex;
  /* display: flex;
  flex-wrap: wrap;
  align-content: space-around;*/
}
#div1{
    width: 110px;
        height: 60px;
    display: flex;
    justify-content: space-around;
}
#div2{
    width: 110px;
        height: 30px;
    display: flex;
    justify-content: center;
}
#div3{
    width: 110px;
        height: 60px;
    display: flex;
    justify-content:space-around;
    transform:rotateZ(180deg); 
}
.zz{
     width: 25px;
        height: 25px;
        border-radius: 50%;
        background-color: #FFFFFF;
        border: 6px solid  #00FF00;
        display: flex;
  justify-content: center;
  align-items: center;
}
.zzz{
     width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #FFFFFF;
        border: 5px solid  #00FF00;
         display: flex;
  justify-content: center;
  align-items: center;
}
.zzzz{
     width: 5px;
        height: 5px;
        border-radius: 50%;
        background-color: #00FF00;
}
#zz1{
    border: 5px solid  #000000;
}


    </style>
</head>
<body>
<div class="box">
<div id="div1"><div class="zz">
       <div class="zzz"><div class="zzzz"></div></div>
    </div><div class="zz">
       <div class="zzz"><div class="zzzz"></div></div>
    </div></div>
<div id="div2"><div class="zz">
       <div class="zzz"><div class="zzzz"></div></div>
    </div></div>
<div id="div3"><div class="zz">
       <div class="zzz"><div class="zzzz"></div></div>
    </div><div class="zz">
       <div class="zzz"><div class="zzzz"></div></div>
    </div></div>
</div>
</body>
</html>

六点

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
       .box {
        width: 110px;
        height: 150px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #FFFFFF;
  border: 2px solid #87CEFA;
  flex-wrap: wrap;
}
.zz{
     width: 25px;
        height: 25px;
        border-radius: 50%;
        background-color: #FFFFFF;
        border: 6px solid  #00FF00;
        display: flex;
  justify-content: center;
  align-items: center;
}
.zzz{
     width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #FFFFFF;
        border: 5px solid  #00FF00;
         display: flex;
  justify-content: center;
  align-items: center;
}
.zzzz{
     width: 5px;
        height: 5px;
        border-radius: 50%;
        background-color: #00FF00;
}
    </style>

</head>
<body>
<div class="box">
    <div class="zz">
       <div class="zzz">
        <div class="zzzz"></div>
    </div>
    </div> 
    <div class="zz">
       <div class="zzz">
        <div class="zzzz"></div>
    </div>
    </div> 
    <div class="zz">
       <div class="zzz">
        <div class="zzzz"></div>
    </div>
    </div> 
    <div class="zz">
       <div class="zzz">
        <div class="zzzz"></div>
    </div>
    </div> 
    <div class="zz">
       <div class="zzz">
        <div class="zzzz"></div>
    </div>
    </div> 
    <div class="zz">
       <div class="zzz">
        <div class="zzzz"></div>
    </div>
    </div> 

</div>
</body>
</html>

七点

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
    .box {
        width: 110px;
        height: 150px;
/*  display: flex;
  justify-content: space-around;
  align-items: center;*/
  background-color: #FFFFFF;
  border: 2px solid #87CEFA;
  flex-wrap: wrap;
}
#div1{
  width: 110px;
        height: 75px;
        display: flex;
}
#div2{
  width: 110px;
        height: 75px;
        display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.zz{
     width: 25px;
        height: 25px;
        border-radius: 50%;
        background-color: #FFFFFF;
        border: 6px solid  #00FF00;
        display: flex;
  justify-content: center;
  align-items: center;
}
.zzz{
     width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #FFFFFF;
        border: 5px solid  #00FF00;
         display: flex;
  justify-content: center;
  align-items: center;
}
.zzzz{
     width: 5px;
        height: 5px;
        border-radius: 50%;
        background-color: #00FF00;
}
#d1{
align-self: center;
}
#d2{
align-self: flex-end;
}

  </style>

</head>
<body>
<div class="box">
  <div id="div1">
    <div class="zz">
       <div class="zzz">
        <div class="zzzz"></div>
    </div>
    </div> 
    <div class="zz" id="d1">
       <div class="zzz">
        <div class="zzzz"></div>
    </div>
    </div> 
    <div class="zz" id="d2">
       <div class="zzz">
        <div class="zzzz"></div>
    </div>
    </div> 
  </div>
  <div id="div2">
    <div class="zz">
       <div class="zzz">
        <div class="zzzz"></div>
    </div>
    </div> 
    <div class="zz">
       <div class="zzz">
        <div class="zzzz"></div>
    </div>
    </div> 
    <div class="zz">
       <div class="zzz">
        <div class="zzzz"></div>
    </div>
    </div> 
    <div class="zz">
       <div class="zzz">
        <div class="zzzz"></div>
    </div>
    </div> 
  </div>
</div>
</body>
</html>

八点

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
       .box {
        width: 110px;
        height: 150px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #FFFFFF;
  border: 2px solid #87CEFA;
  flex-wrap: wrap;
}
.zz{
     width: 25px;
        height: 25px;
        border-radius: 50%;
        background-color: #FFFFFF;
        border: 6px solid  #00FF00;
        display: flex;
  justify-content: center;
  align-items: center;
}
.zzz{
     width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #FFFFFF;
        border: 5px solid  #00FF00;
         display: flex;
  justify-content: center;
  align-items: center;
}
.zzzz{
     width: 5px;
        height: 5px;
        border-radius: 50%;
        background-color: #00FF00;
}
    </style>

</head>
<body>
<div class="box">
    <div class="zz">
       <div class="zzz">
        <div class="zzzz"></div>
    </div>
    </div> 
    <div class="zz">
       <div class="zzz">
        <div class="zzzz"></div>
    </div>
    </div> 
    <div class="zz">
       <div class="zzz">
        <div class="zzzz"></div>
    </div>
    </div> 
    <div class="zz">
       <div class="zzz">
        <div class="zzzz"></div>
    </div>
    </div> 
    <div class="zz">
       <div class="zzz">
        <div class="zzzz"></div>
    </div>
    </div> 
    <div class="zz">
       <div class="zzz">
        <div class="zzzz"></div>
    </div>
    </div> 
    <div class="zz">
       <div class="zzz">
        <div class="zzzz"></div>
    </div>
    </div> 
    <div class="zz">
       <div class="zzz">
        <div class="zzzz"></div>
    </div>
    </div> 
</div>
</body>
</html>

九点

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
       .box {
        width: 110px;
        height: 150px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #FFFFFF;
  border: 2px solid #87CEFA;
  flex-wrap: wrap;
}
.zz{
     width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: #FFFFFF;
        border: 4px solid  #00FF00;
        display: flex;
  justify-content: center;
  align-items: center;
}
.zzz{
     width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #FFFFFF;
        border: 5px solid  #00FF00;
         display: flex;
  justify-content: center;
  align-items: center;
}
.zzzz{
     width: 5px;
        height: 5px;
        border-radius: 50%;
        background-color: #00FF00;
}
    </style>

</head>
<body>
<div class="box">
    <div class="zz">
       <div class="zzz">
        <div class="zzzz"></div>
    </div>
    </div> 
    <div class="zz">
       <div class="zzz">
        <div class="zzzz"></div>
    </div>
    </div> 
    <div class="zz">
       <div class="zzz">
        <div class="zzzz"></div>
    </div>
    </div> 
    <div class="zz">
       <div class="zzz">
        <div class="zzzz"></div>
    </div>
    </div> 
    <div class="zz">
       <div class="zzz">
        <div class="zzzz"></div>
    </div>
    </div> 
    <div class="zz">
       <div class="zzz">
        <div class="zzzz"></div>
    </div>
    </div> 
    <div class="zz">
       <div class="zzz">
        <div class="zzzz"></div>
    </div>
    </div> 
    <div class="zz">
       <div class="zzz">
        <div class="zzzz"></div>
    </div>
    </div> 
    <div class="zz">
       <div class="zzz">
        <div class="zzzz"></div>
    </div>
    </div> 
</div>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/qq_42275455/article/details/82530452
今日推荐
周排行
8种防盗链的方法
php的序列化和反序列化
Java 8：CompletableFuture
Android版本差异适配方案(5.0-9.0)
makedownpad使用
Spring Boot 使用AOP切面实现后台日志管理模块
实战SSM_O2O商铺_44【DES加密】 关键配置信息进行DES加密
ACM排行榜说明
【转】SQL重复记录查询
板球和秃子威力那个大
每日归档
更多
2024-09-15(0)
2024-09-14(0)
2024-09-13(0)
2024-09-12(0)
2024-09-11(0)
2024-09-10(0)
2024-09-09(0)
2024-09-08(0)
2024-09-07(0)
2024-09-06(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022