![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Web前端技术
Web前端技术
老李笔记
不积跬步无以至千里,不积小流无以成江海!
希望将自己学习到的点点滴滴能在此记录与分享!
一起成长!
展开
-
Feign Conifguration配置
Feign Conifguration配置package com.webber.cm.config;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.boot.autoconfigure.http.HttpMessageConverters;import org.springframework.cloud.openfeign.support.SpringEncoder;原创 2021-05-12 13:54:29 · 186 阅读 · 0 评论 -
纪念日或悼念人网页变灰仅需一行代码
纪念日或悼念人网页变灰仅需一行代码1、CSS代码body,html { filter: progid:DXImageTransform.Microsoft.BasicImage(graysale=1); -webkit-filter: grayscale(100%);}2、变灰效果2.1、插入代码前2.2、插入代码后如果喜欢,帮点个赞了!...原创 2020-12-15 09:12:01 · 432 阅读 · 1 评论 -
layui中使用jquery的方式方法
layui中使用jquery的方式方法<body> <script src="resources/layui/layui.js"></script> <script type="text/javascript"> layui.use(["jquery"],function(){ var $=layui.jquery; $(".layui-btn").click(fun原创 2020-11-04 11:35:21 · 816 阅读 · 0 评论 -
Bootstrap前端开发框架使用
Bootstrap前端开发框架推荐学习网址中文官网:http://www.bootcss.com/官网:http://getbootstrap.com推荐使用:http://bootstrap.css88.com/Bootstrap 使用1、建议目录结构2、html骨架<html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content原创 2020-10-24 14:00:45 · 445 阅读 · 1 评论 -
VSCode px转换rem插件 cssrem
VSCode px转换rem插件 cssrem插件效果插件安装配置修改默认尺寸:16px=1rem如果是750px的手机屏幕,则尺寸换算为:75px=1rem修改后效果原创 2020-10-23 14:04:17 · 2611 阅读 · 0 评论 -
web前端搭建相关文件夹结构
web前端搭建相关文件夹结构原创 2020-10-23 10:52:27 · 1014 阅读 · 0 评论 -
rem适配方案flexible.js
rem适配方案技术方案1技术方案2(推荐)less 媒体查询remflexible.js(淘宝技术)rem原创 2020-10-23 10:42:46 · 408 阅读 · 0 评论 -
Less基础、安装、使用、编译、嵌套、运算、注意事项
Less 基础1、Less 安装1、安装nodejs,可选版本8.0,网址:http://nodejs.cn/download/2、检查是否安装成功,使用cmd命令,输入“node -v”查看版本;3、基于nodejs在线安装Less,使用cmd命令 “npm install -g less”4、检查是否安装成功,使用cmd命令“lessc -v”查看版本2、Less 使用...原创 2020-10-22 11:45:43 · 399 阅读 · 0 评论 -
移动端技术选型
移动端技术选型单独制作移动端页面(主流)响应式页面兼容移动端(其次)流式布局(百分比布局)flex弹性布局(强烈推荐) less+rem+媒体查询布局混合布局媒体查询bootstarp原创 2020-10-21 11:17:23 · 287 阅读 · 0 评论 -
CSS文本基线的对其方式
CSS文本基线的对其方式基线效果图基线对其方式 /* 父级元素font-size设置为0 */ font-size: 0; /* 显示效果设置为block */ display: block; /* 对其方式设置为居中 */ vertical-align: middle;原创 2020-10-20 17:22:38 · 14177 阅读 · 0 评论 -
CSS精灵图标使用技巧
CSS精灵图标使用技巧将图片的基础代码写在公用样式内[class^="icon_"]{ background: url(../image/test.png) no-repeat; background-size: 200px 200px;}原创 2020-10-20 16:51:02 · 303 阅读 · 0 评论 -
响应式开发设备屏幕尺寸划分
响应式开发设备屏幕尺寸划分设备划分尺寸区间超小屏幕(手机)< 768px小屏设备(平板)>= 768px ~ 992px中等屏幕(桌面显示器)>= 992px ~ < 1200px宽屏设备(大桌面显示器)>=1200px...原创 2020-10-20 14:21:37 · 2820 阅读 · 1 评论 -
js json数组对象深度比对
js json数组对象深度比对/** * 判断此对象是否是Object类型 * @param {Object} obj */ function isObject(obj) { return Object.prototype.toString.call(obj) === '[object Object]'; }; /** * 判断此类型是否是Array类型 * @param {Array} arr */原创 2020-10-19 13:07:57 · 1195 阅读 · 1 评论 -
移动网站自动识别并跳转
移动网站自动识别并跳转<body> <script> window.location.href=/Android|WebOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)?"phone.html":"pc.html"; </script></body>原创 2020-10-07 16:27:21 · 287 阅读 · 0 评论 -
js every函数数组方法
js every函数every 函数功能描述every 数组方法 会遍历 会接收一个回调函数。每个回调函数都返回 true时,every方法返回 true。只要有一个回调函数返回 false时,则停止循环,直接返回 false。== 空数组 ==时,直接返回trueevery 函数使用示例const allChecked=cart.every(v=>v.checked)every 函数使用示例(增加空数组判断)const allChecked=cart.length?cart.ev原创 2020-09-17 09:57:51 · 1130 阅读 · 0 评论 -
iphone不支持webp图片格式处理方案
iphone不支持webp图片格式处理方案方式一(优先考虑)后端对webp格式的图片进行统一处理,修改文件后缀为jpg,所有前端将全部已jpg格式展现。方式二(临时方案)前端采用正则表达式对图片路径进行替换,将== .webp转换成.jpg==。但前提服务器必须在同样路径下存在同名的jpg格式文件。正则表达式如下:str=str.replace(/\.webp/g,'.jpg');...原创 2020-09-16 17:03:33 · 2009 阅读 · 0 评论 -
vscode less 插件的使用-转wxss或css
vs code less 转 wxsseasy less效果说明使用Easy less插件后,编辑less文件,点击保存或使用快捷键Ctrl+S时,vscode会自动生成对应文件名成的wxss或css安装 easy less 插件配置使插件生效原创 2020-09-15 18:08:39 · 1139 阅读 · 0 评论 -
css变量的使用
css变量的使用定义变量page{ /* 主题颜色 语法:变量名称前增加-- 即可*/ --themeColor:#eb4450;}使用变量view{ /* 使用主题颜色 语法:使用时采用var();*/ color: var(--themeColor);}原创 2020-09-15 17:21:05 · 263 阅读 · 1 评论 -
阿里巴巴字体图标库
阿里巴巴字体图标库网址https://www.iconfont.cn/原创 2020-09-15 16:53:16 · 1115 阅读 · 0 评论 -
移动端css动态字体大小fontSize rem
css动态字体大小fontSize rem设置参考标准/* 说明:此处将整个手机端设置成100%,作为参考 */html{ font-size: 100%;}设置具体字体/* 说明:font-sizt 不足1时,可用0.*标识,或者直接.*省略零 */body,.m_size{ font-size: 1rem;}.am-tabs-default-bar-t...原创 2020-03-03 17:15:35 · 1268 阅读 · 0 评论 -
react访问springBoot项目跨域问题
react访问springBoot项目跨域问题java类AccessControlAllowOriginFilterimport java.io.IOException;import javax.servlet.Filter;import javax.servlet.FilterChain;import javax.servlet.FilterConfig;import javax....原创 2020-03-03 10:51:38 · 502 阅读 · 0 评论 -
umijs项目部署Nginx配置(单页面部署)
umijs项目部署Nginx配置(单页面部署) location / { root /var/www/dist; try_files $uri /index.html; #此处为单页面部署类型 }原创 2020-02-11 17:03:46 · 5196 阅读 · 0 评论 -
WEB引入外部图标(阿里巴巴)
WEB引入外部图标(阿里巴巴)阿里巴巴矢量图https://www.iconfont.cn/获取在线样式地址# 复制生成的链接地址//at.alicdn.com/t/font_1622024_vrddovdlwpk.css增加https协议https://at.alicdn.com/t/font_1622024_vrddovdlwpk.css应用<link rel="...原创 2020-01-26 22:45:26 · 383 阅读 · 0 评论 -
CSS清除常用元素默认样式
CSS清除常用元素默认样式最基本元素body,img,ul,li,a{ padding:0px; margin:0px; list-style:none; text-decoration:none;}补充说明如有其它元素,直接追加即可。此处不建议采用*全部通配,尽可能的缩小范围,减少不必要的修改。...原创 2020-01-26 22:01:34 · 1819 阅读 · 0 评论 -
React配置sass样式
React配置sass样式1、安装sass库yarn add node-sass sass-loader2、sass样式示例.content { height: calc(100vh - 69px); overflow: hidden; display: flex; .form { width: 350px; margin: auto; padd...原创 2020-01-26 12:14:57 · 449 阅读 · 0 评论 -
React_DvaJS构建后台管理系统(二)项目结构调整
React_DvaJS构建后台管理系统(二)项目结构调整原始目录结构项目结构内容微调1、修改入口文件vi public/index.html<html lang="zh"><title>Dva Demo</title>2、删除或修改相关文件删除 src/assets/yay.jpg删除 src/components/Example.js...原创 2020-01-15 18:03:58 · 316 阅读 · 2 评论 -
React_DvaJS构建后台管理系统
React_DvaJS构建后台管理系统(一)创建项目安装dva-cli通过cnpm安装(npm安装非常慢)$ cnpm install dva-cli -g$ dva -vdva-cli version 0.10.1创建应用dva new cloud-car-net提示:Do you insist on using dva-cli?输入:y安装完成后启动cd cloud-...原创 2020-01-15 17:16:24 · 433 阅读 · 0 评论 -
CSS3伪类选择器
CSS3伪类选择器伪类选择器一a:link{color:#666}a:visited{color:#f00}a:hover{color:#000;}a:active{color:#0f0;}伪类选择器二first-childlast-childnth-childnth-last-childnth-of-typenth-last-of-typefirst-of-type...原创 2020-01-12 10:12:11 · 281 阅读 · 0 评论 -
CSS3伪元素
CSS3伪元素示例代码<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> .dome{ ...原创 2020-01-12 09:58:40 · 177 阅读 · 0 评论 -
React手机拨号
React手机拨号方法一<a href={`tel:${item.contact_number}`}>拨号</a >方法二<Icon type="phone" theme="twoTone" twoToneColor="#52c41a" style={{ fontSize: '35px' }} onClick={exeCall.bind(this,`${it...原创 2020-01-08 13:13:06 · 961 阅读 · 2 评论 -
React常用操作
React常用操作yarn命令安装组件yarn add 组件名原创 2020-01-02 15:11:47 · 223 阅读 · 0 评论 -
React服务端渲染框架Next.js
React服务端渲染框架Next.js1、全局安装脚手架npm install -g create-next-app2、创建项目# 进入对应文件夹,执行如下命令,创建项目npx create-next-app next-createcd next-createyarn installyarn dev安装并启动成功后,会出现如下界面:3、编写react页面export d...原创 2020-01-02 10:00:58 · 283 阅读 · 0 评论 -
PM2 node.js服务管理
PM2 node.js服务管理##安装和常用命令安装 npm install pm2 -g查看 pm2 list停止id为0的程序 pm2 stop 0重启 pm2 restart all删除 pm2 delete 0##启动项目命令pm2 start npm --name "myblog" -- run buildmyblog为项目名称,当前命令需要在对应的项目根路径下执...原创 2019-12-16 22:29:33 · 198 阅读 · 0 评论 -
CentOS安装nodejs+yarn+更换阿里仓库
CentOS安装node+yarn+更换淘宝源1 安装1.1 安装nodeyum remove nodejs npm -y #卸载老版本curl --silent --location https://rpm.nodesource.com/setup_8.x | sudo bash -sudo yum -y install nodejsnode -v1.2 安装yarncurl...原创 2019-12-05 11:16:08 · 1121 阅读 · 1 评论