day02作业

最新推荐文章于 2024-05-16 20:17:32 发布

dengjintai

最新推荐文章于 2024-05-16 20:17:32 发布

阅读量92

点赞数

分类专栏：实习笔记以及作业

本文链接：https://blog.csdn.net/dengjintai/article/details/92801518

版权

实习笔记以及作业专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1、骰子布局的练习

index.html

<!DOCTYPE html>
<html>
<head>
   <title>骰子布局练习</title>
   <meta charset="utf-8">
   <style type="text/css">
       div{

       }
   </style>
   <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div class="m-container box1">
   <span class="item"></span>
</div>
<div>
<span class="m-container box2">
   <span class="item"></span>
</span>
<span class="m-container box3">
   <span class="item"></span>
   <span class="item"></span>
</span>
<span class="m-container box4">
   <span class="item"></span>
</span>
</div>
<div class="m-container box5">
   <span class="item"></span>
</div>
<div class="m-container box6">
   <span class="item"></span>
</div>
<div class="m-container box7">
   <span class="item"></span>
</div>
<div class="m-container box8">
   <span class="item"></span>
   <span class="item"></span>
</div>
<div class="m-container box9">
   <span class="item"></span>
   <span class="item"></span>
</div>
<div class="m-container box10">
   <span class="item"></span>
   <span class="item"></span>
</div>
<div class="m-container box11">
   <span class="item"></span>
   <span class="item"></span>
</div>
<div class="m-container box1">
   <span class="item"></span>
   <span class="item"></span>
</div>
<div class="m-container box8">
   <span class="item"></span>
   <span class="item"></span>
</div>
<div class="m-container box1">
   <span class="item"></span>
   <span class="item"></span>
   <span class="item"></span>
</div>
<div class="m-container box12">
   <span class="item"></span>
   <span class="item"></span>
   <span class="item"></span>
   <span class="item"></span>
</div>
<div class="m-container box13">
<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="m-container box14">
<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>
<div class="m-container box15">
    <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>
</body>
</html>

index.css

div{
margin: 0;

}

.m-container{
   margin: 5px;
   padding: 5px;
   width: 100px;
   height: 100px;
   border-radius: 10px;
   border: 5px solid green;
   background-color: #70DB93;
}

.item{
   margin: 5px;
   width: 20px;
   height: 20px;
   border-radius: 10px;
   background-color: #049;
}

.box1{
display: flex;
}
.box1 .item:nth-child(2){
align-self: center;
}

.box1 .item:nth-child(3){
   align-self: flex-end;
}
.box2{
   display: flex;
   justify-content: center;
}

.box3{
display: flex;
justify-content: flex-end;
}

.box4{
display: flex;
align-items: center;
}

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

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

.box7{
   display: flex;
   justify-content: flex-end;
   align-items: flex-end;
}

.box8{
display: flex;
justify-content: space-between;
}

.box8 .item:nth-child(2){
align-self: flex-end;
}

.box9{
   display: flex;
   justify-content: space-between;
   flex-direction: column;
}

.box10{
   display: flex;
   justify-content: space-between;
   flex-direction: column;
   align-items: center;
}
.box11{
   display: flex;
   justify-content: space-between;
   flex-direction: column;
   align-items: flex-end;
}
.box12{
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-end;
   align-content: space-between;
}

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

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

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

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

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

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

.box15 {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
}

结构图如下：

2、微信小程序的配置与基本页面设计

今天只是简单的做完了基本的页面跳转，页面内容还没有=-=，而且小程序的代码过多，只展示一下效果图。

效果图如下：

dengjintai

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
day02作业

1、骰子布局的练习index.html<!DOCTYPE html><html><head> <title>骰子布局练习</title> <meta charset="utf-8"> <style type="text/css"> div{ }...
复制链接

扫一扫