input [type=search] 搜索框去掉默认边框和旁边的小图标

input[type="search"]{-webkit-appearance:none;} input::-webkit-search-cancel-button {display: none;} http://www.html-5.cn/WebApp/css/10243.html ———————————————— 版权声明:本文为CSDN博主「LYC_2011_ACM」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。 原文链接:https://blog.csdn.net/LYC_2011_ACM/article/details/9149071

推荐 10 个很“哇塞”的Web“资源”给前端工友,收藏等于学会~

毋庸置疑:善用在线资源和工具可以加速开发,提高质量、让生活更 Chill 😎~ 本篇为前端工友们带来 10 个棒棒哒免费的 Web 资源,收藏⭐等于学会 (๑•̀ㅂ•́)و✧ 1. Undraw 如果你的网站需要免费的 SVG 插图,一定不要错过 Undraw 这个网站! SVG 插图资源是海量的,本瓜下拉了十几、二十次都拉不完(当然,搜索功能也是有的);并且,你还可以自定义插图的配色,简直不要太 NICE~ 海量资源,支持搜索🔍 随意更改配色🌈   2. Error 404 不知道你一般会去哪找 404 页面素材~ 现在你又多了一个选项:Error 404 酷酷酷~ 把本瓜一个切图仔的审美都拉上来了👆 3. Squoosh 压缩图片!! 对比 tinypng 有【更好的】压缩效果: tinypng 压缩 Squoosh 压缩   压缩效果:前者是 80%,后者是 95%;最终效果也不错~👍 Why not try ?   4. DevDocs DevDocs 见名思意,是 Web 开发技术文档,是非常不错的学习手册! 别的不说,就这 UI 本瓜就挺喜欢!还支持添加常用技术文档、更换主题等~   5. iHateRegex 如果你讨厌正则,那么一定不要错过这个网站?(ˉ▽ˉ;)… 不仅如此,还有细节图示!可恶,做的真好啊 ╮(╯▽╰)╭   6. Carbon 经常有人问,“这种好看的代码片段如何生成”,答案就在 Carbon! 你可以生成各种主题、各种语言的代码片段,并导出为图片或复制到其它平台,真滴好用👌 舒服了~~   7. Dribbble 寻找网页设计灵感,认准 Dribbble!!!     看到人家的管理后台设计,就想马上回去把自家的管理后台“撕”了🐶 8. Animista Css 动画,复制代码就能用!免安装,它不香嘛?   9. Shape […]

Web 开发者应该避免的 5 个 CSS 的做法

原文地址:5 CSS Practices To Avoid as a Web Developer 原文作者:Alexey Shepelev 译文出自:掘金翻译计划 本文永久链接:github.com/xitu/gold-m… 译者:霜羽 Hoarfroster 校对者:KimYang、Chorer 有人认为 CSS 很难学习,觉得 CSS 有很多的坑,甚至还有一点儿魔幻,难以理解,很容易会搬起石头砸自己的脚。对此我感到难过,毕竟,我可不这么认为。 在考虑了可以做什么之后,我提出了五个我挺讨厌的 CSS 的做法,希望帮助大家避免这些习惯。 1. 设置内外边距,然后将其重置 我经常看到人们为所有元素设置内外边距,然后为第一个元素或者最后一个元素清除刚刚写的边距。我不知道为什么你非要在一条规则就可以解决问题的情况下写两条规则。一次为所有必需的元素设置边距明显容易得多! 为简化 CSS,你可以选用以下几种选择器:nth-child 或 nth-of-type 选择器,还有 :not() 伪类或相邻元素组合器(即 +)。 不要这么写:

你可以这么写:

  或这样写:

或者用:

  2. 为 position 为 fixed 或 absolute 的元素添加 display:block 你知道吗?其实你无需为 position 为 fixed 或 absolute 的元素添加 display:block,因为这是默认发生的。 另外,如果你在这些元素上使用 inline-* 值,它们将按以下方式更改: inline、inline-block -> block inline-flex -> flex inline-grid -> grid inline-table -> table 因此,对于 position 为 fixed 或 absolute 的元素,你只需在要使用 flex 布局或者 grid 布局的时候设置 […]

CSS 单位 2

