css
关注
分享
扫一扫
yunchong_zhao
这人比较懒，不喜欢写简介
展开
-
ios中input输入框 设置box-shadow失效问题
CSS 属性被用于按照 浏览器所在的操作系统所用主题，以平台本地的样式显示元素。如果经常做h5童鞋会碰见各种各样的问题。关注我 持续更新 前端知识。原创 2023-03-02 20:11:34 · 106 阅读 · 0 评论 -
less 循环遍历生成有规律的类名（m-l-1, p-l-2等）
这个是我参考uview中有内置类名，当你想设置外边距为15px的时候 只需要给元素加上 u-margin-left-15。后来新项目用的是less 就去官网上找到类似的用法。然后就可以直接在元素中使用了。关注我 持续更新 前端知识。原创 2023-01-05 10:15:50 · 641 阅读 · 4 评论 -
谷歌浏览器注入的样式表 （更改了我网页的样式）
好像是那个扩展程序开启之后，修改了我浏览器的样式，这个就很烦人，其实出现这个问题就是我起的样式类名，刚好和人家的一样，所以导致我的被重写了！我想着是不是最近我安装了什么东西，好像确实安装了一个扩展程序，我把那个扩展程序关掉之后，样式就恢复正常了！突然有一天哈，我的网页莫名其名样式乱了，我检查样式中发现，多了一个注入的样式表，我还找不到位置所在！我把网页放到火狐中，发现是正常的！这个时候猜测就是谷歌浏览器的问题了！后面我为了重新启用我的插件，只好把类名改了，这个太难受了！关注我 持续更新前端知识。原创 2022-12-28 15:12:41 · 1043 阅读 · 2 评论 -
禁止移动端h5长按下载图片（笔记）
ios好像有的默认就不支持 长按下载图片1.原创 2022-12-08 13:56:05 · 833 阅读 · 0 评论 -
css 实现渐变色字体
css实现渐变色字体原创 2022-06-23 11:01:46 · 393 阅读 · 0 评论 -
ios 0.5px出现边框丢失的问题
ios 0.5px边框丢失问题原创 2022-06-17 15:40:08 · 1104 阅读 · 0 评论 -
使用css渐变色。实现动态进度条效果
基本上现在的ui框架都有自己的进度条组件封装 但是有的时候我们需要自己定制的时候 还是比较麻烦比如下面的这个效果双色进度条 贴合 效果。可能有点业务会用到吧就是使用渐变色和 动画的效果实现, 第二个进度条动画延迟 一点就可以和第一个贴在一起了animation-delay: .1s; 这个可能童鞋用的比较少// 还有就是渐变色的描述background-image: linear-gradient(45deg, #FF4B00 25%, transparent 25%, transpare原创 2022-04-13 10:14:48 · 1645 阅读 · 4 评论 -
column布局 内容折断的处理
会出现这种折断的 情况很难受。这个时候 需要一个样式进行处理即可给子元素加上这个即可 然后刷新页面break-inside: avoid;page-break-inside: avoid这样就可以了 刷新页面就正常了。原创 2022-03-18 15:30:07 · 462 阅读 · 0 评论 -
css制作一个简单的上下跳动 动画
如果只是简单的几个小动画 确实没必要引入一个动画库 去做 除非你的项目中很需要各种各样的动画<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-wi.原创 2022-01-20 20:57:44 · 2103 阅读 · 0 评论 -
css absolute绝对定位 让 top 和bottom 同时生效
只要你的元素没有设置高度就可以 实现。可以用来处理一些响应式的页面处理<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initia.原创 2022-01-17 17:05:40 · 843 阅读 · 0 评论 -
css 实现最后一行两侧对齐，考虑ios text-align-last 不支持iOS
经常可能要做到这种展示效果。用来标注个中标签介绍啥的但是 会出现某一行。文本过长的话 就是这样的效果 看起来很难受因为使用的弹性布局 随便左侧我们固定的高度。但是还是会往左边进行挤压导致很难受这个时候 我们需要给右侧的元素加上一个。flex: 1. 让他自适应 就可以了.desc { flex: 1; }其实文本两侧对齐通过一个c s s属性即可实现。text-align-last: justify;但是吧。这个属性 ios 又不支持。这个就又不舒服了我们也只能通过 空.原创 2021-12-29 18:26:51 · 3555 阅读 · 7 评论 -
css 实现多行文本展开收起操作 兼容ios。 以及vue实现 两种方式
多行文本的省略和隐藏。其实在ios上面还是会有兼容性问题 惨不忍睹，做不到 在文本末尾实现 文字环绕 展开的那种方式 只能通过css的其他的方式来处理，这个展开的问题 本来就是前端处理中的一个难题。 哎 想在短时间处理和各个平台的兼容性还是不容易。 在这个做个笔记。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA原创 2021-12-25 14:56:00 · 2445 阅读 · 2 评论 -
js 判断是否是iPhone X， 针对iphonex 单独处理一些样式
因为iphonex 底部有一个横杠。导致和其他的手机底部样式有点不同，如果你的网站底部要做一些底部悬浮的效果的话，那么就得注意下 这个iphonex的情况，其实本来是在安卓上是正常的呢，其他的一些iphone也是正常的呢可以根据i phonex设备进行单独处理const isIphoneX = () => { return !!(window.navigator.userAgent.match(/iphone/i) && window.screen.h原创 2021-12-10 11:35:53 · 1120 阅读 · 0 评论 -
iOS唤起记住密码的数字键盘，输入的时候发生闪烁的问题
主要是数字键盘下面贴着type=password类型的密码输入框，浏览器记住密码，每次在数字键盘输入的时候，会自动尝试填充下 导致 会有闪烁问题的发生，给用户体验也不好很多网友也说了，在数字键盘下面写一个“空”(用户看不见)的输入框记住如果是vu e的话。 设置v-show 不显示是不起作用的<input class="clearFlicker"/>// 清除ios闪烁效果 .clearFlicker { height: 0; min-height: 0;原创 2021-12-10 10:58:13 · 2739 阅读 · 0 评论 -
IOS长按图片 无法保存，苹果safari 处理长按图片保存问题
我们在苹果手机上会发现，我们在微信的内置浏览器打开是可以长按图片保存的，但是safari浏览器 有的图片是不能保存的可能很多网友会看到一些博客 上说开启一个 css属性就可以了在图片上。加上一个 ，img { -webkit-touch-callout： default;}这个属性其实最早也是在ios浏览器上实现的，最后被webkit内核的浏览器引进了，因为长按一个元素会显示出这个元素的一些信息，所以被ios浏览器默认给禁止了，你可以选择性开启哈其实ios安全性上考虑的确实全面哈d原创 2021-12-03 20:40:06 · 13418 阅读 · 1 评论 -
使用html2canvas 生成h5项目中需要的海报效果，uniapp 生成h5海报
分享中有一个业务功能就是海报分享，把当前页面的数据整理下 然后生成一个图片让用户进行保存 然后发给其他的用户 扫码进入活动中，这个也是推广的一种形式吧对当前页面进行截图保存转换图片。那么就需要我们今天的主人公。html2canvas。首先进行说明，这个html2canvas也说了 毕竟只是对页面的进行截图 并不是达到原来的看到的效果那样，会有点模糊The script allows you to take “screenshots” of webpages or parts of it, directl原创 2021-12-03 19:47:37 · 1165 阅读 · 1 评论 -
设置弹性布局，中间内容自适应宽度
其实这样的布局又叫做双飞翼布局，两侧不变中间在动在没有弹性布局的时候，就是通过浮动来实现的有了弹性布局之后 就可以快速实现了<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content原创 2021-11-22 21:47:54 · 652 阅读 · 0 评论 -
js实现控制元素左右滚动一段距离，小demo
废话少说 直接看效果我们在做一个横向滚动的时候，希望用户点击靠左边或者靠右边的时候，元素自动会往中间滚动 这个效果 ????直接上代码。 自己琢磨 哈哈哈<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name=原创 2021-11-17 20:25:01 · 2787 阅读 · 0 评论 -
uview 扩展iconfont 图标库，中间碰见的一个小坑
中间怎么下载怎么使用 我就不说了 官网说的很清楚了https://www.uviewui.com/guide/customIcon.html其实官网的文档中描述的是 通过使用base64的形式引入的，你也可以把下载下来的图标转换成base64的格式 然后引入进去有个在线转换的网站https://transfonter.org/。 https://transfonter.org/主要是 引入字体的那里有个小问题 就是 他那个字体必须的是相对项目的根路径 否则就会抱找不到我的项目目录是/s原创 2021-11-04 17:02:57 · 1891 阅读 · 1 评论 -
后端接口返回一个图片地址，前端h5，pc浏览器，下载图片文件，而不是预览
很早之前就知道a标签上加一个 download ，然后设置href 为文件的路径但是这个还是只是限于你的文件在你本服务器上，而且还是相对地址的，或者是本地资源的时候而另一种情况就是。后端只是返回一个图片的网络地址 ，然后根据这个地址让你去下载但是再通过上面的那个方式 下载的时候，会发现 会变成预览的情况，点击就跳转这个时候参考一篇博客的想法1. 将图片url转换成canvasvar url = "https://gimg2.baidu.com/image_search/src=http%3A原创 2021-11-02 20:00:06 · 3025 阅读 · 4 评论 -
css实现 快速定位父元素下最后面的几个子元素，匹配选择最后几个子元素
这样的业务还是会有的 特别的一些动态数据，因为前面的几个数量不定，但是后面几个是固定的这个时候，就需要我们能不能固定选中后面几个元素了比如。选中后面三个元素。 其实我们可以通过css来实现了 很简单的 核心代码就是nth-last-child(n) 这个伪类选择器的运用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="原创 2021-10-30 16:42:25 · 2256 阅读 · 0 评论 -
h5，移动端浏览器通过css 实现页面，元素横向滚动
横向滚动 在业务中还是比较常见的，比如我们的有些导航就是横向滚动的。横向滚动其实通过css就是简单的快速实现核心的代码就是这两行overflow-x: scroll; 开启滚动white-space: nowrap; 禁止换行ul { list-style: none; overflow-x: scroll; white-space: nowrap; padding: 15px;原创 2021-10-27 21:21:27 · 1596 阅读 · 4 评论 -
vue项目，移动端浏览器 适配，你还在用rem吗？
最近新开了一个项目使用 vue做一h5项目 ，我就拿vue3 来练练手。其实做h5首先避不开适配的问题，其实我首先想到的就是 rem 适配也想到了 Viewport 布局 但是求稳 还是选择了 rem 适配 可能人吧 总是害怕去接受新的事物吧！但是就开始下手写的时候，想起来了之前的layui 事件，让我毅然决然 还是选择了 viewport 布局， 毕竟这个现在浏览器支持都很好 了，是时候 更新换代了，一直活在过去的技术也不行。本来选择vue2的我。也是换到了vue3使用viewport的话 推荐原创 2021-10-22 21:03:39 · 1374 阅读 · 5 评论 -
前端实现 页面滚动到一定位置，元素浮动在固定位置上， 滚动定位
先来看下效果哈， 实际上这样的效果还是不少的，就是 用户进入页面的时候可能是正常的流式布局， 但滚动往下的时候有些元素就固定在某个位置。1. 通过粘性定位实现其实在布局中有一个 定位就是 粘性定位 sticky 可以实现这个样式关于粘性定位的概念 我就不在这里一一赘述了 因为之前我有两篇博客进行讲解过了https://blog.csdn.net/yunchong_zhao/article/details/114025173https://blog.csdn.net/yunchong_zhao/原创 2021-10-21 21:37:48 · 4987 阅读 · 2 评论 -
设置弹性布局的三列两侧对齐，最后一行样式的处理
我们在实际的业务中，经常会做比如下面的情况三列，如果我们不用弹性布局 用传统的布局来解决的话，浮动，然后就是设置元素的外边距，但是不管你怎么设置总会差点意思，不是这边多了就那边有换行很难受。这个时候 我们会选择弹性布局，会让我们比较舒服点吧然后两侧对齐div{ display: flex; justify-content: space-between;}但这个会有一个问题就是 最后一行不足三个的时候 ， 会搞一个左右两侧各一个， 这个让我们很头疼.parent {原创 2021-10-18 17:36:36 · 1191 阅读 · 2 评论 -
css 实现单行文本两侧对齐
相信这样的业务还是很容易碰见的。首先小伙伴会想到的就是 text-align justify但这个东西加上之后会发现没什么效果。也并不是完全没有效果 只是 他是会在多行的的文本的时候会出来 效果这个时候我们可以采用另一个属性样式。text-allign-lastCSS 属性 text-align-last 描述的是一段文本中最后一行在被强制换行之前的对齐规则。我们加上之后看下效果div p { width: 100px; text-align-last: justify;}.原创 2021-09-25 14:38:06 · 388 阅读 · 0 评论 -
sass,scss中定义变量和函数的方式
scss中定义变量的格式是$变量名 ： 数值 ;举例说明$background : #ededed;$border-base : #dbdbdb;$light-background : #f1f1f1;$danger : #fb5250;$base : #111111;$secondary : #999999;$primary : #006fff;函数的格式是：@function 函数名(参数) {@return 变量表达式;}举例说明@function doubleWid原创 2021-09-18 15:29:01 · 3152 阅读 · 0 评论 -
taro-ui 中引入和使用 iconfont图标库
taro-ui 是 taro的 ui库，虽然有自带的图标，但是吧 可能有些需求的图标还是没有的，需要我们自己来搞，那么inconfont图标库就是一个不错的选择去图标库中找几个图标下载到本地首先你的项目得支持引入本地静态资源，这个好像是默认配好了 不用管在src文件夹下 创建一个 assets 文件夹 存放静态资源然后就是。css 和 字体 fonts分别 把我们刚才下载下来的那个 文件解压缩 然后放到指定的文件夹中（iconfonts.css 放到 css文件夹中。字体的文件 放到字体文件原创 2021-09-12 20:05:29 · 2632 阅读 · 0 评论 -
taro2.* 中引入 taro-ui ui库，react版本的ui库
其实 有一个好的ui库。无疑会给我们工作做到事半功倍的效果。3.*版本的taro出来之后，但是由于taro-ui的3.*版本还没出来 现在最新稳定版本的还是。2.3.4今天讲解的就是 2.3.4在项目中安装yarn add taro-ui --save现在默认安装的版本就是 2.3.4的然后就是在全局的样式文件中，引入taro-ui的样式库在app.scss 中 (如果你选择的scss样式库的话)@import "~taro-ui/dist/style/index.scss";然后原创 2021-09-11 18:51:59 · 1143 阅读 · 0 评论 -
css中让文本显示到 元素的底部
div { height: 100px; width: 200px; border: 1px solid #f00; display: table-cell; vertical-align: bottom; }<div> hello world <span>1111</span> </..原创 2021-08-25 16:34:50 · 5372 阅读 · 0 评论 -
react中在元素中插入多个类名, 多个状态之间的类名切换等
这个要是对vue的童鞋还是应该很简单的吧在react的初学者中，这个还得稍微简单思考下呢在正常的元素中。想使用多个类名那么之际在class 中书写就行了<div class="test test1 demo2"></div>那么div 这个元素就会有 test. test1 demo2 这三个类名了其实如果只是简单的元素 我们在react中当然也可以这样做了不过是吧 class 换成className<div className="test test1 demo原创 2021-08-24 13:35:42 · 1258 阅读 · 0 评论 -
css 实现梯形的效果，以及梯形在实际项目中运用
有时候，有些简单的图形，我们前端也可以自己画出来，省的ui在给我们切图了，毕竟能用代码实现的就用代码去实现了，那样性能也会好点呢。毕竟几行代码能实现的再用图片其实没必要的。其实有一个就是实现梯形的效果其实这个看似简单的吧，但也需要你会制作三角形， 然后将三角形通过位移或者定位来移动到 一个长方形的两侧组成： 中间一个长方形， 两侧有两个三角形，依次放到指定位置 <style> div { width: 200px; h原创 2021-08-21 09:01:46 · 3389 阅读 · 0 评论 -
pc端鼠标长按 事件
我们这个 可以通过 mousedown 和 mouseup 进行模拟呢只要 按住鼠标的时间超过 一秒 就算是长按了<div id="test"></div> <script> var timer = null, test = document.querySelector('#test'); test.addEventListener('mousedown', function() { timer = setT原创 2021-07-23 15:36:18 · 1488 阅读 · 0 评论 -
粘性定位，子元素在父元素内部实现 固定定位
有这样的场景，其实还是用的比较多的，就是我们的元素可能是相对于父元素 是固定的，特别是滚动的情况下， 希望 子元素 一直在父元素的某个位置 保持不动这个时候就用到了 粘性定位 position: sticky;有这样的一个效果就是 子元素在父元素的顶部，当父元滚动的时候 照样还是停留在 顶部div { height: 2000px; background-color: #f00; position: relative; margin-top: 50px; } .c原创 2021-07-18 14:38:51 · 3192 阅读 · 0 评论 -
前端CSS布局中什么是BFC，初级前端开发人员还是简单了解下比较好！浅谈BFC块格式化上下文
上周从公司离职了，然后开启了求职之路。 碰见了一家不错的公司，说实话还是比较心动的。但面试的时候，关于框架的东西都不问，怼着基础的东西问的很"深入"，把看了两天的vue3源码的我给搞蒙了其中两道就是 关于css中的BFC规范，不过在这里再扯一下 有几个问题很有意思css属性的 rgba 是css3 新增的属性吗？ 我回答错了， 答案是 是css3的东西js 和 flash的通过那个方法进行交互的 原谅我没有用过flash 这道题我答不上来还有就是 如果文档...原创 2021-03-24 16:15:51 · 269 阅读 · 0 评论 -
前端一套代码同时在 pc 和 手机端展示不同的效果，思路分析， css媒体查询
如果你在公司中碰见这样的需求，用过bootstrap的童鞋 肯定上来会想到 boot如果一套代码 在 同一个域名下 同时能在手机和移动端运行 让客户看到一样的内容 不一样的效果1. 如果页面复杂的话一套代码两个样式 判断用户在那种设备中打开的然后跳转到指定的 网站类型上就像百度那样 有两个网站m.baidu.com // 是手机站www.baidu.com // 是pc站2. 如果页面简单地话 可以使用 css3 的媒体查询<me...原创 2021-02-25 14:48:42 · 4782 阅读 · 0 评论 -
position:sticky； 粘性定位 入门级别
说实在用到粘性定位的地方肯定有 但是不多， 在讲解之前小看个小效果就上面图中的那种效果 让你写 如果用js的话怎么写就是判断根据用户滚动的高度 把元素的位置移动一下 但是 js代码写起来是不是 好像还是有点多的吧但是使用粘性定位就很简单了 粘性定位可以用在类似上面的那种业务需求中在每一个元素上面 加两行样式代码就搞定了position: sticky;top: 0;好了步入正题了粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后...原创 2021-02-24 15:56:38 · 1172 阅读 · 0 评论 -
bootstrap4 控制元素在不同尺寸的设备中 显示、隐藏
这几天接到了一个响应式项目 要求同一套代码能在pc和手机端 展示 不同的效果很简单的一个项目 但是pc上面显示的东西会比较多 但是移动端就很简单了 这个时候就需要隐藏一些元素了首先boot4 中 隐藏和显示 元素是 d-none / d-block根据不同尺寸 可以设置d-sm-none 在小屏幕及以上屏幕都隐藏d-md-none 在中屏幕和大屏幕上都隐藏d-lg-none 只在大屏幕的时候隐藏同样d-sm-block 在...原创 2021-02-24 14:05:34 · 5381 阅读 · 3 评论 -
css实现遮罩层高斯模糊，毛玻璃效果
突然设计搞了一种想法，当遮罩层谈起来的时候，能不能搞一种模糊让用户看不清遮罩层下面的内容然后ui小姐姐说，要是做不出来 就不做了，我说能做出来，怎么能让ui小姐姐看不起呢先看下 加模糊滤镜之前的效果然后加上模糊滤镜之后的效果呢是不是很不一样呢其实滤镜这个东西很多前端小伙伴都知道这个东西filter 属性 则是 blur 单位是 px 其实上面的我设置了 5px 都很模糊了都知道这个东西 但是 一次性就加成功 可能有点困难哈<section>...原创 2021-01-25 17:57:12 · 4570 阅读 · 3 评论 -
css 实现 图片左右滑动查看的效果
其实除了除了轮播图的那种图片效果外，图片滑动查看的效果 在网站中引用也是很多的，特别是在移动端，pc端的也有 就是我们是通过鼠标点击滑动的效果我们先来看下效果吧这样的效果 其实没必要用到js 直接用纯css就能实现思路大概是 父元素 包括一个子元素 然后 如果高度和子元素高度不一致的话 还得再竖向方向上设置一个 hidden然后里面 子元素 要设置一个比较长的 宽度父元素 设置 overflow-x : auto; 就可以了我们看下代码实现吧dom布局...原创 2021-01-21 10:23:20 · 13843 阅读 · 9 评论