Pink | 易学教程

web CSS3 实现3D动态翻牌效果

阅读更多关于 web CSS3 实现3D动态翻牌效果

使用纯CSS3 实现翻牌效果需要注意要给子盒子使用绝对定位，这样两个盒子可以完全重合在一起，需要给父盒子一个 transform-style: preserve-3d;让子盒子翻转时保持3D效果， perspective: 400px;可以给父盒子一个视距遵守近大远小规则可根据需要设置。 transition: all 0.3s;使用延迟效果更好观察动画当鼠标放上时就会旋转以下代码直接复制即可使用。 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 <style> 9 .card { 10 position : relative ; 11 transform-style : preserve-3d ; 12 float : left ; 13 perspective : 400px ; 14 perspective : 180px ; 15 width : 150px ; 16 height : 150px ; 17 margin : 100px 20px ; 18

Python笔记：用matplotlib绘制柱状图

阅读更多关于 Python笔记：用matplotlib绘制柱状图

matplotlib是Python中最基本的绘图库，而柱状图又是使用频率较高的可视化图形。下面我就在有pyecharts库和R语言，echarts绘图经验的基础上，简单得摸索一下用matplotlib绘制柱状图的方法。代码如下： # 导入相关的库 import pandas as pd import numpy as np import matplotlib.pyplot as plt # 在线显示 %matplotlib inline # 定义画布的大小 fig = plt.figure(figsize = (15,8)) # 添加主标题 plt.title("各品牌汽车的销量") # 设置X周与Y周的标题 # plt.xlabel("品牌") # plt.ylabel("销量") # 显示网格线 # plt.grid(True) # 设置 x轴数据 x = np.array(["宝马","奔驰","奥迪","马自达","大众","布加迪","兰博基尼","法拉利","本田","丰田"]) # 设置 y轴数据 y = np.array([1000,800,600,400,300,250,150,100,80,50]) # 直接绘制简单的柱状图 # plt.bar(x,y) # 绘制柱状图，并把每根柱子的颜色设置为洋红色 # plt.bar(x,y,color = "m") #

d3js scales深入理解

阅读更多关于 d3js scales深入理解

https://www.cnblogs.com/kidsitcn/p/7182274.html d3js scales深入理解比例尺函数是这样的javascript函数：接收通常是数字，日期，类别等data输入并且：返回一个代表可视化元素的值，比如坐标，颜色，长度或者半径等比例尺通常用于变换(或者说映射）抽象的数据值到可视量化变量（比如位置，长度，颜色等）比如，假设我们有以下数组数据： [ 0, 2, 3, 5, 7.5, 9, 10 ] 我们可以这样创建一个比例尺函数： var myScale = d3.scaleLinear() .domain([0, 10]) .range([0, 600]); d3将创建一个myScale函数用于接收[0,10]之间的数据输入(domain)映射为[0,600]像素的位置数据(range) 我们可以使用myScale函数来计算对应数据的positions数据: myScale(0); // returns 0 myScale(2); // returns 120 myScale(3); // returns 180 ... myScale(10); // returns 如上面所说，比例尺主要用于将抽象数据映射为可视的量化元素，比如位置，长度，半径，颜色等。比如，他们可以这样应用将抽象数据映射为0到500的长度值以便在bar

一篇文章教会你如何制做精美导航条

阅读更多关于一篇文章教会你如何制做精美导航条

【一、项目背景】让更多的人去学习html，以广东科技学院的导航栏为例，教大家怎么去做一个横向的导航栏。【二、项目准备】准备一个编程的软件Dreamweaver，打开软件点击文件新建一个叫导航栏的项目，如下图所示。点击确定之后，会弹出下图。【三、项目实施】 1. 在<body>标签里面写下一个框架：注：<nav>标签定义导航链接的部分。<ul> 标签定义无序列表，<li>标签定义列表项目。 <li> 标签可用在有序列表 (<ol>) 和无序列表 (<ul>) 中。 2. 写完运行（运行：右下角点击f12运行）看到效果，如下图所示： 3. 加入css样式表（这里采用内部样式表）。 3.1 CSS样式表有两种加入的方式如图： 3.2 去除li带来的小黑点: li{ list-style: none; } 4. 基于上述步骤，运行一下如下图所示： 5. 设置一下导航栏的样式。设置一下列表ul 的宽度，高度，背景颜色,文字位置居中（margin：0 auto）。 Li 同样的设置高度。去掉小黑点，再设置文字的颜色，高度，内边距，（个人喜好看着舒服就行）设置文字的大小，去掉下划线（text-decoration:none;）。下面是详细备注 ul li{float: left; # 把内容左浮动，这样可以横向排列 width: 100px; #

R语言笔记：用R语言绘制条形图

阅读更多关于 R语言笔记：用R语言绘制条形图

学“统计学”的人对R语言应该不会太陌生，近十年来，随着大数据时代的到来，把统计学和数据分析，R语言都带火了。虽然我本人会用Python的matplotlib和pyecharts，百度的Echarts,微软的Excel作可视化图形，但因为自身也是学统计学专业的，如果不会用R语言。心里多少都会感到有一点遗憾。经过我这两天的，摸索，其实发现“可视化之神”也不难上手，只要多“百度经验”和“CSDN”一下就可以了。闲话少说，来点干货先。 ① 在Excel中创建用Python的 groupby函数或 pivot.table功能汇总出下面的结果： ② 通过R语言指令把数据从“ 剪切板 ”加载到RStudio中（因为虽然直接从Excel文件读取更加方便、省事，但是因为我平时用Python，就不想多配置一个Java的JDK环境了）：代码： QDM <- read.table("clipboard",header = T) QDM ③ 或者自己在RStudio中，根据需求构造两组一维向量： QDM <- c(100,200,300,400,500,600) depatment <- c("电商","水产","水果","蔬菜","肉类","综合") ③ 用 barplot() 函数来绘制出一个简单的柱形图（代码超短），默认是灰色。 barplot(QDM,names.arg =

css 实现动态二级菜单

阅读更多关于 css 实现动态二级菜单

动态实现简单的二级菜单当鼠标放到一级标签上时，鼠标会变成小手的形状展示二级菜单，源码如下，复制即可直接使用 1 <! DOCTYPE html > 2 < html lang ="en" > 3 < head > 4 < meta charset ="UTF-8" > 5 < meta name ="viewport" content ="width=device-width, initial-scale=1.0" > 6 < title > Document </ title > 7 < style > 8 * { margin : 0 ; padding : 0 ; } 9 ul { list-style : none ; } 10 div { 11 width : 100% ; 12 height : 50px ; 13 background-color : #ccc ; 14 } 15 .first { 16 width : 100px ; 17 height : 50px ; 18 float : left ; 19 margin-right : 70px ; 20 /* background-color: pink; */ 21 cursor : pointer ; 22 text-align : center ; 23 line-height : 50px ;

什么是BFC（块级格式上下文）？

阅读更多关于什么是BFC（块级格式上下文）？

㈠什么是BFC？ BFC 全称为块格式化上下文 (Block Formatting Context) 。定义：浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。㈡BFC的布局规则是什么？ 1）内部的box会在垂直方向，一个接一个地放置（可以看作BFC中有一个的常规流）。 2）Box垂直方向的距离有margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠 3）每个元素的margin box 的左边，会包含块border box的左边相接触（对于从左往右的格式化，否则相反），即使存在浮动也是如此 4）BFC的区域不会与float box 重叠 5）BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此 6）计算BFC的高度时，浮动元素也参与计算㈢那些情况会产生新的BFC/如何创建BFC？ ⑴根元素或其它包含它的元素 ⑵浮动 (元素的 float 不为 none) ⑶绝对定位元素 (元素的 position 为 absolute 或 fixed) ⑷行内块 inline-blocks (元素的 display: inline

CSS float的相关图文详解（一）

阅读更多关于 CSS float的相关图文详解（一）

　　大家好，作为一个刚入门的小前端，第一次写博客，很是鸡冻。由于涉猎较浅，有些知识可能说的不清楚，或者有什么错误，欢迎留言指正。我的第一篇博客写的关于css的浮动的。想必很多小伙伴特别是刚学的，对浮动有一定的迷惑，当然了，并不是所有初学者都像我一样迷迷糊糊。哈哈，废话不多说，现在谈谈我对浮动的理解，更应该说是总结吧，还是那句话，如果哪里不对，请留言指出，这也是帮助我进步。　　　　历史：　　　　浮动最开始是为了实现文字环绕的效果，也就是说浮动最开始是用来做一些文字混排效果的。　　浮动：　　元素的浮动是指设置了浮动属性的元素会脱离标准流的控制，移动到其父元素中指定位置的过程。如果元素设置了浮动，会使元素向左或向右移动，也就是说元素只能水平方向浮动，不能上下浮动，而元素设置了浮动后，周围的元素也会重新排列。一个浮动的元素会尽量向左或向右移动，直到它的外边缘碰到包含边框或另一个浮动框的边框为止。需要注意的是：浮动元素之前的元素不会受到影响，而浮动元素之后的元素会围绕它。　　图1：　　　　图1解释：这是三个自上而下排列的块级元素，块级元素独占一行，当给框1设置向右浮动时，框1会脱离文档流，不占据原来的位置，并且向右移动，直到框1的右边缘碰到包含框的右边缘　　总结：浮动元素会脱离文档流，不占据原来的位置。浮动的元素总是找离它最近的父级元素对齐

Swift5.2 语言指南(二十九)高级运算符

阅读更多关于 Swift5.2 语言指南(二十九)高级运算符

★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ ➤微信公众号：山青咏芝（shanqingyongzhi） ➤博客园地址：山青咏芝（ https://www.cnblogs.com/strengthen/ ） ➤GitHub地址： https://github.com/strengthen/LeetCode ➤原文地址： https://www.cnblogs.com/strengthen/p/10973030.html ➤如果链接不是山青咏芝的博客园地址，则可能是爬取作者的文章。 ➤原文已修改更新！强烈建议点击原文地址阅读！支持作者！支持原创！ ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ 除了 Basic Operators中描述的运算符外，Swift还提供了一些高级运算符，它们执行更复杂的值操作。这些包括您将在C和Objective-C中熟悉的所有按位和移位运算符。与C中的算术运算符不同，Swift中的算术运算符默认情况下不会溢出。溢出行为被捕获并报告为错误。要选择溢出行为，请使用默认情况下会溢出的Swift第二组算术运算符，例如溢出加法运算符（ &+ ）。所有这些溢出运算符都以“＆”号开头 & 。当定义自己的结构，类和枚举时，为这些自定义类型提供标准Swift运算符的实现可能会很有用。

web开发：javascript案例

阅读更多关于 web开发：javascript案例

一、浮动与定位复习二、小米菜单案例三、轮播图四、滚动轮播一、浮动与定位复习 - 浮动与相对定位 ```js // 1.两者均参与布局 // 2.主浮动布局, 相对布局辅助完成布局微调 // 3.相对定位布局微调不同于盒模型布局微调, 相对定位布局不影响盒子原有位置, 就不会影响兄弟盒子布局 ``` - 浮动与绝对定位 ```js // 1.只保留绝对定位布局 // 2.脱离文档流的盒子宽可以交于内容撑开 ``` <! DOCTYPE html > < html > < head > < meta charset ="UTF-8" > < title > 浮动与定位 </ title > < style > .box { /* 相对定位 */ position : relative ; /* 绝对定位 */ position : absolute ; /* 固定定位 */ position : fixed ; } </ style > < style > ul { margin : 0 ; padding : 0 ; list-style : none ; } li { float : left ; cursor : pointer ; border-bottom : 2px solid orange ; /* padding: 0 5px; */ margin : 0

订阅 Pink