51yunOA

原创 UI技术常用网站汇总

https://www.html.cn/中文网 前端UI技术 文档资料 培训视频

原创 关于ToB Saas产品的企业员工账号和自然人账号的管理方案

ToB SaaS产品均会面临此类问题：1、租户企业如何统一管理员工的账号/密码规则，邮箱和手机号码？离职时账号自动注销。 目前大部分Saas产品均是先注册成为用户，才能加入企业。这种模式，不便于企业内部推广，且存在一定的风险，详见下文分析。2、SaaS产品的普通用户可能会隶属多个租户企业，如何进行切换？3、SaaS产品的供应商，如何对各企业的员工这类实际用户进行留存？...

原创 Nginx Windows详细安装部署教程

一、Nginx简介Nginx (engine x) 是一个高性能的HTTP和反向代理服务器，也是一个IMAP/POP3/SMTP服务器。Nginx是由伊戈尔·赛索耶夫为俄罗斯访问量第二的Rambler.ru 站点（俄文：Рамблер）开发的.它也是一种轻量级的Web服务器，可以作为独立的服务器部署网站（类似Tomcat）。它高性能和低消耗内存的结构受到很多大公司青睐，如淘宝网站架设。先下载直接去官网nginx.org二、安装部署1、下载完成后，解压缩，运行cmd，使用命令进行操作，不要

转载 [转]nginx教程从入门到精通

Nginx基础1.nginx安装2.nginx 编译参数详解3.nginx安装配置+清缓存模块安装4.nginx+PHP 5.55.nginx配置虚拟主机6.nginx location配置7.nginx root&alias文件路径配置8.ngx_http_core_module模块提供的变量9.nginx日志配置10.apache和nginx支持SSI配置12.nginx日志切割13.Nginx重写规则指南14.nginx ...

原创 jsPlumb 与 vue 学习总结

jsPlumb可用于网页拖拽、连线，这里简要记录写文档要点官方文档地址：https://jsplumbtoolkit.com/community/doc/basic-concepts.html1、安装 : npm install jsplumb --save2、在main.js中引入，在这里直接放进了vue原型中，方便下面页面使用import jsPlumb from 'jsplumb'Vue.prototype.$jsPlumb = jsPlumb.jsPlumb3、初始化jsPl

转载 SQL SERVER公用表表达式 (CTE)的用法和运用场景

sql server 2005开始推出了公用表表达式 (CTE)，这个表达式是个人觉得挺有用的。我主要是用于树结构的递归查询和简化sql语句增加可读性和可维护性。公用表表达式其实提供的功能和视图差不多，但是它不像视图一样把sql语句保存在我们的数据库里面。虽然CTE不是必需的，但是它可以为提高sql的可读性。微软官方给的使用CET的优势：编写一个递归查询（类似树查询） 使用要使用一个类似视图的功能，但是又不想把这个查询sql语句的定义保存在数据库 要引用一个返回数据sql语句多次，只需.

转载 Sql Server中的递归查询及 CTE(公用表达式)

公用表表达式在Microsoft SQL Server 2008系统中，可以使用公用表表达式(common table expression，CTE)。CTE是定义在SELECT、INSERT、UPDATE或DELETE语句中的临时命名的结果集，CTE也可以用在视图的定义中。在CTE中可以包括对自身的引用，因此这种表达式也被称为递归CTE。在SELECT语句中，可以使用WITH子句定义CTE。CTE的基本语法形式如下：–WITH expression_name (column_name, …)

原创 SQL Server：多值字段分成多行显示 或者 多行数据合并成一行

