校内综合实训——骰子布局

最新推荐文章于 2024-04-09 12:00:03 发布

M_Mango

最新推荐文章于 2024-04-09 12:00:03 发布

阅读量576

点赞数

本文链接：https://blog.csdn.net/M_Mango/article/details/92802606

版权

本文详细介绍了如何在网页上实现骰子布局，包括源代码展示和运行效果的截图。同时，还探讨了对小程序进行基本设置的步骤，提供了一部分源代码和最终结果的截图。

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

一、在网页上显示骰子布局

（一）源代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>骰子布局</title>
	<link rel="stylesheet" type="text/css" href="dice.css">
</head>
<body>
	<div class="face">
	<div class="first-face">
    <span class="dot"></span>
  	</div>

  	<div class="second-face">
    <span class="dot"></span>
    <span class="dot"></span>
    </div>	

    <div class="third-face">
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
    </div>

    <div class="fourth-face">
    <div class="column">
      <span class="dot"></span>
      <span class="dot"></span>
    </div>
    <div class="column">
      <span class="dot"></span>
      <span class="dot"></span>
    </div>
    </div>

    <div class="fifth-face">
    <div class="column">
      <span class="dot"></span>
      <span class="dot"></span>
    </div>
    <div class="column">
      <span class="dot"></span>
    </div>
    <div class="column">
      <span class="dot"></span>
      <span class="dot"></span>
    </div>
    </div>

    <div class="sixth-face">
    <div class="column">
      <span class="dot"></span>
      <span class="dot"></span>
      <span class="dot"></span>
    </div>
    <div class="column">
      <span class="dot"></span>
      <span class="dot"></span>
      <span class="dot"></span>
    </div>
    </div>
    </div>
</body>
</html>

（二）运行截图

二、对小程序进行基本设置

（一）部分源代码

{
  "pages": [
    "pages/index/index",
    "pages/classify/classify",
    "pages/shopcart/shopcart",
    "pages/mine/mine"
  ],
  "window": {
    "backgroundTextStyle": "dark",
    "navigationBarBackgroundColor": "#5fdec9",
    "navigationBarTitleText": "BalaBala",
    "navigationBarTextStyle": "white",
    "enablePullDownRefresh": true
  },
  "tabBar": {
    "color": "#666",
    "selectedColor": "#5fdec9",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "asserts/icons/home.png",
        "selectedIconPath": "asserts/icons/achome.png"
      },
      {
        "pagePath": "pages/classify/classify",
        "text": "分类",
        "iconPath": "asserts/icons/classify.png",
        "selectedIconPath": "asserts/icons/achome.png"
      },
      {
        "pagePath":"pages/shopcart/shopcart",
        "text": "购物车",
        "iconPath": "asserts/icons/shopcart.png",
        "selectedIconPath": "asserts/icons/acshopcart.png"
      },
      {
        "pagePath": "pages/mine/mine",
        "text": "我的",
        "iconPath": "asserts/icons/mine.png",
        "selectedIconPath": "asserts/icons/acmine.png"
      }
    ]
  },
  "sitemapLocation": "sitemap.json"
}

（二）结果截图

M_Mango

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
校内综合实训——骰子布局

一、在网页上显示骰子布局（一）源代码<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>骰子布局</title> <link rel="stylesheet" type="text/css" href="dice.css">&lt...
复制链接

扫一扫