筛子

最新推荐文章于 2024-07-15 15:13:08 发布
最新推荐文章于 2024-07-15 15:13:08 发布
阅读量224 收藏
点赞数 1
文章标签： css css3 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45818845/article/details/109554817
版权

筛子

第一次普通方法写筛子（代码可读性较高，含知识点较多）

wxml

<view class="father">
  <view class="box1">
    <view class="point"></view>
  </view>
  <view class="box2">
    <view class="point"></view>
    <view class="point"></view>
  </view>
</view>
<view class="father">
  <view class="box3">
    <view style="padding-left:4px">
      <view class="point" ></view>
    </view>
    <view>
      <view class="point"></view>
    </view>
    <view style="padding-right:4px">
      <view class="point" ></view>
    </view>
  </view>
  <view class="box4">
    <view>
      <view class="point"></view>
      <view class="point"></view>
    </view>
    <view>
      <view class="point"></view>
      <view class="point"></view>
    </view>
  </view>
</view>
<view class="father">
  <view class="box5">
    <view>
      <view class="point"></view>
      <view class="point"></view>
    </view>
    <view>
      <view class="point"></view>
    </view>
    <view>
      <view class="point"></view>
      <view class="point"></view>
    </view>
  </view>
  <view class="box6">
    <view>
      <view class="point"></view>
      <view class="point"></view>
    </view>
    <view>
      <view class="point"></view>
      <view class="point"></view>
    </view>
    <view>
      <view class="point"></view>
      <view class="point"></view>
    </view>
  </view>
</view>
<view class="father">
  <view class="box7">
    <view>
      <view class="point"></view>
      <view class="point"></view>
      <view class="point"></view>
    </view>
    <view>
      <view class="point"></view>
    </view>
    <view>
      <view class="point"></view>
      <view class="point"></view>
      <view class="point"></view>
    </view>
  </view>
  <view class="box8">
    <view>
      <view class="point"></view>
      <view class="point"></view>
      <view class="point"></view>
    </view>
    <view>
      <view class="point"></view>
      <view class="point" style="background-color:#fff"></view>
      <view class="point"></view>
    </view>
    <view>
      <view class="point"></view>
      <view class="point"></view>
      <view class="point"></view>
    </view>
  </view>
</view>

wxss

page{
  box-sizing: border-box;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;  
}
view{
  box-sizing: border-box;
  border: solid 1px;
}
.father{
  border: #ffffff;
  display: flex;
  width: 100%;
  justify-content: space-around;
}
.father>view{
  width: 80px;
  height: 80px;
  display: flex;
  flex-direction: column;
}
.point{
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #000000;
}
.box1{
  justify-content: center;
  align-items: center;
}
.box2{
  justify-content: space-around;
  align-items: center;
}

.box3 view{
  border: white;
  display: flex;
}
.box3 view:nth-child(3){
  
  justify-content: flex-end;
}
.box3 view:nth-child(2){
  justify-content: center;
}
.box3,.box4,.box5,.box6,.box7,.box8{
  justify-content: space-around;
}
.box4 view,.box5 view,.box6 view,.box7 view,.box8 view{
  border: white;
  display: flex;
  justify-content: space-around;
}

基于wxml的统一结构写出的精简版（代码量较少，结构统一）

wxml

<view class="father">
  <view >
    <view>
      <view class="point"></view>
    </view>
  </view>
  <view>
    <view>
      <view class="point"></view>
    </view>
    <view>
      <view class="point"></view>
    </view>
  </view>
</view>
<view class="father">
  <view>
    <view style="justify-content: start">
      <view class="point"></view>
    </view>
    <view>
      <view class="point"></view>
    </view>
    <view style="justify-content: flex-end">
      <view class="point"></view>
    </view>
  </view>
  <view>
    <view>
      <view class="point"></view>
      <view class="point"></view>
    </view>
    <view>
      <view class="point"></view>
      <view class="point"></view>
    </view>
  </view>
</view>
<view class="father">
  <view>
    <view>
      <view class="point"></view>
      <view class="point"></view>
    </view>
    <view>
      <view class="point"></view>
    </view>
    <view>
      <view class="point"></view>
      <view class="point"></view>
    </view>
  </view>
  <view>
    <view>
      <view class="point"></view>
      <view class="point"></view>
    </view>
    <view>
      <view class="point"></view>
      <view class="point"></view>
    </view>
    <view>
      <view class="point"></view>
      <view class="point"></view>
    </view>
  </view>