CSS 有几个不同的单位用于表示长度。 一些设置 CSS 长度的属性有 width, margin, padding, font-size, border-width, 等。 长度有一个数字和单位组成如 10px, 2em, 等。 数字与单位之间不能出现空格。如果长度值为 0,则可以省略单位。 对于一些 CSS 属性,长度可以是负数。 有两种类型的长度单位:相对和绝对。 浏览器支持 下表中的数字表示支持该长度单位的最低浏览器版本。 长度单位 Chrome IE Firefox Safari Opera em, ex, %, px, cm, mm, in, pt, pc 1.0 3.0 1.0 1.0 3.5 ch 27.0 9.0 1.0 7.0 20.0 rem 4.0 9.0 3.6 4.1 11.6 vh, vw 20.0 9.0 19.0 6.0 20.0 vmin 20.0 9.0* 19.0 6.0 20.0 vmax 26.0 不支持 19.0 不支持 20.0 注意: Internet Explorer 9 通过不标准的名称 vm 来支持 vmin 。 相对长度 相对长度单位指定了一个长度相对于另一个长度的属性。对于不同的设备相对长度更适用。   单位 描述 在线实例 […]

CSS cubic-bezier() 函数

实例 从开始到结束的不同速度过渡效果:

定义与用法 cubic-bezier() 函数定义了一个贝塞尔曲线(Cubic Bezier)。 贝塞尔曲线曲线由四个点 P0,P1,P2 和 P3 定义。P0 和 P3 是曲线的起点和终点。P0是(0,0)并且表示初始时间和初始状态,P3是(1,1)并且表示最终时间和最终状态。 从上图我们需要知道的是 cubic-bezier 的取值范围:

我们需要关注的是 P1 和 P2 两点的取值,而其中 X 轴的取值范围是 0 到 1,当取值超出范围时 cubic-bezier 将失效;Y 轴的取值没有规定,当然也毋须过大。 最直接的理解是,将以一条直线放在范围只有 1 的坐标轴中,并从中间拿出两个点来拉扯(X 轴的取值区间是 [0, 1],Y 轴任意),最后形成的曲线就是动画的速度曲线。 cubic-bezier() 可用于 animation-timing-function 和 transition-timing-function 属性。 支持版本:CSS3 浏览器支持 表格中的数字表示支持该函数的第一个浏览器版本号。 函数 cubic-bezier() 4.0 10.0 4.0 3.1 10.5 CSS 语法

值 描述 x1,y1,x2,y2 必需。数字值,x1 和 x2 需要是 0 到 1 的数字。   实例

  from:https://www.runoob.com/cssref/func-cubic-bezier.html

CSS calc() 函数

实例 使用 calc() 函数计算 <div> 元素的宽度:

定义与用法 calc() 函数用于动态计算长度值。 需要注意的是,运算符前后都需要保留一个空格,例如:width: calc(100% – 10px); 任何长度值都可以使用calc()函数进行计算; calc()函数支持 "+", "-", "*", "/" 运算; calc()函数使用标准的数学运算优先级规则; 支持版本:CSS3 浏览器支持 表格中的数字表示支持该函数的第一个浏览器版本号。 "webkit" 或 "moz" 或 "o" 指定的数字为支持该函数的第一个版本号前缀。 函数 calc() 26.0 19.0 -webkit- 9.0 16.0 4.0 -moz- 7.0 6.0 -webkit- 15.0 CSS 语法

值 描述 expression 必须,一个数学表达式,结果将采用运算后的返回值。   from:https://www.runoob.com/cssref/func-calc.html

Electron

使用 JavaScript,HTML 和 CSS 构建跨平台的桌面应用程序。 Electron提供了丰富的本地(操作系统)的API,使你能够使用纯JavaScript来创建桌面应用程序。与其它各种的Node.js运行时不同的是Electron专注于桌面应用程序而不是Web服务器。   比你想象的更简单 如果你可以建一个网站,你就可以建一个桌面应用程序。 Electron 是一个使用 JavaScript, HTML 和 CSS 等 Web 技术创建原生程序的框架,它负责比较难搞的部分,你只需把精力放在你的应用的核心上即可。 Web 技术 Electron 基于 Chromium 和 Node.js, 让你可以使用 HTML, CSS 和 JavaScript 构建应用。 开源 Electron 是一个由 GitHub 及众多贡献者组成的活跃社区共同维护的开源项目。 跨平台 Electron 兼容 Mac、Windows 和 Linux,可以构建出三个平台的应用程序。

Blockquote

Blockquote 对象 Blockquote 对象代表着一个 HTML 引用(blockquote)块元素。 <blockquote> 标签定义摘自另一个源的块引用。 一个 <blockquote> 元素的内容通常展现为一个左、右两边进行缩进的段落。 在 HTML 文档中的每一个 <blockquote> 标签创建时,都会创建一个 Blockquote 对象。   from:

CSS 奇思妙想边框动画

