我的日志-幸凡学习网

css3 新特性 calc 学习2023/8/19 11:41:52

Calc是CSS3中的一个非常有用的新特性，它允许开发者在样式中使用数学运算，从而更灵活、更高效地控制布局。这篇文章将介绍Calc的语法以及如何在实际项目中使用它。语法Calc函数的语法非常简单，它只有一个参数，表示要进行数学计算的表达式。这个表达式可以包含数字、运算符、变量以及测量单位。具体的语法如下：calc(expression)表达式可以是一个简单的数学运算，比如：width: calc(100% - 50px);这个例子中，我们用100%减去50像素，得到一个动态的宽度。当屏幕大小变化时，这个宽度也会自动调整。除了加减乘除这些基本的数学运算符，Cal...未完，继续阅读→

css3 calc

阅读(711)条

非常详细的Vue安装与配置教程2023/4/22 14:05:49

Vue web前端三大主流框架之一,是一套用于构建用户界面的渐进式框架,下面这篇文章主要给大家介绍了关于Vue安装与配置教程的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下一、下载和安装Vue官网下载地址Download | Node.js选择适合自己的版本，推荐LTS，长久稳定版本。我这里选择的是Windows Installer(.msi) 64-bit下载好后，双击下载的安装包。点next勾选I accept............，点next 这里建议更改为自己想要的的安装目录，然后点next（可以自己先建好安装目录，我这里是提前建好的一个目录：E:\J...未完，继续阅读→

Vue 教程 node

阅读(1569)条

用css修改svg图标的的颜色2022/8/9 9:34:36

方式一：利用drop-shadow给icon加样式 (利用原图标的阴影区域，同时将原图标移动超过之前父元素范围)filter: drop-shadow(red 80px 0); transform: translateX(-80px); 给父元素加样式（父元素超范围隐藏，正好把原图标的隐藏掉，显示阴影区域） overflow:hidden;<div class="svg"> <img src="./loading.svg" class="svg-color"></div>//css.svg { width: 30px; height: 30px; overflow: hidden;}.svg-color { transform: translateX(30px); filter: drop-shadow(...未完，继续阅读→

svg 颜色图标

阅读(2949)条

javascript如何判断浏览器是否安装某插件2022/7/9 9:28:18

chrome测试环境：102.0.5005.63方法有多种，这里就做了两种方案：1. 检测扩展的可访问资源【推荐】原理：使用扩展可以访问的资源，确定扩展是否安装或启用。存在问题：需要知道extension id以下 HTML 标签支持 onload :<body>, <frame>, <frameset>, <iframe>, <img>, <input type="image">, <link>, <script>, <style>加载图片资源【推荐】manifest.json{..."web_accessible_resources": ["img/logo.png"]}html调用function detectExtens...未完，继续阅读→

chrome 插件检测

阅读(3550)条

原生js封装ajax的函数（运用promise的回调函数）2021/3/23 11:08:47

