微信小程序开发 Day02

最新推荐文章于 2022-12-18 12:17:45 发布

SILIII

最新推荐文章于 2022-12-18 12:17:45 发布

阅读量232

点赞数

分类专栏：大学

本文链接：https://blog.csdn.net/SILIII/article/details/92801688

版权

本文介绍了微信小程序开发中的骰子布局实现，分别通过Sublime Text和微信开发者工具展示了两种方法，并详细描述了如何按照要求调整小程序的界面元素，包括颜色、文本和加载动画等。

摘要由CSDN通过智能技术生成

任务：1、骰子布局，把整个骰子做出来到页面上；

2、按照要求将小程序完成，能在手机上看或能在开发者工具调试即可。

1、骰子布局，把整个骰子做出来到页面上

这个任务分为了两个形式，一种在sublime中实现了骰子布局，下面为源代码：

HTML源代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<!-- 移动端页面的适配 -->
	<meta name="viewport" content="width=divice-width,initial-scale=1.0">
	<title>骰子布局</title>
	<link rel="stylesheet" href="random.css">
</head>
<body>
<div class="first-face">
  <span class="pip"></span>
</div>
<div class="second-face">
  <span class="pip"></span>
  <span class="pip"></span>
</div>
<div class="third-face">
  <span class="pip"></span>
  <span class="pip"></span>
  <span class="pip"></span>
</div>
<div class="fourth-face">
  <div class="column">
    <span class="pip"></span>
    <span class="pip"></span>
  </div>
  <div class="column">
    <span class="pip"></span>
    <span class="pip"></span>
  </div>
</div>
<div class="fifth-face">
  <div class="column">
    <span class="pip"></span>
    <span class="pip"></span>
  </div>
  <div class="column">
    <span class="pip"></span>
  </div>
  <div class="column">
    <span class="pip"></span>
    <span class="pip"></span>
  </div>
</div>
<div class="sixth-face">
  <div class="column">
    <span class="pip"></span