今天逛博客网站 — shoptalkshow,看到这样一个界面,非常有意思: 觉得它的风格很独特,尤其是其中一些边框。 嘿嘿,所以来一篇边框特辑,看看运用 CSS,可以在边框上整些什么花样。 border 属性 谈到边框,首先会想到 border,我们最常用的莫过于 solid,dashed,上图中便出现了 dashed。 除了最常见的 solid,dashed,CSS border 还支持 none,hidden, dotted, double, groove, ridge, inset, outset 等样式。除去 none,hidden,看看所有原生支持的 border 的样式: 基础的就这些,如果希望实现一个其他样式的边框,或者给边框加上动画,那就需要配合一些其他属性,或是脑洞大开。OK,一起来看看一些额外的有意思的边框。 边框长度变化 先来个比较简单的,实现一个类似这样的边框效果: 这里其实是借用了元素的两个伪元素。两个伪元素分别只设置上、左边框,下、右边框,通过 hover 时改变两个伪元素的高宽即可。非常好理解。

CodePen Demo — width border animation 接下来,会开始加深一些难度。 虚线边框动画 使用 dashed 关键字,可以方便的创建虚线边框。

当然,我们的目的是让边框能够动起来。使用 dashed 关键字是没有办法的。但是实现虚线的方式在 CSS 中有很多种,譬如渐变就是一种很好的方式:

看看,使用渐变模拟的虚线如下: 好,渐变支持多重渐变,我们把容器的 4 个边都用渐变表示即可:

效果如下: OK,至此,我们的虚线边框动画其实算是完成了一大半了。虽然 border-style: dashed 不支持动画,但是渐变支持呀。我们给上述 div 再加上一个 hover 效果,hover 的时候新增一个 animation 动画,改变元素的 background-position 即可。

OK,看看效果,hover 上去的时候,边框就能动起来,因为整个动画是首尾相连的,无限循环的动画看起来就像是虚线边框在一直运动,这算是一个小小的障眼法或者小技巧: 这里还有另外一个小技巧,如果我们希望虚线边框动画是从其他边框,过渡到虚线边框,再行进动画。完全由渐变来模拟也是可以的,如果想节省一些代码,使用 border 会更快一些,譬如这样:

由于 border 和 background 在盒子模型上位置的差异,视觉上会有一个很明显的错位的感觉: 要想解决这个问题,我们可以把 border 替换成 outline,因为 outline […]

移动端:div在手机页面上随意拖动/拖拽

为了兼容PC和移动端,想出了以下办法: 拖动时候用到的三个事件: mousedown 、 mousemove 、 mouseup 在移动端都不起任何作用。毕竟移动端是没有鼠标的,查资料后发现,在移动端与之相对应的分别是: touchstart 、 touchmove 、 touchend 事件。还有一点要注意的是在PC端获取当前鼠标的坐标是: event.clientX 和 event.clientY ,在移动端获取坐标位置则是: event.touches[0].clientX 和 event.touches[0].clientY 。下面就来说说怎么实现这个效果吧,先看一下效果: PC端 : 移动端 : 先来分析一个拖动的流程,以PC端为例,首先是鼠标按下( mousedown 事件),然后移动( mousemove 事件),最后释放鼠标( mouseup 事件),首先要设置一个变量记录鼠标是否按下,在鼠标按下的时候,我们做一个标记,然后需要记录一下鼠标当前的坐标,还有这个div当前的偏移量,当鼠标开始移动的时候,记录下鼠标当前的坐标,用鼠标当前的坐标减去鼠标按下时的坐标再加上鼠标按下时div的偏移量就是现在div距离父辈元素的距离,当鼠标释放的时候将标记改为鼠标已经释放。下面来看一下代码:

然后在将事件加入到这个div中即可,下面再来看一个在移动端需要做些什么,首先是事件不同,只需要在添加移动端的 touchatart 、 touchmove 、 touchend 就可以了,还有一个不同的时移动端获取坐标是 event.touches[0].clientX 和 event.touches[0].clientY ,这也很简单,只要加上判断就可以了,如果是PC端就使用event,如果是移动端就使用 event.touches :

还有一点要注意,在移动端拖动div的时候移动端的页面会自动产生滑动效果,所以还需要在 touchmove 的是给页面添加一个阻止默认事件的函数。 下面是整个代码,可以在Chrome下模拟移动端测试,点击这里查看:

  from:https://www.cnblogs.com/joyco773/p/6519668.html

webview调用ios或者安卓的方法(内嵌h5页面调用app原生方法)

1.配合使用调用app原生的方法(h5页面不需要回调和数据) 实例1

  实例2

  2.配合使用调用app原生的方法(h5页面需要回调和数据) // 从App获取UUID(手机唯一标识)

标红字段为调用的app端定义的方法名,需要app端定义方法配合   from:https://www.cnblogs.com/wendyAndJken/p/9318501.html