文章目录
语义化标签，本地存储，视频，音频…
<!-- 语义化标签 -->
<header>头部</header>
<nav>导航</nav>
<article>
文章 页面中有一块独立的内容区域 放标签
</article>
<footer>底部</footer>
<aside>侧边栏</aside>
<section>内容</section>
<form action="">
<p>邮箱:<input type="email" required placeholder="提示文字"></p>
<p>地址：<input type="url" name="" id="" autofocus></p>
<p>日期<input type="date" name="" id=""></p>
<p>时间<input type="time" name="" id=""></p>
<p>月<input type="month" name="" id=""></p>
<p>周<input type="week" name="" id=""></p>
<p>数字<input type="number" name="" id=""></p>
<p>电话<input type="tel" name="" id=""></p>
<p>搜索<input type="search" name="" id=""></p>
<p>颜色<input type="color" name="" id=""></p>
</form>
required 必填
placeholder 提示文字
autofocus 自动获取焦点
选择器 属性 过渡 动画 平移 3d空间 边框…
E[attr] 标签名[属性]{}
E[attr="value"] 标签名[属性名=属性值]{}
E[attr^="value"] 标签名[type^='t'] 选中有type属性的，属性值以t开头的标签
E[attr$="value"] 标签名[type$='t'] 选中有type属性的，属性值以t结尾的标签
first-child
last-child
nth-child(n) even odd -n+3 3n
::before
::after
-------------
1:伪元素 content属性必不可少
2：必须依附于真正的元素 （标签+内容）
3：after显示在内容最后边 before显示内容的最前边
4：伪元素具有行内元素的特点
改变盒子在平面内的形态（位移，旋转，缩放）
transform:translate(水平移动距离，垂直移动距离)
取值: (正负都可以)
1:像素单位数值
2:百分比(参照物盒子自身的尺寸)
x轴正向为右,y轴正向为下
translate如果只给出一个值,表示x轴方向移动距离
单独设置某个方向的移动距离 translateX 和 translateY
<!DOCTYPE html>
<html>
<head>
<style>
.father{
width: 500px;
height: 300px;
margin: 100px auto;
border: 1px solid #000;
}
.son{
width: 200px;
height: 100px;
background-color: pink;
/* 过渡 */
transition: all 1s;
}
.father:hover .son{
/* transform: translate(100px,50px); */
/* 百分比：盒子自身尺寸的百分比 */
/* transform: translate(100%,50%); */
/* transform: translate(-100%,-50%); */
/* 只给出一个值 x轴移动距离 */
/* transform: translate(100px); */
transform: translateY(100px);
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
平移还在原来的文档流，平移后的位置也可以重叠。
transform:rotate(角度) 角度单位是deg
取值正负均可
取值为正,顺时针旋转
取值为负,逆时针旋转
默认原点是盒子中心
transform-origin:原点水平位置 原点垂直位置; 改变转换原点
方位名词(left,top,right,bottom,center)
像素单位数值
百分比(参照盒子自身尺寸计算)
<!DOCTYPE html>
<html>
<head>
<style>
.three {
width: 200px;
transform-origin: 0px 0px;
height: 200px;
background-color: yellowgreen;
/* 过渡 */
transition:all 1s;
/* 改变原点 */
/* transform-origin: right bottom; */
transform-origin:0px 0px;
}
div:hover{
/* 顺 */
transform: rotate(360deg);
/* 逆 */
/* transform: rotate(-360deg);*/
}
</style>
</head>
<body>
<div>我是绿盒子</div>
</body>
</html>
使用transform复合属性实现多形态转换
transform: translate(600px) rotate(360deg);
<!DOCTYPE html>
<html>
<head>
<style>
.box{
width: 1200px;
height: 50px;
border-bottom: 3px solid gray;
margin: 200px auto;
}
img{
width: 50px;
transition: all 8s;
}
.box:hover img{
/* 边走边旋转 */
transform: translate(1150px) rotate(2000deg);
/* transform: rotate(360deg) translate(600px); */
}
</style>
</head>
<body>
<div class="box">
<img src="https://i.bmp.ovh/imgs/2022/07/04/68909f552ee6d2c1.png" alt="">
</div>
</body>
</html>
transform: scale(x轴缩放倍数,y轴缩放倍数);
一般情况下,只为scale设置一个值,表示x轴和ye轴等比例缩放
transform:scale(缩放倍数)
scale值大于1 表示放大 scale值小于1 表示缩小
<!DOCTYPE html>
<html>
<head>
<style>
.box{
width: 400px;
height: 400px;
border: 1px solid;
}
.son{
width: 100px;
height: 100px;
background-color: pink;
transition: all 1s;
}
.box:hover .son{
/* width: 300px; */
/* transform: scale(x轴缩放倍数,y轴缩放倍数); */
/* transform: scale(0.5,0.5); */
transform: scale(1.5);
}
</style>
</head>
<body>
<div class="box">
<div class="son"></div>
</div>
</body>
</html>
使用background-image属性实现渐变背景效果
background-image: linear-gradient(
颜色1,颜色2
);
<!DOCTYPE html>
<html>
<head>
<style>
.box{
width: 400px;
height: 200px;
background: url(https://i.bmp.ovh/imgs/2022/07/04/db0bbf5a32f7be92.jpg) center;
border: 1px solid ;
overflow: hidden;
}
.box::before{
content:"";
display: block;
width: 400px;
height: 200px;
background-image: linear-gradient(
transparent,
rgba(0,0,0,.6)
);
transform: translateY(100%);
transition: all 1s;
}
.box:hover::before{
transform: translateY(0%);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
流程如下：
主要是平移和伪元素的使用
<!DOCTYPE html>
<html>
<style>
*{
margin:0;
padding:0;
}
.box{
width: 1366px;
height: 600px;
margin: 0 auto;
background: url(https://img1.imgtp.com/2022/07/04/22uDHSP0.jpg);
overflow: hidden;
}
.box::before,
.box::after{
content:"";
float: left;
width: 50%;
height: 600px;
background-image: url(https://i.bmp.ovh/imgs/2022/07/04/db0bbf5a32f7be92.jpg);
transition: all 1s;
}
.box::after{
background-position: right 0;
}
.box:hover::before{
transform: translate(-100%);
}
.box:hover::after{
transform: translate(100%);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
给盒子的::before和::after分别装上图片的左半和右半，设置盒子:hover，悬停时将图片移开。
可以给盒子加overflow:hidden隐藏移开时的超出部分。
空间: 从坐标轴的角度定义的, x,y,z三条坐标轴构成了一个立体空间,z轴位置与视线方向相同
transform
transform:translateX(值)
transform:translateY(值)
transform:translateZ(值)
像素单位值 百分比 正负均可
transform: translateX(100px);
transform: translateY(100px);
transform: translateZ(100px);
生活中,同一个物体,观察距离不同,视觉上有什么区别?
近大远小 近清楚 远模糊
默认情况下,为什么无法观察到Z轴位移效果?
z轴是实现方向,移动效果应该是距离的远和近,电脑屏幕都是平面,默认是无法观察远近效果
添加给父级
perspective:值
取值:像素单位数值,数值一般在800~1200
作用:空间转换时,为元素添加近大远小,近实远虚 视觉效果
透视距离 也称为视距, 就是人的眼睛到屏幕的距离i
transform:rotateZ(值)
transform:rotateX(值)
transform:rotateY(值)
左手法则
判断旋转方向,左手握住旋转轴,拇指指向正值方向,手指弯曲方向为旋转正值方向
使用animation添加动画效果
动画效果: 实现多个状态间的变化过程,动画过程可控(重复播放 ,最终画面,是否暂停)
步骤:
1:定义动画
@keyframes 动画名称{
from {}
to {}
}
@keyframes 动画名称{
0% {}
10% {}
20% {}
50% {}
100% {}
}
2:使用动画
animation:动画名称 动画花费时长;
animation: 动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时的状态
动画名称和动画时长必须赋值
取值不分先后顺序
如果右2个时间值 第一个时间表示动画时长 第二个时间表示延迟时间
border-radius
/* 一个值 表示4个角都是 相同的 */
/* border-radius: 10px; */
/* border-radius: 50%; */
/* 左上 右上 右下 左下 从左上顺时针转一圈 */
/* border-radius: 10px 20px 40px 80px; */
/* 没有的角找对角线 */
/* border-radius: 10px 40px 80px; */
border-radius:10px 30px ;
box-shadow: 水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影;
前两个属性是必须写的，其余的都可以省略
外阴影(outset) 是默认的，但是不写 inset内阴影 是需要写的
我的目标是转换表单输入，例如“100兆字节”或“1GB”，并将其转换为我可以存储在数据库中的文件大小(以千字节为单位)。目前，我有这个:defquota_convert@regex=/([0-9]+)(.*)s/@sizes=%w{kilobytemegabytegigabyte}m=self.quota.match(@regex)if@sizes.include?m[2]eval("self.quota=#{m[1]}.#{m[2]}")endend这有效，但前提是输入是倍数(“gigabytes”，而不是“gigabyte”)并且由于使用了eval看起来疯狂不安全。所以，功能正常，
我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h
我需要读入一个包含数字列表的文件。此代码读取文件并将其放入二维数组中。现在我需要获取数组中所有数字的平均值，但我需要将数组的内容更改为int。有什么想法可以将to_i方法放在哪里吗？ClassTerraindefinitializefile_name@input=IO.readlines(file_name)#readinfile@size=@input[0].to_i@land=[@size]x=1whilex 最佳答案 只需将数组映射为整数:@land边注如果你想得到一条线的平均值，你可以这样做:values=@input[x]
这道题是thisquestion的逆题.给定一个散列，每个键都有一个数组，例如{[:a,:b,:c]=>1,[:a,:b,:d]=>2,[:a,:e]=>3,[:f]=>4,}将其转换为嵌套哈希的最佳方法是什么{:a=>{:b=>{:c=>1,:d=>2},:e=>3,},:f=>4,} 最佳答案 这是一个迭代的解决方案，递归的解决方案留给读者作为练习:defconvert(h={})ret={}h.eachdo|k,v|node=retk[0..-2].each{|x|node[x]||={};node=node[x]}node[
我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时，我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有，我有一些不错的正则表达式示例代码可以使用... 最佳答案 查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.
我收到格式为的回复#我需要将其转换为哈希值(针对活跃商家)。目前我正在遍历变量并执行此操作:response.instance_variables.eachdo|r|my_hash.merge!(r.to_s.delete("@").intern=>response.instance_eval(r.to_s.delete("@")))end这有效，它将生成{:first="charlie",:last=>"kelly"},但它似乎有点hacky和不稳定。有更好的方法吗？编辑:我刚刚意识到我可以使用instance_variable_get作为该等式的第二部分，但这仍然是主要问题。
无论您是想搭建桌面端、WEB端或者移动端APP应用，HOOPSPlatform组件都可以为您提供弹性的3D集成架构，同时，由工业领域3D技术专家组成的HOOPS技术团队也能为您提供技术支持服务。如果您的客户期望有一种在多个平台（桌面/WEB/APP，而且某些客户端是“瘦”客户端）快速、方便地将数据接入到3D应用系统的解决方案，并且当访问数据时，在各个平台上的性能和用户体验保持一致，HOOPSPlatform将帮助您完成。利用HOOPSPlatform，您可以开发在任何环境下的3D基础应用架构。HOOPSPlatform可以帮您打造3D创新型产品，HOOPSSDK包含的技术有：快速且准确的CAD
点向量坐标矩阵的几何意义介绍旋转矩阵的几何含义之前，先介绍一下点向量坐标矩阵的几何含义点：在一维空间下就是一个标量，如同一条直线上，以任意某一个位置为0点，以一定的尺度间隔为1，2，3...,相反方向为-1，-2，-3...；如此就形成了一维坐标系，这时候任何一个点都可以用一个数值表示，如点p1=5，即即从原点出发沿着x轴正方向移动5个尺度；点p2=-3，负方向移动3个尺度； 在一维坐标系上过原点做垂直于一维坐标系的直线，则形成了二维坐标系，此时描述一个点需要两个数值来表示点p3=（3，2），即从原点出发沿着x轴正方向移动3个尺度，在此基础上沿着y轴正方向移动两个尺度的位置就是点p3。
本教程将在Unity3D中混合Optitrack与数据手套的数据流，在人体运动的基础上，添加双手手指部分的运动。双手手背的角度仍由Optitrack提供，数据手套提供双手手指的角度。 01 客户端软件分别安装MotiveBody与MotionVenus并校准人体与数据手套。MotiveBodyMotionVenus数据手套使用、校准流程参照：https://gitee.com/foheart_1/foheart-h1-data-summary.git02 数据转发打开MotiveBody软件的Streaming，开始向Unity3D广播数据；MotionVenus中设置->选项选择Unit
Unity自动旋转动画1.开门需要门把手先动,门再动2.关门需要门先动,门把手再动3.中途播放过程中不可以再次进行操作觉得太复杂?查看我的文章开关门简易进阶版效果:如果这个门可以直接打开的话,就不需要放置"门把手"如果门把手还有钥匙需要旋转,那就可以把钥匙放在门把手的"门把手",理论上是可以无限套娃的可调整参数有:角度,反向,轴向,速度运行时点击Test进行测试自己写的代码比较垃圾,命名与结构比较拉,高手轻点喷,新手有类似的需求可以拿去做参考上代码usingSystem.Collections;usingSystem.Collections.Generic;usingUnityEngine;u