信管117133张芳维校内实训 DAY2

Vitamin_Grail

于 2019-06-19 00:09:39 发布

阅读量182

点赞数

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.youkuaiyun.com/Vitamin_Grail/article/details/92802019

版权

该博客展示了使用HTML和CSS实现骰子样式的代码。通过HTML构建骰子的结构，利用CSS设置骰子的外观、布局和样式，如设置骰子的大小、颜色、边框、点数等，实现了不同点数骰子的可视化效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

TZ.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>骰子</title>
<link rel="stylesheet" type="text/css" href="TZ.css">
</head>
<body>

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

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

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

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

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

<div class="box TZ6">
<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>

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

</body>
</html>

TZ.css

.box{
       height:43px;
       width:43px;
       background: #fff;
       border:1px solid red;
       border-radius:5px;
       display: flex;
       padding:5px;
       float: left;
       margin-right:10px;
   }

   .item{
       background: #000;
       height: 10px;
       width: 10px;
       border-radius:50%;
       margin: 2px;
       box-sizing: border-box;
   }

   .TZ1{
       display: flex;
       justify-content: center;
       align-items: center;
   }

   .TZ2{
       display: flex;
       flex-direction: column;
       justify-content: space-between;
        align-items: center;
   }

   .TZ3{
       display: flex;
   }

   .TZ3 .item:nth-child(2) {
   align-self: center;
   }

   .TZ3 .item:nth-child(3) {
   align-self: flex-end;
   }

   .TZ4 {
   display: flex;
   flex-wrap: wrap;
   align-content: space-between;
   }

   .TZ4 .column {
   flex-basis: 100%;
   display: flex;
   justify-content: space-between;
   }

.TZ5 {
display: flex;
flex-wrap: wrap;
align-content: space-between;
}

.TZ5 .column {
flex-basis: 100%;
display: flex;
justify-content:
space-between;
}

.TZ5 .column:nth-child(2) {
justify-content: center;
}

.TZ5 .column:nth-child(3) {
justify-content: between;
}

   .TZ6 {
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;
   align-content: space-between;
   }

   .TZ7 {
   display: flex;
   flex-wrap: wrap;
   }

   .TZ7 .row{
   flex-basis: 100%;
   display:flex;
   }

   .TZ7 .row:nth-child(2){
   justify-content: center;
   }

   .TZ7 .row:nth-child(3){
   justify-content: space-between;
   }

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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