校内综合实训第二天

最新推荐文章于 2021-07-28 03:27:12 发布

974720161

最新推荐文章于 2021-07-28 03:27:12 发布

阅读量106

点赞数

本文链接：https://blog.csdn.net/qq_41446560/article/details/92801451

版权

第二天学习了微信小程序开发的框架和基础，明白了如何开发一个小程序

还完成了老师布置自学的骰子布局

HTML文件代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>骰子</title>
  <link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
  
    <div class="box box1-1">
        <span class="item"></span>
    </div>
    <div class="box box1-2">
        <span class="item"></span>
    </div>
    <div class="box box1-3">
        <span class="item"></span>
    </div>
    <div class="box box1-4">
        <span class="item"></span>
    </div>
    <div class="box box1-5">
        <span class="item"></span>
    </div>
    <div class="box box1-6">
        <span class="item"></span>
    </div>
    <div class="box box1-7">
        <span class="item"></span>
    </div><br><br><br>

    <div class="box box2-1">
        <span class="item"></span> 
        <span class="item"></span> 
    </div>
    <div class="box box2-2">
        <span class="item"></span> 
        <span class="item"></span>
    </div>
    <div class="box box2-3">
        <span class="item"></span> 
        <span class="item"></span>
    </div>
    <div class="box box2-4">
        <span class="item"></span> 
        <span class="item"></span>
    </div>
    <div class="box box2-5">
        <span class="item"></span> 
        <span class="item"></span>
    </div>
    <div class="box box2-6">
        <span class="item"></span> 
        <span class="item"></span>
    </div><br><br><br>

    <div class="box box3-1">
        <span class="item"></span> 
        <span class="item"></span>
        <span class="item"></span>
    </div><br><br><br>

    <div class="box box4-1">
        <span class="item"></span>
        <span class="item"></span>
        <span class="item"></span>
        <span class="item"></span>
    </div>
    <div class="box box4-2">
      <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><br><br><br>

    <div class="box box6-1">
        <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 box6-2">
        <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 box6-3">
      <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>

css文件代码

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

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

	.box1-1{
		display: flex;
	}
	.box1-2{
		display: flex;
  		justify-content: center;
	}
	.box1-3{
		display: flex;
  		justify-content: flex-end;
	}
	.box1-4{
		display: flex;
  		align-items: center;
	}
	.box1-5{
		display: flex;
  		justify-content: center;
  		align-items: center;
	}
	.box1-6{
		display: flex;
  		justify-content: center;
  		align-items: flex-end;
	}
	.box1-7{
		display: flex;
  		justify-content: flex-end;
  		align-items: flex-end;
	}

	.box2-1{
		display: flex;
  		justify-content: space-between;
	}
	.box2-2{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.box2-3{
		display: flex;
  		flex-direction: column;
  		justify-content: space-between;
 		align-items: center;
	}
	.box2-4{
		display: flex;
  		flex-direction: column;
  		justify-content: space-between;
  		align-items: flex-end;
	}
	.box2-5{
		display: flex;
	}
	.box2-5 .item:nth-child(2) {
	  align-self:center;
	}
	.box2-6{
		display: flex;
	  	justify-content: space-between;
	}
	.box2-6 .item:nth-child(2) {
	  align-self:flex-end;
	}

	.box3-1{
		display: flex;
	}

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

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

	.box4-1 {
	  display: flex;
	  flex-wrap: wrap;
	  justify-content: flex-end;
	  align-content: space-between;
	}
	.box4-2 {
	  display: flex;
	  flex-wrap: wrap;
	  align-content: space-between;
	}
	.box4-2 .column {
	  flex-basis: 100%;
	  display: flex;
	  justify-content: space-between;
	}

	.box6-1 {
	  display: flex;
	  flex-wrap: wrap;
	  align-content: space-between;
	}
	.box6-2 {
	  display: flex;
	  flex-direction: column;
	  flex-wrap: wrap;
	  align-content: space-between;
	}
	.box6-3 {
	  display: flex;
	  flex-wrap: wrap;
	}

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

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

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

974720161

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
校内综合实训第二天

第二天学习了微信小程序开发的框架和基础，明白了如何开发一个小程序还完成了老师布置自学的骰子布局HTML文件代码<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>骰子</title> <link rel="stylesh...
复制链接

扫一扫