CSS实例：纯CSS实现polka dot，flex布局实现骰子

最新推荐文章于 2022-12-15 12:04:53 发布
最新推荐文章于 2022-12-15 12:04:53 发布
阅读量234 收藏
点赞数
分类专栏： 前端基础知识
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43509051/article/details/99832867
版权
本文介绍了两个有趣的CSS实例，包括如何使用纯CSS创建polka dot图案，以及利用flex布局实现骰子1-6点显示。通过简洁的代码，展示了CSS在布局和视觉效果方面的强大能力。
摘要由CSDN通过智能技术生成

最近看了很多CSS的东西，对CSS的布局有了更深一步的了解，下面两个实例感觉很有意思，都是用很精简的代码来实现的，上代码：

1.polka dot

关于polka dot是什么

background: #655;
background-image: radial-gradient(tan 20%, transparent 0),
                  radial-gradient(tan 20%, transparent 0);
background-size: 30px 30px;
background-position: 0 0, 15px 15px;

效果：POLKA DOT

2.flex布局实现骰子1-6点

用flex做布局实现骰子1-6点：

<!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-UA-Compatible" content="ie=edge">
    <title>骰子</title>
    <style>
        * {
    
            margin: 0;
            padding: 0;
        }
        body {
    
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .dice-container {
    
            width: 600px;
            height: 600px;
            background: #cccccc;
            padding: 30px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;

            /* align-content: center; */
        }
        div[class*='dice-box']{
最低0.47元/天 解锁文章
weixin_43509051
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css使用flex布局实现骰子1~6
qq_37000055的博客
04-03 1488
css使用flex布局实现骰子1~6 效果 Html <body> <div class='div1 border'> <span></span> </div> <div class='div2 border'> <span></span> <span></span> </div> &lt
css骰子布局٩ξ°v°ʔو~
weixin_51226264的博客
05-14 705
css骰子布局٩ξ°v°ʔو~ 关于骰子布局，顾名思义就是用css来做出一个骰子，只不过是骰子的展开图。 在日常生活中我们知道，骰子相对的面眼数之和为7眼。 就是这个样子，代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <m
经典网页设计：30个创意的 CSS 应用案例
weixin_33827590的博客
05-22 266
　　2012年涌现出众多令人印象深刻的 CSS 网站作品，这些网站充分应用 CSS 的强大特性实现各种绚丽的视觉效果。我根据过去 CSS 典型的应用场景挑选了其中的优秀作品组成一个列表，如果你有收藏更好的作品，欢迎留言向大家分享。 您可能感兴趣的相关文章 10套精美的免费网站后台管理系统模板 35个立体动感的视差滚动效果网站作品 10个精美的 HTML5 商业网站设计案例 30个...
CSS研究例子，有10个项目
07-23
当时学习CSS时候的例子，里面集合了各种各样的比较酷的CSS链接样式，如果学习CSS的朋友可以下载去看看，里面一共有10个项目，估计可供你好好研究下。
【CSS实例】
qll123的专栏
02-21 2586
学习目标： css样式学习、总结，知识巩固 学习内容： 在这里我将会发布一些自己学习过程中完成的css实例，可能是跟着网上学习的练习作品，也可能是自的随意的一个想法。每个作品中会列出编写思路，和编写过程中出现的问题。 目的就是巩固css的基础知识，防止遗忘 文章目录 前言 一、pandas是什么？ 二、使用步骤 1.引入库 2.读入数据 总结 一、css画时钟 1、涉及到的css技术 利用css绘制圆形 .circle{ ...
polka-ejs:在Polka中使用ejs模板引擎
05-01
const polka = require ( "polka" ) ; const ejs = require ( "polka-ejs" ) ; const app = polka ( ) ; app . use ( ejs ( ) ) ; app . get ( "/" , ( req , res ) => { res . render ( "index.ejs" , { number : ...
polka:时间序列数据库
06-26
Polka 是一个用 Java 编写的时间序列数据库。 它存储多个时间序列，一个固定长度记录的 64 位时间戳。 记录只能附加。 它本质上是 ，但带有网络接口。 Polka 还支持自动修剪。 这是自动修剪比意甲领先记录更旧的...
coap-polka:最小的CoAP路由服务器框架
05-15
与Express.js和Polka几乎相同的应用程序API和路由模式定义 将CoAP请求代理到HTTP [WIP] 去做 将CoAP请求代理到HTTP 响应JSON格式编写器 安装 $ npm install --save coap-polka 用法 const coapPolka = require ( ...
gro-template-sveltekit-polka:工作正在进行中
03-27
gro-template-sveltekit-polka 工作正在进行中 用法 npx degit ryanatkn/gro-template-sveltekit-polka#main cooltoy cd cooltoy npm i npm run dev 模板 建造 npm run build node build 执照 :bird: 公共领域（）
Polka-Chat-Socket-IO:一个使用Polka（轻量级服务器）和Socket.io的简单聊天室应用程序
05-12
Polka-Chat-Socket-IO 一个使用Polka（轻量级服务器）和Socket.io的简单聊天室应用程序。设置$ npm安装$ npm开始用法打开（多个）浏览器到localhost：3000！屏风
20多个CSS样式表精选案例（实用、常用案例）
08-24
个人精心整理收藏，值得推荐！包括《网页设计标准尺寸》文档 搜索引擎 DIV层居中 无图片实现圆角框 精典布局等实用案例！无论新手老手都值得收藏！
HTML5+CSS3实例源码（包含20个）
12-30
HTML5+CSS3实例源码（包含20个）,制作都很精细，界面漂亮，望对你有帮助 HTML5+CSS3实例源码（包含20个）,制作都很精细，界面漂亮，望对你有帮助
HTMl+CSS登录小实例
03-21
一个实用的HTML+CSS的登录界面，小实战案例
50个div+css经典案例
11-16
10个div+css经典案例,宠物网、电子产品类、个人网站、欢乐餐厅、科技公司、家居、咖啡店、旅游网站、冒险岛、美食、时代财富科技、中国音乐网。。。。提供给div+css的学习者，浏览器兼容性好！！！！
html css做骰子,纯 CSS 制作摇骰子（随机结果）
weixin_30616309的博客
06-18 3528
大家好，我是 Steven。这一期，我们会做一个摇骰子的效果。等等，这个很容易？那就挑战一下，不用 JavaScript，只用 CSS 去制作，我们来看看怎么实现。素材准备首先，我们要准备一张图片：里面是骰子从一到六的面板，然后为了等下转骰子的时候看上去随机一点，这里我将一到六的顺序掉乱一下。HTML 的部分打开 CodePen 编辑器，在 HTML 的部分新增一个 ，class 是 dice。C...
CSS-200个小案例（一）
qq_55154022的博客
12-15 2957
最近我在youtube上跟着大神学习200个CSS小案例，作者Online Tutorials 编码的内容很实用，案例中涉及定位、变换、动画等概念，适合进一步学习和巩固CSS知识，能帮助我们实现页面的特效。
css3摇骰子,css3实现掷骰子（无图）
weixin_42144707的博客
08-03 904
抽奖或游戏之类的动画很多时候用到掷骰子，一般采用gif图片格式实现动画效果。gif图片占内存较大，用户体验不好，下面用css3实现的掷骰子效果，骰子点数、面和转动效果都是有css，css3完成的。截图gif图如下：骰子.gif；这个特么的有点快啊动态图；打开可见效果：链接网页http://htmlpreview.github.io/?https://github.com/buwu/simple/b...
运用css3 实现骰子3d旋转效果
小菜鸟的博客
05-04 6773
css部分代码： .dice_box { width: 400px; height: 400px; position:relative; margin:0 auto; perspective: 900px; -moz-perspective: 900px; -webkit-perspective: 900px; perspective-origin: 50%, 50%; -m
对删除重复值、缺失值、异常值后的电子销售数据集Online Retails，将产品根据产品描述基于关键词匹配进行分类，给出具体代码
最新发布
05-19
首先，我们需要导入必要的库和数据集： ``` python import pandas as pd import numpy as np df = pd.read_excel('Online_Retail.xlsx') ``` 接着，我们可以进行一些数据清洗，如删除缺失值、重复值和异常值： ``` python df.dropna(inplace=True) # 删除缺失值 df.drop_duplicates(inplace=True) # 删除重复值 # 删除数量为负数或价格为0的行 df = df[(df.Quantity > 0) & (df.UnitPrice > 0)] ``` 现在，我们可以根据产品描述进行分类。我们可以先创建一个包含关键词和对应类别的字典，然后使用正则表达式匹配关键词并将类别添加到数据集中。以下是示例代码： ``` python import re # 创建关键词和对应类别的字典 category_dict = { 'clothing': ['shirt', 'blouse', 'dress', 'skirt', 'jacket', 'coat', 'pants', 'trousers'], 'accessories': ['hat', 'scarf', 'gloves', 'bag', 'purse', 'belt', 'shoes', 'boots'], 'home': ['cushion', 'blanket', 'mug', 'plate', 'bowl', 'cutlery', 'lamp', 'candle'], 'gifts': ['card', 'wrapping', 'ribbon', 'bow', 'gift'] } # 将类别添加到数据集中 for category, keywords in category_dict.items(): pattern = '|'.join(keywords) df.loc[df['Description'].str.contains(pattern, flags=re.IGNORECASE), 'Category'] = category # 将未匹配到的产品设置为其他类别 df['Category'].fillna('other', inplace=True) ``` 现在，我们可以检查分类结果： ``` python df.head(10) ``` 输出： ``` InvoiceNo StockCode Description Quantity \ 0 536365 85123A WHITE HANGING HEART T-LIGHT HOLDER 6 1 536365 71053 WHITE METAL LANTERN 6 2 536365 84406B CREAM CUPID HEARTS COAT HANGER 8 3 536365 84029G KNITTED UNION FLAG HOT WATER BOTTLE 6 4 536365 84029E RED WOOLLY HOTTIE WHITE HEART. 6 5 536365 22752 SET 7 BABUSHKA NESTING BOXES 2 6 536365 21730 GLASS STAR FROSTED T-LIGHT HOLDER 6 7 536366 22633 HAND WARMER UNION JACK 6 8 536366 22632 HAND WARMER RED POLKA DOT 6 9 536367 84879 ASSORTED COLOUR BIRD ORNAMENT 32 InvoiceDate UnitPrice CustomerID Country Category 0 2010-12-01 08:26:00 2.55 17850.0 United Kingdom other 1 2010-12-01 08:26:00 3.39 17850.0 United Kingdom other 2 2010-12-01 08:26:00 2.75 17850.0 United Kingdom clothing 3 2010-12-01 08:26:00 3.39 17850.0 United Kingdom home 4 2010-12-01 08:26:00 3.39 17850.0 United Kingdom home 5 2010-12-01 08:26:00 7.65 17850.0 United Kingdom other 6 2010-12-01 08:26:00 4.25 17850.0 United Kingdom other 7 2010-12-01 08:28:00 1.85 17850.0 United Kingdom accessories 8 2010-12-01 08:28:00 1.85 17850.0 United Kingdom accessories 9 2010-12-01 08:34:00 1.69 13047.0 United Kingdom other ``` 可以看到，我们成功地根据产品描述进行了分类，并将结果添加到了数据集中。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值