</view>
<view class="father">
  <view>
    <view>
      <view class="point"></view>
      <view class="point"></view>
      <view class="point"></view>
    </view>
    <view>
      <view class="point"></view>
    </view>
    <view>
      <view class="point"></view>
      <view class="point"></view>
      <view class="point"></view>
    </view>
  </view>
  <view>
    <view>
      <view class="point"></view>
      <view class="point"></view>
      <view class="point"></view>
    </view>
    <view>
      <view class="point"></view>
      <view class="point" style="background-color:white"></view>
      <view class="point"></view>
    </view>
    <view>
      <view class="point"></view>
      <view class="point"></view>
      <view class="point"></view>
    </view>
  </view>
</view>

wxss

page{
  height: 100%;
  display: flex;
  flex-direction: column;
}
.father{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-around;
  border: solid white; 
}
.father>view{
  width: 80px;
  height: 80px;
  display: flex;
  border: black solid 1px;
  flex-direction: column;
  justify-content: space-around;
}
.point{
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #000000;
}
.father>view>view{
  display: flex;
  justify-content: space-around;
}

知识点总结

选择器

详细学习请移步：https://www.runoob.com/cssref/css-selectors.html
快速学习可移步：css选择器

选择器的权重

内联样式：
<view style="background-color:white">
其中的 style=""，就是内联样式
ID 选择器：
<view id ="name">
#name{
...
}
类选择器:
<view class="point"></view>
.point{
...
}
标签选择器:
<view></view>
view{
...
}
特定子元素选择器：
.box3 view:nth-child(3){
  
  justify-content: flex-end;
}
指的是：选择类名为box3，的子代view的第三个子元素

优先规则1： 最近的祖先样式比其他祖先样式优先级高。

优先规则2："直接样式"比"祖先样式"优先级高。

**优先规则3：**优先级关系：内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器

**优先规则4：**计算选择符中 ID 选择器的个数（a），计算选择符中类选择器、属性选择器以及伪类选择器的个数之和（b），计算选择符中标签选择器和伪元素选择器的个数之和（c）。按 a、b、c 的顺序依次比较大小，大的则优先级高，相等则比较下一个。若最后两个的选择符中 a、b、c 都相等，则按照"就近原则"来判断。

某些属性是否具备继承属性

