Web technology
文章平均质量分 54
luck_lin
这个作者很懒,什么都没留下…
展开
-
style对象和less/scss互相转换,驼峰转中横线,支持嵌套转换
emotion style、Inline style对象和less/scss互相转换,支持格式化缩进,camelCase、kebab-case互相转换,支持嵌套。原创 2023-01-11 16:21:05 · 530 阅读 · 0 评论 -
vue项目中使用svg,通过img标签轻量解决方案,支持动态颜色更改
前言svg的优点不多说,怎么在vue项目优雅的使用svg?通过img似乎很优雅简单,但是你知道通过img引入svg怎么更改颜色吗?知道怎么动态切换颜色吗?一、components下创建自定义公共svg组件zc-svg.vue:<template> <div class="svgBox" :style="{ width: `${size}px`, height: `${size}px` }"> <img :src="require(`./${ty原创 2022-04-28 10:16:39 · 2865 阅读 · 0 评论 -
nuxt3项目中使用eslint和prettier+commitlint附常用规则配置
nuxt3项目中使用eslint和prettier,附常用规则配置原创 2022-03-31 13:20:55 · 4781 阅读 · 1 评论 -
vue实现图片自定义尺寸裁切并上传
安装vue-cropper,进行二次封装<template> <a-modal :visible="visible" :title="title" :maskClosable="false" :confirmLoading="confirmLoading" :width="400" @cancel="cancelHandel" :destroyOnClose="true" > <a-row>原创 2020-07-27 14:18:46 · 1016 阅读 · 0 评论 -
前端预览和下载图片/文档的几种方法
浏览器下载文件主要还是看文件保存的时候有没有设置正确的conten-type,有的话浏览器访问url时会自动打开该文件将内容显示在页面上,前提时浏览器本身能识别这个文件类型,比如图片/文档/文本等,否则浏览器则会默认直接下载该文件。。。当然如果后端能直接返回文件流(bolb类型)的话就好处理了)用js实现强制下载图片(经测试IE全版本不支持):downloadIamge(imgsrc, ...原创 2019-11-14 22:35:45 · 7065 阅读 · 1 评论 -
antd表单验证的坑
坑一:Form.Item中的表单如果是调用的react子组件,则表单验证功能失效,请看例子:表单父组组件:Item组件:这样虽然能正常渲染出组件样式,但是会导致submit功能Bug和resetFields功能失效,如下图:解决办法:刚开始我以为是我哪里写得不对,找了很久原因,把子组件换class写法函数写法都试了,甚至把子组件搬到父组件同一个文件中都还是不行,...原创 2019-10-28 22:24:37 · 4218 阅读 · 0 评论 -
回流(reflow)与重绘(repaint)
一.明确概念首先我们要明确页面在文档加载完成之后到完全显示中间的过程是1.根据文档生成DOM树(包括display:none的节点)2.在DOM树基础上根据节点的几何属性(margin/padding/width/height等)生成render树(不包括display:none、head节点但会包含visibility:hidden节点)3.在render树基础上进行进一步渲染包括col原创 2018-03-29 11:46:31 · 229 阅读 · 0 评论 -
桌面拖入图片到html元素、页面内图片拖动
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .box{ wid原创 2018-04-27 19:03:26 · 2338 阅读 · 0 评论 -
彻底禁用Chrome的“请停用以开发者模式运行的扩展程序”提示,附工具下载
对于高版本chrome,经常会出现烦人的“请停用以开发者模式运行的扩展程序”提示,如图:网上盛传的组策略法已失效。话不多说,解决办法如下:1.双击 x96dbg.exe ,然后选择 x64dbg(如果打不开,换 x32dbg打开):2.将chrome版本号文件夹下的 chrome.dll 拖至主窗口:然后连续多次点击运行到用户代码按钮,直至窗口标题处的模块变成 chrome.dll3.然后在主面板...转载 2018-07-25 14:58:31 · 4929 阅读 · 4 评论 -
wordpress快速搭建个人博客,插件以及主题的安装!
下载wordpress不说了,说下简单的数据库配置吧,在wordpress根目录下找到wp-config.php文件,用编辑器打开,找到如下代码:// ** MySQL 设置 - 具体信息来自您正在使用的主机 ** ///** WordPress数据库的名称 */define('DB_NAME', 'MYSQL-NAME');/** MySQL数据库用户名 */define('DB...原创 2018-09-06 13:35:27 · 3578 阅读 · 0 评论 -
微信小程序手记
获取当前点击的组件信息:e.target,如果需要组件存数据,可以指定data-NAME属性,然后通过基础事件中e.target.dataset.NAME 获取,如果是自定义事件在e.detail中获取template组件,用来定义模板,用法:数据:date:{ user:{tit:'linge'}}编写模板组件:<template name="student...原创 2018-10-25 21:55:39 · 355 阅读 · 0 评论 -
python3+scrapy+selenium爬取英雄联盟英雄资料
继前一篇文章用nodejs+puppeteer+chromium爬取了这个英雄资料后,在本篇同样爬这个页面,思路都差不多,只是用不同语言来实现,可作为参考,个人觉得爬虫还是nodejs比较好用,可能是我python太菜吧本例环境和所需第三方包:python3、pycharm、selenium2.48.0(用3.0+版本会报错,因为新版本放弃phantomjs了,当然也可以用chrome和fir...原创 2019-03-01 13:33:42 · 875 阅读 · 1 评论 -
使用Sass的Mixin实现自动添加浏览器前缀
使用Sass的@mixin指令实现自动添加浏览器前缀 解决每次打某些CSS3样式需要加各种浏览器前缀这一麻烦问题。为什么要加浏览器前缀 当一个浏览器实现一个新的属性、值或者选择器,而这个特征还不是处于候选推荐标准状态的时候,这属性的前面会添加一个前缀以便于它的渲染引擎识别。 通俗一点来说,就是当官方标准还没有最终确定之前,部分浏览器根据最初的草案实现了部分CSS样式,然后使用...转载 2018-04-17 11:53:45 · 782 阅读 · 0 评论 -
移动端页面适配rem和vw的使用和转换
物理像素:dp、比如苹果7主屏分辨率:1334dp*750dp逻辑像素:px、开发中用到的像素像素缩放比:dpr、物理像素跟逻辑像素之间的比例关系像素密度:ppi、屏幕每英寸像素密度【√(1334^2+750^2) / 4.7 = 325.61228......PPI】逻辑像素不会变,但是物理像素会随着硬件技术提升变化,比如以前1dp的大小约等于1px的大小,现在1原创 2018-03-30 15:51:28 · 4306 阅读 · 0 评论 -
重置样式整理
/*PC terminal*/body,p,h1,h2,h3,h4,ul,dl,dd,input{margin: 0;padding: 0;}i,em{font-style: normal;}ul li{list-style: none;}img{border: 0;vertical-align: top;}a{text-decoration: none;color: inherit;}原创 2018-03-17 19:01:01 · 348 阅读 · 0 评论 -
display:grid;&display:flex;
display:grid;一:常见的容器属性1、display:grid定义一个容器属性为网格布局2、grid-template-columns: 100px 100px 100px表示创建三列,每列的宽度是100px3、grid-template-columns: repeat(3, 1fr)表示创建三列,每列平均分配4、grid-template-columns: 150px 10原创 2017-12-30 10:21:37 · 1725 阅读 · 0 评论 -
css基础———box-sizing—标准盒模型&怪异盒模型
在标准模式下(W3C标准),一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)在怪异模式下( IE标准),一个块的总宽度= width + margin(左右)(即width已经包含了padding和border值)大多数浏览器采用W3C标准模型,而IE中则采用Microsoft自己的标准。怪异模式是“部分浏览器原创 2017-12-17 09:35:25 · 1635 阅读 · 0 评论 -
css基础———清除浮动的一些方法及区别
为什么要清楚浮动?地址:http://blog.csdn.net/qwe502763576/article/details/78811658清除浮动方法概览这里例举四种常见的清除浮动方式: 方式一:使用overflow属性来清除浮动 .ovh{ overflow:hidden; }原创 2017-12-15 13:22:18 · 773 阅读 · 0 评论 -
css基础———浮动的作用及副作用
1.文档流在浮动中有一个文档流的概念,也称标准流————元素在排列的时候有默认开始位置以及他们所占的区域2.浮动使元素脱离文档流,按照指定的方向发生移动,遇到父级的边界或者相邻的浮动元素就会停下来.浮动的目的:为了达到自己的布局目的,让指定元素定位在指定位置,我们就需要用到浮动3.浮动的副作用1). 块状元素,会钻进浮动元素的下面,被浮动元素所覆盖,原创 2017-12-15 12:44:23 · 3690 阅读 · 0 评论 -
text-align:justify真正作用及无效处理方式
Test div{ text-align: justify; } 作者是一个文本:问题hi是:是滴是滴见风使舵:作者是一个文本:问题hi是:是滴是滴见风使舵:作者是一个文本:问题hi是:是滴是滴见风使舵:作者是一个文本:问题hi是:是舵:作者是一个文本:问题hi是:是原创 2017-12-14 18:58:21 · 10451 阅读 · 2 评论 -
css基础———简介、语法、引用方式
一:css简介CSS(Cascading Style Sheets)层叠样式表,web标准中的表现标准语言,在网页中主要对网页信息的显示进行控制,简单说就是修饰网页信息的显示样式。目前推荐遵循的是W3C发布的CSS3.0用来表现XHTML或XML等样式文件的计算机语言1998年5月21日由W3C正式推出的CSS2.0二:css语法选择符{属性:属性值;属性:属性原创 2017-12-14 14:01:11 · 237 阅读 · 0 评论 -
html列表、表格、超链、字体标签————web前端分享2
有序、无序、自定义列表:oltype="1" start="6"> 数字来排列,从6开始。--> ol的type属性默认是数字,可选值a、I(罗马数字)、A 无序列表的type属性有三个数值可选,这三个选项分别为:disc实心园、circle空心园、square小方块。 默认属性是disc实心园。自定义列原创 2017-12-14 10:54:20 · 1425 阅读 · 0 评论 -
html相关概念、建站流程————web前端分享1
web前端:pc端、移动端建站流程:1.注册域名 2.租用空间 3.网站建设{ a.确定主题,b.收集资料,c.规划网站.d制作页面 } 4.网站推广 5.网站维护HTML:超文本标记语言(Hyper Text Markup Lan原创 2017-12-13 16:49:58 · 217 阅读 · 0 评论 -
优雅降级&渐进增强
今天给大家分享一下,深度思考中的知识点——渐进增强和优雅降级有什么不同?一、背景介绍在前端开发的过程中,经常需要用到css3的相关属性,因为在标准还未确定时,部分浏览器已经根据最初草案实现了部分功能,为了与之后确定下来的标准进行兼容,所以每种浏览器使用了自己的私有前缀与标准进行区分,当标准确立后,各大浏览器将逐步支持不带前缀的css3新属性。平常稍加注意的话,发现有些写css3属性时,兼容原创 2018-01-04 17:51:23 · 416 阅读 · 0 评论 -
解决ie8 css :nth-child(3n) 不兼容问题
个人是用jquery 做的在css中 一般这样写.css li:nth-child(3n){ width:300px;}方法一:使用 + 来硬干nth-child()遇到IE7、IE8的时候可以这样写:.css >li+li+li{ width:300px;}或是这样转载 2018-01-06 18:22:35 · 1000 阅读 · 0 评论 -
document.getElementsByClassName兼容问题
在新手使用原生JavaScript时,常常会用到document.getElementById、document.getElementsByClassName以及document.getElementsByTagName等方式来获取到元素,进而对其进行操作。但IE9以下的版本却不支持document.getElementsByClassName方法,所以很多刚开始接触js的同学往往会很困惑这个问题原创 2018-01-18 21:17:46 · 864 阅读 · 0 评论 -
css基础———简单概述BFC
什么是BFC?在了解BFC之前,先了解两个个概念:1.box就是盒模型。box是css布局的对象和基本单位,说白了就是咱们网页布局的基石,简单来说一个页面是由很多box(盒模型)组成的。2.元素的类型也就是display属性。元素的类型和display属性决定了这个 Box的类型。不同类型的Box,会参与不同的Formatting Context(一个决定如何渲原创 2017-12-27 12:34:10 · 188 阅读 · 0 评论