本篇文章实现了如何优雅的在 ajax中使用promise。Promise 其实也是原生js新的特性，使用Promise可以很好的解决这些问题：处理错误，比如网络请求失败如果发生错误，可以传值也可以处理JavaScript的错误很好的解决比如回调也是一个异步操作的情况封装方法如下：/*利用promise封装的ajax函数*/function ajax(method,url, data){ /*兼容IE*/ var request=window.XMLHttpRequest? new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP"); return new Promise(function(resolve,reject){ request....未完，继续阅读→

es6 promise ajax 回调

阅读(3198)条

微信小程序保存视频到本地（封装）2021/1/22 14:23:06

function getVideoStting(url) { return new Promise((reslove, reject) => { if (url) { wx.showLoading({ title: '保存中', mask: true }) wx.getSetting({ success(res) { wx.downloadFile({ url: url, success: function (res) { console.log(res) var temp = res.tempFilePath wx.saveVideoToPhotosAlbum({ filePath: temp, success: function (res)...未完，继续阅读→

小程序视频封装 Promise

阅读(3503)条

如何绕开referrer防盗链2020/12/24 9:46:35

开篇最近处理了一个与referer有关的需求，发现里面还是有一点门道的。因此在本篇文章整理了referer相关知识点，主要涉及图片防盗链与如何绕开防盗链限制。参考：Referer-MDNHTTP来源地址-维基百科使用refererReferer是HTTP请求头的一个字段，包含了当前请求页面的来源页面的地址，通过该字段，我们可以检测访客是从哪里来的。那么，referer到底有啥作用呢？交互优化在某些web应用的交互中，右上角会提供一个返回按钮，方便用户返回上一页其实现一般也比较简单<a href="javascript: history.back();">&...未完，继续阅读→

前端 referrer 防盗链

阅读(6291)条

幸福没有榜样2020/11/1 18:42:24

有时，我们总是感到自己的生活不够幸福，不如人家的日子过得那样滋润甜美，还常常拿别人家的幸福作榜样，去寻找自己的幸福。“榜样的力量是无穷的”，可是，到头来，我们会发现，惟独这人追人寻、人见人爱的幸福，没有榜样，常常是求而不得，甚至徒生烦恼。　　幸福是什么？《现代汉语词典》给出的答案是“使人心情舒畅的境遇和生活”。但是，同样的“境遇和生活”，不同人却有不同的感觉。乞丐得到一顿饱饭，心情会很舒畅，感到幸福降临；不说一顿饱饭，就是一桌山珍海味，在大款大腕那里，大概也激不起一点快乐的心...未完，继续阅读→

幸福美文感悟人生

阅读(3632)条

JS实现返回上一页并刷新页面的方法2020/5/15 15:44:52

移动端的开发的时候经常修改了内容，返回的时候值还没变化。所以，返回时返回的页面需要刷新。在这里分享给大家供大家参考，具体如下：正常情况下我们通过 history.back() 或者 history.go(-1) 返回上一级页面的时候，是不会刷新页面的。这种不刷新页面包含两种情况：在 android 或者 pc 浏览器中看到的页面有刷新的效果，其实不是这样的，这个时候的所有的资源都是从缓存中加载来的。我们通过浏览器调试工具可以看到 from disk cache 或者 from memory cache。在 ios 中甚至于返回到了上一页后...未完，继续阅读→

js history ios 前端刷新

阅读(4141)条

网页外链用了 target=_blank，要注意了2020/3/21 10:17:58

今天给大家分享一个 Web 知识点。如果你有过一段时间的 Web 开发经验，可能已经知道了。不过对于刚接触的新手来说，还是有必要了解一下的。我们知道，网页里的a标签默认在当前窗口跳转链接地址，如果需要在新窗口打开，需要给 a 标签添加一个target="_blank"属性。<a href="http://86y.org/" target="_blank">幸凡学习网</a>顺便提下一个有意思的现象，很早之前我就发现，国外网站倾向于在当前页跳转，而国内网站喜欢打开新窗口。不信你们可以去验证下。我不知道这是交互设计上...未完，继续阅读→

技巧外链安全

阅读(4119)条

《鬼娃回魂2019》The Buddi Song 音乐欣赏2019/9/12 14:15:27

The Buddi Song------------------start--------------------You are my Buddi, until the endMore than a buddy, you're my best friendI love you more then you will ever knowI will never let you goI am your Buddi until the endMore then a Buddi, I'm your best friendWhen you feel lonely and you start to cry,I am always by your sideLa la la la laLa la la laLa la la la laLa la la laLa la la la la la la la laLa la la laLa la la la laWe are best Buddis until the endMore than just ...未完，继续阅读→

音乐鬼娃回魂2019

阅读(7613)条

C#解析复杂的 Json 字符串2019/9/3 11:35:08

如今大量的 Web API 为我们编写复杂程序提供了极大的方便，例如百度地图 API、图灵机器人 API等等，利用这些 Web 应用程序我们可以充分发挥云服务的优势，开发出大量有趣的应用。Web API 通常返回 Json 或 XML 格式的检索数据，由于 Json 数据量更小，所以目前大多数情况下我们都选择返回 Json 格式的数据。如果返回的 Json 文档很大，而我们仅仅需要其中的一小部分数据。按照之前的方法，我们必须首先定义一个与 Json 对象对应的 .NET 对象，然后反序列化，最后才能从对象中取出我们需要的数据。而有了 Json.NET，这个任务就很容易实...未完，继续阅读→

json net 解析

阅读(8693)条

关于微信小程序 wx.getBackgroundAudioManager 的错误提示2019/7/15 10:12:43

最近鼓捣的小程序要用到背景音乐这个wx.getBackgroundAudioManager 背景音乐插件。在小程序管理后台的【开发】有报一些关于wx.getBackgroundAudioManager的错误。所以也查了一些相关资料并没有找出原因，经过自己仔细检查代码发现了。原来是在没有开启背景音乐的情况下，进行了其它的相关操作导致。完整错误代码如下：setBackgroundAudioState:fail: jsapi has no permission, event=setBackgroundAudioState, runningState=background, permissionMsg=permission ok, detail=jsapi permission required playing audio but cu...未完，继续阅读→

小程序背景音乐

阅读(10025)条

27个底部 tab bar 动画设计灵感2019/6/27 16:18:05

Colored Tab Bar Interactions by tubikTab Bar Animation nr.2 by Lukáš Straňák | codepen DEMO Google Bottom Bar Navigation Pattern by Aurélien Salomon | codepen DEMOTab bar interaction with animated icons by Ketan | GithubCreate New Document Tab Bar by Hoang Nguyen | 相似的例子codepenWeChat Tab Bar Redesign by Lukáš Straňák | codepenJack - Tab Bar Interaction b...未完，继续阅读→

tab bar 设计动画

阅读(12988)条

PhotoSwipe部分安卓手机长按图片不弹出菜单问题2019/1/2 17:15:45

在使用PhotoSwipe时，在IOS设备上图片放大能够弹出微信的保存图片的菜单，而安卓上却没有微信的保存图片的菜单。PhotoSwipe部分安卓手机长按图片不弹出菜单问题特此记录一下在photoswipe.js里找到如下代码_onDragStart = function(e)然后定位到内部的if (_preventDefaultEventBehaviour(e, true))找到如上代码位置编辑成如下保存即可if (_preventDefaultEventBehaviour(e, true)) { var isAndroid = /android/gi.test(navigator.userAgent); isAndroid || e.preventDefault();}未完，继续阅读→

PhotoSwipe 微信安卓

阅读(6797)条

html页面内容的收缩和展开效果 px / rem 默认显示两行或更多2018/9/26 10:40:08

一、概述：html页面内容的收缩和展开效果, 默认显示两行内容，点击进看全文，显示全部。(效果如下图：)二、源代码如下：<!DOCTYPE html><html><head><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta http-equiv="content-type" content="text/html;charset=utf-8"><title>px / rem 默认显示两行内容点击进看全文显示全部</title> <script src="http://code.jquery.com/jquery-2.1.1.min.js">...未完，继续阅读→

jq 技巧

阅读(9374)条

程序员都在用的电脑小技巧,看看你会几个2018/8/14 11:38:03

现在加班已经是常态了，程序员加班更甚，但是对于其他行业来说，有些工作其实是可以通过一些小技巧来提高工作效率的，如果你经常因为电脑操作的问题耽误工作效率，这篇文章可以让让你少加班一小时。如果你每天按时准点的下班，那么这篇文章或许可以让你多刷一会抖音，多和旁边的美女同事说几句话。当然还有一个最重要的前提就是你用的电脑室windows的，如果是用苹果的，可以等明天一、文件误删如何恢复？经常遇到不小心误删的情况，而且还是彻底删除，咋办啊？不需要任何工具，简单三步走，你就能找回你删掉并清空回收站的东西。1、单击&l...未完，继续阅读→

电脑技巧

阅读(5539)条

活着不是为了生气2018/8/6 11:10:54

如果你问一个人，你活着是为了什么？有人会说快乐，有的人是幸福，有的人是成功……但肯定没有一个人会说自己活着是为了生气的。　没有谁喜欢有事儿没事儿生气玩儿的，但很多人却有事儿没事儿就生气。其实，不是生活中的不顺心太多，而是因为我们忘了自己活着是为了什么。　　有一位金代禅师非常喜欢种兰花，在平日弘法讲经之余，花费了许多的时间栽种兰花。有一天，他要外出讲学，于是就交代身边的小和尚，要照顾好寺院里的兰花。　　禅师走了以后，小和尚总是悉心地照顾兰花，但有一天在浇水时却不小心摔了一跤，把花架撞倒了，所...未完，继续阅读→

感悟禅美文

阅读(5887)条

移动端自适配力荐viewport缩放解决方案2018/7/6 9:39:54

一、概述：做了几年的移动端一直用rem，感觉最烦琐的就是rem的计算。随便可以用cssrem自动计算，但是有时候感觉宽度跟高度的rem并不是完全准确。所以决定用viewport缩放来试试看效果，经果一些网友的帮忙测试，发现缩放viewport这种方法更简单、高效、准确。测试结果：（如果其它手机测试结果欢迎留言）测试地址：http://86y.org/demo/scale/360n6pro 正常oppo r7s 正常坚果Pro 正常iphone6 正常iphone8p 正常华为p9 正常二、思路：例如效果图是：750*1334(px)的源文件。1、根据750 PSD源图宽度尺寸进行比例缩放，高度并没有限止，所以高度...未完，继续阅读→

移动端 rem 自适应 viewport

阅读(9736)条

解决 ios input fixed置底获取焦点或切换输入法时被法挡住的BUG2018/7/5 11:53:20

一、概述：项目中有一个置底发布评论的效果,安卓没有发现问题，但是IOS出现了被输入法挡住的问题。搜索了下这个BUG，很多人都有在问这个问题。二、解决思路：有去尝试了一些测试，但有些是只能在弹出时滚动到底部，切换输入法还是有问题。所以我对此方法做了一个调整，IOS中需要点击才能获取焦点，接着我就对input点击事件着手。1、点击input时科开启定时器自动滚动到底部，防止切换输入法导致被挡住。2、input失去焦点时清除定时器。三、实例源代码：(测试地址：http://www.86y.org/demo/input%20fixed/)<div class="replay_com&qu...未完，继续阅读→

bug ios input

阅读(9657)条

当前第 1 页 / 共 41 页总共808条记录

12 3 4 5 6 7 8

网页前端设计

搜索文章

文章热门排行随机文章推荐文章

网页前端设计

搜索文章

文章热门排行随机文章推荐文章

热门标签