卷王2048
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
flex制作筛子
hhhhs2的博客
05-07 144
1点 wrap是ul上面的属性 <div class="box"> <ul class="wrap"> <li>1点</li> </ul> </ul> </div> ul>li { display: block; width: 100px; height: 10
3D筛子制作教程
TZLNBB的博客
05-27 799
3D筛子制作教程 1.如何用AI制作筛子 先打开AI创建空白文档然后创建六个同样大小的椭圆 然后在像筛子一样做六个面如图： 做好后在菜单栏—找到窗口—窗口下找到符号把这六个给在符号里面 2.画一个和椭圆一样大的正方形.找菜单栏然后—效果—3D—凸出和斜角 然后点贴图找到自己添加的符号按顺序1到6的贴好就会这样 然后点扩展外观，把那些编组都拆开，找到那三个正方形背景选中合并然后置于底层那三个椭圆就显示出来了. 选中那个背景然后用直接选择...
累筛子
晓风残月龙
02-18 450
一、题目 赌圣atm晚年迷恋上了垒骰子，就是把骰子一个垒在另一个上边，不能歪歪扭扭，要垒成方柱体。 经过长期观察，atm 发现了稳定骰子的奥秘：有些数字的面贴着会互相排斥！ 我们先来规范一下骰子：1 的对面是 4，2 的对面是 5，3 的对面是 6。 假设有 m 组互斥现象，每组中的那两个数字的面紧贴在一起，骰子就不能稳定的垒起来。 atm想计算一下有多少种不同的可能的垒骰子方式。 两种垒骰...
摇筛子动画 android,摇骰子动画
weixin_39649478的博客
05-25 1011
最近再做一个中秋摇骰子的博饼动画，动画涉及到pc端和移动端，那么骰子动画就是一个考量的点，如何比较逼真的将筛子的动画演示出来，pc端对于不兼容css3的浏览器如何平稳退化，加入音频以后如何处理,下面先看pc和移动端的博饼动画单独抠出来演示：下面就主要说说骰子动画实现方式：1.通过结果给对应的elem添加不同的class来进行一定轨迹的animation动画,例如：服务端返回的是data={dice...
Flex筛子
csdndas的博客
05-27 68
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } .wrap{ display: flex; } .container{ border...
立体3D筛子
Likeyou113的博客
06-27 292
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 开发工具与关键技术：AI与3D调节 作者：神威未得偏爱 撰写时间：2021年6月27日 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 一、画布 1.在AI里随机创建一个画布（个人用300mmx30
筛子布局
tt_vip的博客
12-16 142
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
js摇筛子点数合计代码
07-24
在JavaScript（简称JS）编程中，模拟摇筛子游戏是一种常见的练习，可以帮助初学者更好地理解事件处理、随机数生成以及DOM操作等基本概念。在这个场景中，"js摇筛子点数合计代码"是一个简单的应用，它实现了用户通过...
0782、电子筛子.zip
01-26
【标题】"0782、电子筛子.zip" 提供的是一个关于电子筛子的资源包，可能包含了实现电子筛子程序的代码、设计思路、使用教程等内容。电子筛子，顾名思义，是电子设备上的一个模拟真实骰子的应用，常用于游戏、教育等...
Unity3D掷筛子游戏源码
07-12
"Unity3D掷筛子游戏源码"是一个简单的项目，适合初学者理解Unity的基本操作和编程逻辑，同时也可作为更复杂游戏开发的基础。 在Unity3D中创建一个掷筛子游戏，主要涉及以下几个关键知识点： 1. **基本场景设置**：...
swift 3D 筛子
08-24
"Swift 3D 筛子"项目就是这样一个实例，它涉及到利用3D动画技术创建一个可旋转的骰子模型。在这个项目中，我们将深入探讨如何利用苹果的SceneKit框架来实现3D图形渲染、交互以及动态效果。 首先，SceneKit是Apple为...
电子筛子.zip
04-18
电子筛子，通常指的是在数字设备上实现的模拟骰子应用，它可以帮助用户进行各种基于随机数的游戏或决策。在编程领域，实现电子筛子涉及到概率、随机数生成以及用户界面设计等多个知识点。 首先，我们要了解随机数...
html设计（两种常见的充电效果）
2301_81704123的博客
07-12 2826
title>充电效果
CSS实现table表格：隔行换色的效果
pan_junbiao的博客
07-12 310
表格是网页中十分重要的组成元素。表格用来存储数据，包含标题、表头、行和单元格。在HTML语言中，表格标记使用符号表示。定义表格光使用是不够的，还需要定义表格中的行、列、标题等内容。在CSS中，可以使用 nth-child 选择器来实现隔行换色。该选择器用于匹配父元素中的特定子元素，nth-child(odd) 可以匹配奇数行，nth-child(even) 可以匹配偶数行。使用CSS样式实现 table 表格隔行换色的效果。
css-grid布局(栅格布局)
YogaMiller的博客
07-15 534
* 数字和命名搭配搭配也可, 1 / t 注意如果是一个位置的话可省略, 比如 1 / 2 2 / 3 这里的2 3就可以省略*//* [d]150px 100px;搞不懂为什么加个命名就变小了.... *//* 目前喜欢这种的方式, 比较直观 . 表示这个位置空着 */grid 一个比flex更强大的布局,适合做整体布局。/* g-r-start g-r-end 的简称 *//* 相同的名字 代表相同的区域 */fr 只能放在第二个参数。
HTML5+CSS3小实例：纯CSS实现奥运五环
最新发布
艾恩小灰灰的博客
07-15 148
实例：纯CSS实现奥运五环。技术栈：HTML+CSS。
埃拉托色尼筛子python
04-04
以下是一个简单的Python程序，用于生成埃拉托色尼筛子： ```python def sieve(n): """ 生成埃拉托色尼筛子 """ primes = [True] * (n + 1) primes[0] = primes[1] = False for i in range(2, int(n ** 0.5) +...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值