Angular实现九宫格抽奖

最新推荐文章于 2022-06-21 11:36:45 发布

勘察加熊人

最新推荐文章于 2022-06-21 11:36:45 发布

阅读量259

点赞数

分类专栏： typescript 文章标签： typescript

本文链接：https://blog.csdn.net/cf8833/article/details/123796390

版权

这篇博客介绍了如何在Angular项目中实现九宫格抽奖效果。作者通过三个步骤展示了实现过程：在app.component.css中编写样式，在app.component.html中构建抽奖布局，然后在app.component.ts中编写 TypeScript 代码实现抽奖逻辑。最终运行成功，完成抽奖功能的搭建。

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

Angular实现九宫格抽奖

step1: D:\vue\untitled2906\src\app\app.component.css

.sudoku_row{
   
  display: flex;
  align-items: center;
  width:100%;
  flex-wrap: wrap;
}
.sudoku_item{
   
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width:32%;
  padding-top: 10px;
  padding-bottom: 10px;
}

.sudoku_item img{
   
  margin-bottom: 3px;
  display: block;
  width: 100px;
  height: 100px;
}

.sudoku_item span{
   
  margin-top: 10px;
  padding-top: 10px;
  display: block;
  width: 100px;
  text-align: center;
  height: 30px;
}

step2: D:\vue\untitled2906\src\app\app.component.html

<html>
<head>
</head>
<body>
<div [ngStyle]=

最低0.47元/天解锁文章

勘察加熊人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录