目录一、利用XML解析方式 二、利用通用表达式CTE 三、创建自定义函数 四、多行数据合并成一行有如下数据表需求就是将Col1，Col2按照特定的字符串分割成多行回到顶部一、利用XML解析方式 先将该字段值统一替换为逗号分割，再将逗号分割替换转为XML数据类型，再利用xml转为多个行declare @table1 table ( ID int , Col1 nvarchar(50) , C...

原创 DIVCSS必备：DIV CSS基础教程 与 CSS DIV入门知识

css height高度 css line-height行高 css min-height最小高度 css max-height最大高度 css width宽度 css min-width最小宽度 css max-width最大宽度 css border边框 css background背景 css float浮动 css clear both css font文本 css...

原创 CSS 颜色代码大全 CSS颜色对照表

HTML及CSS常用颜色英文词汇https://blog.csdn.net/u012117917/article/details/41604711黑色 银色 灰色 白色 茶色 红色 紫色 紫红 black silver gray white maroon red purple fuchsia ...

原创 设计师必备网站合集

灵感创意：（设计大咖的作品给你带来无限灵感）Behance： https://www.behance.net/Dribbble：https://dribbble.com/花瓣网：http://huaban.com/站酷网：http://www.zcool.com.cn/致设计：http://www.zhisheji.com/UI中国：http://www.ui.cn/P...

原创 CSS3 Flexbox 布局完全指南(图解 Flexbox 布局详细教程)

背景Flexbox 布局（也叫Flex布局，弹性盒子布局）模块（ W3C 候选推荐，截止到2017年10月）旨在提供一个更有效地布局、对齐方式，并且能够使容器中的子元素大小未知或动态变化情况下仍然能够分配好子元素之间的空间。Flex 布局的主要思想是使父容器能够调节子元素的宽度/高度（和排列顺序），从而能够最好地填充可用空间（主要是为了适应所有类型的显示设备和屏幕尺寸）。flex布容器能够...

转载 Flex 布局属性手册：语法篇

网页布局（layout）是 CSS 的一个重点应用。布局的传统解决方案，基于盒状模型，依赖display属性 +position属性 +float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很...

原创 CSS3的媒体查询(Media Queries)与移动设备显示尺寸大全

文章目录媒体查询介绍 Media Queries具体使用 一、最大宽度Max Width 二、最小宽度Min Width 三、多个Media Queries使用 四、设备屏幕的输出宽度Device Width 五、iPhone4 六、iPad 七、android 八、not关键字 九、only关键字 十、其他 媒体查询之device-aspe...

原创 css中 @media 用法 总结

1、head标签中引入//语法： @media mediatype and | not | only (media feature) { css-code; }//也可以针对不同的媒体使用不同的stylesheets:<!--<link rel="stylesheet" media="mediatype and|not|only (media feature)" href=...

原创 Css min-width max-width 使用方法

CSS宽度属性为单词width，宽度width包含了两个重要的属性：最大宽度属性max-width和最小宽度属性min-width。最大宽度属性(max-width)用来定义宽度显示的最大值，当拖动浏览器边框使其显示范围大于最大宽度的时候，元素显示最大宽度值定义的宽度。在最大宽度属性值中，可以使用三种属性值，分别为auto值、长度值和百分比值；最小宽度属性(min-width)用来定义宽度显...

原创 ToB SaaS 行业下一个10年的机会与挑战

过去10年，ToB SaaS 行业发生了翻天覆地的变化。2010年，我们看到的还是“老面孔”：用友、金蝶以及第一批创业的 XTools 等。到了2020年，主角们已经换成了钉钉、销售易、北森等。再过10年，现在成功的企业，还能不能继续保持成功？新的创业者还有没有机会？在未来的10年中，ToB SaaS 行业会呈现什么样的趋势？我认为，这一切并非无迹可寻。01 新的创业者还有机会吗？...

原创 CSS3 之 less、sass、stylus区别

CSS(Cascading Style Sheet)被译为级联样式表，做为一名前端从业人员来说，这个专业名词并不陌生，在行业中通常称之为“风格样式表（Style Sheet）”，它主要是用来进行网页风格设计的。通过设立样式表，可以统一地控制HTML（XHTML）中各标签的显示属性。可以使人更能有效的控制Web页面（或Web应用程序）外观，可以精确指定Web元素位置，外观以及创建特殊效果的能力。CS...

原创 CSS之阴影大全：Shadow

https://www.html.cn/tool/css3Preview/Box-Shadow.htmlBox Shadow(阴影) Text Shadow(文本阴影) Text Stroke(文本描边)和text-fill-color(文本填充色) border-radius(圆角) webkit内核的safari、 Chrome的Linear Gradients (线性渐变)...

原创 sass揭秘之@if，@for，@each

因为文章内含有很多sass代码，如需自己动手查看编译结果，推荐使用sassmeister这款在线编译工具，方便你阅读学习。经过上两篇揭秘，大家心里对sass应该有了很好的认知感了，这篇文章基于前面两篇为基础，请确保你先浏览了前面的两篇文章，不然可能给你带来疑惑感觉。sass揭秘之变量 sass揭秘之@mixin，%，@function这篇文章关键是对sass判断或循环的语法熟悉下，...

原创 sass揭秘之@mixin，%，@function

因为文章内含有很多sass代码，如需自己动手查看编译结果，推荐使用sassmeister这款在线编译工具，方便你阅读学习。在阅读本文章之前，请先确认你已经阅读了上篇文章sass揭秘之变量，不然会给你带来疑惑的感觉。其实很多人之所以对sass或less感兴趣，就是因为他们能使用变量和这个@mixin功能，而后面的%和@function知道的人就比较少了。所以说@mixin这个东西还是很有诱惑...

原创 sass揭秘之变量

全局变量和局部变量要了解sass或less的变量，有必要先了解下js的变量定义，先来一段js的代码：var a = 1;(function(){ a = 5;})();console.log(a);//5上面这段代码，匿名函数里面的a因为没有使用var关键字来定义，所以当我们在函数外打印a的时候，得到的是5，改变了一开始定义的1var a = 1;(fun...

原创 less的函数与循环

函数参数带有类名设置 函数定义 这个根据每个的设计稿和基础适配的font-size决定，我这里只是说传入参数生成对应的rem的值@base:750 / 720 * 0.01;.px2rem(@name, @px) { @{name}: @px * @base * 1rem;} 函数调用 .px2rem(margin-top,250); 使用...

原创 皮肤主体颜色之属性 materialpalette 配色方案

Material design in color 强调大胆的色调，深的阴影及明亮的亮光。几个基本概念Primary color 原色（用来作为actionbar color）Secondary color 二次色（statusbar color -lighter or darker）Accent color 强调色（floating button or active component...

原创 几种常见的响应式导航设计模式优劣分析

大屏幕上有两个典型的区域适合放置导航：顶部和左侧，但在缺少屏幕空间的手机屏幕上却是一个有趣的挑战。随着响应式设计越来越流行，在小尺寸屏幕上处理导航的各种方法越来越值得我们关注。而手机网站导航必须在快速获取一个网站的信息和不可见性之间取得平衡。下面是一些处理响应式导航比较流行的技巧，由于下述几种导航方式还没有约定俗成的叫法，所以大家可以结合案例网站来理解他的实际用法： 顶部导航 ...

原创 响应式页面导航设计解析

自用户体验设计师Ethan Marcotte在2010年提出Responsive Web Design（RWD）的名词，即响应式网页设计，这个概念从Responsive Architecture延伸到web设计领域，让所有的交互设计、视觉、前端开发都开始投入到这个趋势，或者说新的设计解决方案中。响应式导航的设计遵循了响应式Web设计理念，页面的设计与开发根据用户行为以及设备环境(系统平台、屏幕...

原创 前端手册-CSS3 属性手册

http://caibaojian.com/css3/properties/transition/transition.htm

原创 深入理解CSS过渡transition

https://www.cnblogs.com/xiaohuochai/p/5347930.html前面的话　　通过过渡transition，可以让web前端开发人员不需要javascript就可以实现简单的动画交互效果。过渡属性看似简单，但实际上它有很多需要注意的细节和容易混淆的地方。本文将介绍和梳理关于CSS过渡的知识定义　　过渡transition是一个复合属性，包...

原创 CSS3 之 transform属性详解

https://www.cnblogs.com/zxnn/p/8261849.htmltransform字面上就是变形，改变的意思。在CSS3中transform主要包括以下几种：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。2D Transform 方法translate() 根据左(X轴)和顶部(Y轴)位置给定的参数，从当...

原创 CSS重置实践样例

原创 CSS经典重置：normalize.css

/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css *//** * 1. Change the default font family in all browsers (opinionated). * 2. Prevent adjustments of font size after orie...

原创 CSS重设(reset)方法总结

在当今网页设计/开发实践中，使用CSS来为语义化的(X)HTML标记添加样式风格是重要的关键。在设计师们的梦想中都存在着这样的一个完美世界:所有的浏览器都能够理解和适用多有CSS规则，并且呈现相同的视觉效果(没有兼容性问题)。但是，我们并没有生活在这个完美的世界，现实中发生的失窃却总是恰恰相反，很多CSS样式在不同的浏览器中有着不同的解释和呈现。　　当今流行的浏览器(如:Fire...

原创 解决点击响应延时0.3s 问题

<scriptsrc="https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js"></script><script>if ('addEventListener' in document) {document.addEventListener('DOMContentLoa...

原创 前端UI-移动端自适应

<meta name="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">

原创 前端经典CSS重置：Meyer Reset

/*** Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)* http://cssreset.com*/html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abb...

原创 利用栅格系统，构建优秀的响应式设计

一、写在前面今天，90％的媒体互动都是基于屏幕的，通过手机，平板电脑，笔记本电脑，电视和智能手表来与外界产生联系。多屏设计已成为商业设计中不可或缺的一部分，响应式设计正迅速成为常态。作为UI设计师，我们希望为我们的产品在不同尺寸下都能为用户提供良好的用户体验，栅格系统可以帮助我们做到这一点。即使是我们只针对一个尺寸进行设计，我们也经常面临设计布局方面的问题。合理运用栅格系统可以帮助我们控制...

原创 经典CSS sticky footer布局

https://www.cnblogs.com/yujihang/p/6882839.htmlhttps://www.w3cplus.com/css3/css-secrets/sticky-footers.html?utm_source=tuicool&utm_medium=referral4.1固定高度的解决方案为容器推算出其高度,我们可以使用一个容器将<header&...

原创 vue项目PC端随屏幕分辨率与窗口大小自适应（五步完成）

<template> <div class="big"> <div class="box1"></div> <div class="box2"></div> <div class="box3" style="width:1920px;background: skyblue;"&g...

原创 vue如何实现pc端自适应

1.命令 2.安装完成以后在main.js引入 3. 在 vue-cli 生成的 webpack 配置中，vue-loader 的 options 和其他样式文件 loader 最终是都是由 build/utils.js 里的一个方法生成的。我们只需在 cssLoader 后再加上一个 px2remLoader 即可，px2rem-loader 的 remU...

原创 Vue 实现大屏页面的屏幕自适应

1. 在配置文件设置大屏设计的尺寸1920*1080//appConfig.jsexport default{ screen:{ width:1920, height:1080, scale:20 }//大屏设计宽高}2. 定义resetScreenSize.jsimport appConfig from '.....