标签搜索
搜索到
109
篇与
的结果
-
应式数据大屏实现 需求实现响应式数据大屏，适配各种屏幕，不允许出现滚动条方案rem实现原理： 根据屏幕宽度，计算1rem的宽度，配置根元素的font-size,所有的像素单位按照rem计算优点：实现响应式，根据设计稿和VW的宽度实现界面宽度百分百展示缺点： 在非设计稿比例的屏幕下，会出现滚动条scale实现原理： 将设计稿按照比例放大或缩小，在不出现滚动条的情况下，放大至最大展示优点：响应式缩放，没有滚动条，不需要转化单位，按照设计稿一比一开发缺点： 对于部分像素偏小的单位，缩小后模糊本人目前开发采用的是 scale 方案 灵感来自 电商618数据大屏代码实现react获取最佳响应缩放比例import debounce from 'loadsh.debounce' getScale = () => { const {width =1920,height=1080} = this.props const ww = window.inndeWidth/width const wh = window.innerHeight/height return ww<wh?ww:wh } // 可以采用debounce或者自定义一个定时器 setScale = debounce(() => { const scale = this.getScale() this.setState({ scale }) },500) 监听屏幕尺寸改变componDidMount = () =>{ window.addEventLister("resize,this.setScale) }渲染 renderrender(){ const {width=1920,height=1080,children} = this.props return( <div className={{styles.wrap}}> <div style={{ transform:`scale(${scale},${scale}}, transform:`scale(${scale},${scale}}, width, height }}> {{children}} </div> </div> ) }vueApp.vue<!-- html部分 --> <div id="app"> <div class="container" :style="{transform:`scale(${scale},${scale}) translateX(-50%)`,width: `${width}px`,height: `${height}px`}"> <div class="main-wrap"> ... </div> </div> </div>// css部分 html,body,#app{ width: 100%; height: 100%; overflow: hidden; margin: 0; padding: 0; } #app{ position: relative; .container{ position: absolute; left: 50%; transform-origin: 0 0; overflow: hidden; transition: all .3s linear; .main-wrap{ width: 100%; height: 100%; } } }import {getScale,width,height}from './utils/getScale' export default { data(){ return{ width, height, scale: getScale(), // 初始化时候就进行一次获取比例 timer: null // 防抖 } }, methods:{ // 设置缩放比 setScale(){ if(this.timer){ clearTimeOut(this.timer) this.timer = setTimeOut(()=>{ this.scale = getScale() },500) } } }, mounted(){ const that = this window.addEventListener('resize',()=>{ that.setScale() }) }, destoryed(){ window.removeEventListener('resize',this.setScale()) } }utils/getScales.jsconst height = 1080 // 设计稿 height const width = 1920 // 设计稿 width // 获取宽高比例 const getScale = () =>{ const ww = window.innerWidth / width const hh = window.innerHeight / height const scale = ww < wh ? ww : wh return scale }就这样子一款数据大屏就构建好了本人开发大屏的案例 业务数据大屏 和 区块链数据大屏其他的由于需要权限才能观赏就不分享了. -
TypeScript 内置工具详谈 前言TypeScript 提供了几种实用程序类型来助力常见的类型转换。这些实用程序是全局可用的。也就是说全局声明了一些Type, 调用Type就可以方便地进行一些类型转换或者创建新的类型。 不会这些函数一样能写TypeScript你不会真的就不看下文了吧？, 但是掌握后能让你写TypeScript事半功倍。 且掌握这些内置Type是十分必要的。本文章主要对一些比较少用或者难理解的类型做了比较详细的说明。比如 ThisType<T> 等1、Partial 将一个类型的属性全部变为可选定义type Partial<T> = { [P in keyof T]?: T[P]; };从上面的代码中可以看出来该Type使用时需要传入一个泛型T。内部遍历T的所有属性然后创建一个新的 Type，新的Type的所有属性使用 ? 标识，使之为可选。keyof会遍历一个Interface的所有属性名称(key), 生成一个联合类型 "name" | "age" ...，然后可以得到下面代码P in "name" | "age" 这就很明白能看出来了，表明了P为右侧类型使用案例interface UserInfo { name:string; age:number; } // 这里会将 UserInfo 所有的属性变为可选 const foo:Partial<UserInfo> = { name:"张三" }2、Required 将一个类型的属性全部变为必选定义type Required<T> = { [P in keyof T]-?: T[P]; };该Type和Partial刚好是相反的。 从上面的代码中可以看出来该Type实用时需要传入一个泛型T。内部使用-?将T的每个属性去除可选标识使之变成为必填。使用案例interface UserInfo { name?:string; age?:number; } // 这里会将 UserInfo 所有可选的属性变为必选 const foo:Required<UserInfo> = { name:"张三", age:18 }3、Readonly 将一个类型的属性全部变为只读状态定义type Readonly<T> = { readonly [P in keyof T]: T[P]; };从上面的代码中可以看出来该Type实用时需要传入一个泛型T。内部使用readonly将T的每个属性去除可选标识使之变成为只读。使用案例interface UserInfo { name?:string; age?:number; } const foo:Readonly<UserInfo> = { name:"张三", age:18 } foo.name = '李四';// error: 无法分配到 "name" ，因为它是只读属性4、Record 构造一个字面量对象 Type定义type Record<K extends keyof any, T> = { [P in K]: T; };Record 用于方便地构造一个字面量对象。其作用和 { [propName:string]:any } 有些许类似。Record 只需要传入两个 Type 即可创建一个新的 Type，相比于 { [propName:string]:any } 能方便一些。当然除了方便外功能也比它强大，因为Record第一个参数可接收一组key，这样就可以做到定义出一个完整的 Type 了。使用案例// 这是通过 interface 定义出来的。 interface UserInfo { name:string; age:number; } // 我们用 Record 来实现一遍 UserInfo 。 // 注意：后面一个形参和 UserInfo 的是不一样的，因为 Record 第二个参数只能接受一个类型。所以这里要么用 any，要么用这种联合类型。 type UserInfoT = Record<"name" | "age", string | number> // 结果 // type UserInfoT = { // name:string | number; // age:string | number; // }5、Pick 从一个 Type 中选取一些属性来构造一个新的对象 Type定义type Pick<T, K extends keyof T> = { [P in K]: T[P]; };Pick 也用于方便地构造一个字面量对象。其作用和 Record 有些许类似。使用案例interface UserInfo { name:string; age:number; } // 这时候我们只需要 UserInfo 的 name 属性。 type UserInfoT = Pick<UserInfo, "name">6、Omit 从一个对象类型中删除一些属性来构造一个新的对象 Type定义type Omit<T, K extends keyof any> = Pick<T, Exclude<keyof T, K>>;日常使用中Omit 是一个使用频率可能比较高的。和 Pick 刚刚相反，用于排除不需要的属性。使用案例interface UserInfo { name:string; age:number; } // 这时候我们不需要 UserInfo 的 name 属性。 type UserInfoT = Omit<UserInfo, "name">7、Exclude 排除一个联合类型中的某一些类型来构造一个新 Type定义type Exclude<T, U> = T extends U ? never : T;上面说的 Omit 和 Pick 都是对一个字面量对象 Type 的操作。如果要对一个联合类型操作的话需要用到 Exclude 和 Extract使用案例// 排除掉 "name" type UserInfoT = Exclude<"name" | "age", "name">; // 等价于 type UserInfoA = "age";8、Extract 提取出一个联合类型中的某一些类型来构造一个新 Type定义type Extract<T, U> = T extends U ? T : never;和 Exclude 恰好相反。使用案例// 从 T1 中 提取出 T2 type T1 = "name" | "age" | "hob"; type T2 = "name" | "age"; type UserInfoT = Extract<T1, T2>; // 等价于 type UserInfoA = "name" | "age";既然是提出哪为啥不直接用定义好的 T2？因为这样可以保证 UserInfoT 的类型一定是在 T1 中存在的;9、NonNullable 从类型中排除 null 和 undefined 来构造一个新的 Type定义type NonNullable<T> = T extends null | undefined ? never : T;使用案例// 从 UserInfoK 中 排除掉 null | undefined type UserInfoK = NonNullable<"name" | "hob" | undefined>; // 等价于 type UserInfoKA = "name" | "hob";10、Parameters 从 [函数 Type] 的形参构造一个数组 Type定义type Parameters<T extends (...args: any) => any> = T extends (...args: infer P) => any ? P : never;infer标识一个待推导类型，上面定义的意思是：如果 T 为函数类型，那就返回函数的形参。ps: infer和变量似的，先定义一个 infer P 然后 Ts 就会自动推导函数的形参或者返回值、或者数组元素等，然后开发者在合适的位置使用定义好的infer P即可。一个简单的infer案例。加入有这样一个需求：需要将数组类型的 Type 变为联合类型。其他类型的则不变。这样我们就可以写一个这样的 Typetype ArrayToUnion<T> = T extends Array<infer Item> ? Item : T; const a:ArrayToUnion<[string, number]> = "111"; // a: string | number const b:ArrayToUnion<string | number> = "111"; // a: string | number从这个案列的a变量可以看出作用，a变量的类型定义为ArrayToUnion<[string, number]>，这里传入的是个数组[string, number]被ArrayToUnion处理为了string | number。使用案例// 定义一个函数 function getUserInfo(id:string, group:string){} // 获取到函数需要的形参 Type[] type GetUserInfoArg = Parameters<typeof getUserInfo>; const arg:GetUserInfoArg = [ "001", "002" ]; getUserInfo(...arg);ps: 上面代码中的typeof是 ts 提供的操作符不是 js 中的那个typeof，只能用到 ts 的类型定义中, 所以使用typeof getUserInfo才能指向函数Type11、ConstructorParameters 从定义的[构造函数]的形参构造数组 Type定义type ConstructorParameters<T extends abstract new (...args: any) => any> = T extends abstract new (...args: infer P) => any ? P : never;实现原理完全和 Parameters 一样，只不过这个方法接受的事一个类。使用案例class User{ constructor(id:string, group:string){} } type NewUserArg = ConstructorParameters<typeof User>; const arg:NewUserArg = [ "001", "002"]; new User(...arg);12、ReturnType 用函数 Type 的返回值定义一个新的 Type定义type ReturnType<T extends (...args: any) => any> = T extends (...args: any) => infer R ? R : any;使用 infer 实现。比 Parameters 更简单，可以去看上面的 Parameters 就能明白这段代码意思。使用案例// 定义一个函数 Type type GetUserInfo = ()=>string; const rt:ReturnType<GetUserInfo> = 'xxx'; 13、InstanceType 从一个构造函数的实例定义一个新的 Type定义type InstanceType<T extends abstract new (...args: any) => any> = T extends abstract new (...args: any) => infer R ? R : any;使用 infer 实现。和ReturnType实现原理完全一样。使用案例// 定义一个函数 Type type GetUserInfo = ()=>string; const rt:ReturnType<GetUserInfo> = 'xxx'; 14、ThisParameterType 提取函数 Type 的 this 参数生成一个新的 Type定义type ThisParameterType<T> = T extends (this: infer U, ...args: any[]) => any ? U : unknown;从上面定义看出该 Type 对函数的第一个形参 this 做了infer推导。然后返回了推导出来的this。 不清楚infer的话，往上翻，去仔细看看Parameters一节的说明。使用案例// 定义一个函数，并且定义函数 this 类型。 function getUserInfo(this:{ name:string }){} const getUserInfoArgThis: ThisParameterType<typeof getUserInfo> = { name:"王" };15、OmitThisParameter 忽略函数 Type 的 this 参数，生成一个新的函数 Type定义type OmitThisParameter<T> = unknown extends ThisParameterType<T> ? T : T extends (...args: infer A) => infer R ? (...args: A) => R : T;这个Type看着略微复杂。咋们拆一下看就会简单很多。首先说明一下这个Type的这些判断都是干嘛的。上面定义意思是：如果传入的T没有this参数就直接返回T,如果有this参数就继续进行判断，第二层判断为：如果T不是函数那也会直接返回T,最后是重新定义了一个函数然后返回。其中使用infer定义了我们所需要的形参和返回值。这里在座的各位可能会在(...args: infer A) => infer R ? (...args: A) => R : T这里产生疑惑。上面的写法会直接把this参数过滤掉，为了证实这点，我们可以实现一下：type NoThis<T> = T extends (...args: infer A) => infer R ? A : T const a:NoThis<typeof getUserInfo>; // a: [id: string]上面代码中我们直接返回了推导的A，得到了形参A的类型。这里面是不会包含this的。使用案例// 定义一个函数 function getUserInfo(this:{ name:string }, id:string){} // 去除 getUserInfo 函数 this 参，然后创建出来了一个新类型 const aaa: OmitThisParameter<typeof getUserInfo> = (id:string)=>{} 16、ThisType 给对象标记 this 接口这个类型在 lib.d.ts 中定义的就是一个{}空标签，所以用的时候往往比较困惑。特别是没注意看到官网上写的必须开启--noImplicitThis时才可以用的时候。就算你看到了，但是你在他们案例中如果不注意的话还是搞不懂，因为官方案例中设置了这个编译规则 // @noImplicitThis: false。noImplicitThis 规则开启后在函数中的this在不定义的情况下不能使用，相当于严格模式，默认情况下noImplicitThis的值为false，除非手动开启，否则ThisType毫无作用。使用案例// 注意这行注释，必须开启才能看出效果 // @noImplicitThis: true type ObjectDescriptor<D, M> = { data?: D; methods?: M & ThisType<D & M>; // 这个对象中的 this 要指向 D & M， 注意这里和 methods?: D & M 表示表示是不一样的，ThisType 只改变对象的 this }; function makeObject<D, M>(desc: ObjectDescriptor<D, M>): D & M { let data: object = desc.data || {}; let methods: object = desc.methods || {}; return { ...data, ...methods } as D & M; } let obj = makeObject({ data: { x: 0, y: 0 }, methods: { moveBy(dx: number, dy: number) { this.x += dx; this.y += dy; }, }, }); obj.x = 10; obj.y = 20; obj.moveBy(5, 5);17、Uppercase 将字符串中的每个字符转换为大写这是对字符串的操作，所有对字符串的操作在 lib.d.ts 中都找不到具体的定义，文档上说是为了提升性能。type MyText = "Hello, world" type A = Uppercase<MyText>; // type A = "HELLO, WORLD"18、Lowercase 将字符串中的每个字符转换为小写type MyText = "Hello, world" type A = Lowercase<MyText>; // type A = "hello, world"19、Capitalize 将字符串中的第一个字符转换为大写type MyText = "hello, world" type A = Capitalize<MyText>; // type A = "Hello, world"20、Uncapitalize 将字符串中的第一个字符转换为小写type MyText = "Hello, world" type A = Uncapitalize<MyText>; // type A = "hello, world"
-
-
HTTP协议 前后端的数据交互一般基于HTTP协议:HTTP协议构成客户端: 客户端发送请求到服务器端服务器: 服务器端发送响应到客户端在HTTP中数据可以称做资源, 可以是图片, 普通文本等, 资源是通过URL定位的,URL组成部分https://www.cicaba.top/watch?v=1924https:// 协议www.cicaba.top host/watch 路径?v=1924 参数HTTP请求组成部分1. 请求方式常用请求方式说明请求体get获取资源✘post创建资源✔put更新资源✔delete删除资源✘2. 请求头包含额外的信息来帮助服务器如何响应客户端请求3. 请求体发给服务器的资源数据HTTP响应组成部分HTTP版本响应状态码状态码说明100-199一般信息200-299成功响应300-399重定向400-499客户端错误500-599服务端错误响应头响应的额外信息如: cookie响应体服务端返回的数据总结HTTP是无状态的, 每次请求都被认为是全新客户端发出的请求.HTTP2相比HTTP1.1资源以二进制传输, 多路复用, 压缩请求头, server push.
-
vue3.0 性能优化diff算法优化: https://vue-next-template-explorer.netlify.app/Vue2中的虚拟dom是进行全量的对比Vue3新增了静态标记(PatchF1ag)，在与上次虚拟节点进行对比时候，只对比带有patch flag的节点并且可以通过flag的信息得知当前节点要对比的具体内容hoistStatic 静态提升Vue2中无论元素是否参与更新，每次都会重新创建，然后再渲染Vue3中对于不参与更新的元素，会做静态提升，只会被创建一 次，在渲染时直接复用即可cachellandlers 事件侦听器缓存+默认情况下onClick会被视为动态绑定，所以每次都会去追踪它的变化但是因为是同一个函数，所以没有追踪变化，直接缓 存起来复用即可响应数据底层api的优化vue2Object.defineProperty无法监控到数组下标的变化，导致通过数组下标添加元素，不能实时响应；Object.defineProperty只能劫持对象的属性，从而需要对每个对象，每个属性进行遍历，如果，属性值是对象，还需要深度遍历。vue3Proxy可以劫持整个对象，并返回一个新的对象。Proxy不仅可以代理对象，还可以代理数组。还可以代理动态增加的属性。ssr渲染当有大量静态的内容时候，这些内容会被当做纯字符串推进一个buffer里面，即使存在动态的绑定，会通过模板插值嵌入进去。这样会比通过虚拟dmo来渲染的快上很多很多。当静态内容大到一 定量级时候，会用_ createStat icVNode方法在客户端去生成一个static node,这些静态node,会被直接innerHtml,就不需要创建对象，然后根据对象渲染。新增api组合api setupsetup执行时机beforeCreate:表示组件刚刚被创建出来，组件的data和methods还没有初始化好setupCreated:表示组件刚刚被创建出来，并且组件的data和methods已经初始化好setup注意点-由于在执行setup函数的时候，还没有执行Created生命周期方法，所以在setup函数中，是无法使用data和methods．由于我们不能在setup函数中使用data和methods,所以Vue为了避免我们错误的使用，它直接将setup函 数中this修改成了undefinedreactivereactive是Vue3中提供的实现响应式数据的方法，在Vue2中响应式数据是通过defineProperty来实现的，而在Vue3中响应式数据是通过ES6的Proxy来实现的reactive注意点:reactive参数必须是对象(json/arr)-如果给reactive传递了其它对象(number)，默认情况下修改对象，界面不会自动更新，如果想更新，可以通过重新赋值的方式vue3中文文档
-
Markdown 标题类型指令简介标题#一级标题标题##二级标题段落类型指令简介段落enter换行斜体**斜体文本斜体\_\_斜体文本粗体****粗体文本粗体\_\_\_\_粗体文本粗斜体******粗斜体文本粗斜体\_\_\_\_\_\_粗斜体文本分隔线***或---以上分隔线删除线\~\~\~\~删除线下划线\<u>下划线文本脚注[^]脚注1列表类型指令简介有序列表1.有序列表无序列表-或+无序列表区块类型指令简介区块\<区块嵌套区块\<\<嵌套区块代码类型指令简介代码\`\`\`\`\`\`代码连接类型指令简介连接[]()连接连接[][变量]连接表格类型指令简介列表竖线竖线分割列表头竖线----竖线分割表头图片类型指令简介图片\图片变量引用\![][]变量引用高级语法类型指令简介变量[]:变量定义转译\转译字符脚注 ↩
-
js中文简体繁体切换 (function(modules) { 'use strict'; window.Translate = modules[0]; //Translate.BindObj('btnId', '繁', '以繁體中文查看内容'); })([ { strJT: '万与丑专业丛东丝丢两严丧个丬丰临为丽举么义乌乐乔习乡书买乱争于亏云亘亚产亩亲亵亸亿仅从仑仓仪们价众优伙会伛伞伟传伤伥伦伧伪伫体余佣佥侠侣侥侦侧侨侩侪侬俣俦俨俩俪俭债倾偬偻偾偿傥傧储傩儿兑兖党兰关兴兹养兽冁内冈册写军农冢冯冲决况冻净凄凉凌减凑凛几凤凫凭凯击凼凿刍划刘则刚创删别刬刭刽刿剀剂剐剑剥剧劝办务劢动励劲劳势勋勐勚匀匦匮区医华协单卖卢卤卧卫却卺厂厅历厉压厌厍厕厢厣厦厨厩厮县参叆叇双发变叙叠叶号叹叽吁后吓吕吗吣吨听启吴呒呓呕呖呗员呙呛呜咏咔咙咛咝咤咴咸哌响哑哒哓哔哕哗哙哜哝哟唛唝唠唡唢唣唤唿啧啬啭啮啰啴啸喷喽喾嗫呵嗳嘘嘤嘱噜噼嚣嚯团园囱围囵国图圆圣圹场坂坏块坚坛坜坝坞坟坠垄垅垆垒垦垧垩垫垭垯垱垲垴埘埙埚埝埯堑堕塆墙壮声壳壶壸处备复够头夸夹夺奁奂奋奖奥妆妇妈妩妪妫姗姜娄娅娆娇娈娱娲娴婳婴婵婶媪嫒嫔嫱嬷孙学孪宁宝实宠审宪宫宽宾寝对寻导寿将尔尘尧尴尸尽层屃屉届属屡屦屿岁岂岖岗岘岙岚岛岭岳岽岿峃峄峡峣峤峥峦崂崃崄崭嵘嵚嵛嵝嵴巅巩巯币帅师帏帐帘帜带帧帮帱帻帼幂幞干并广庄庆庐庑库应庙庞废庼廪开异弃张弥弪弯弹强归当录彟彦彻径徕御忆忏忧忾怀态怂怃怄怅怆怜总怼怿恋恳恶恸恹恺恻恼恽悦悫悬悭悯惊惧惨惩惫惬惭惮惯愍愠愤愦愿慑慭憷懑懒懔戆戋戏戗战戬户扎扑扦执扩扪扫扬扰抚抛抟抠抡抢护报担拟拢拣拥拦拧拨择挂挚挛挜挝挞挟挠挡挢挣挤挥挦捞损捡换捣据捻掳掴掷掸掺掼揸揽揿搀搁搂搅携摄摅摆摇摈摊撄撑撵撷撸撺擞攒敌敛数斋斓斗斩断无旧时旷旸昙昼昽显晋晒晓晔晕晖暂暧札术朴机杀杂权条来杨杩杰极构枞枢枣枥枧枨枪枫枭柜柠柽栀栅标栈栉栊栋栌栎栏树栖样栾桊桠桡桢档桤桥桦桧桨桩梦梼梾检棂椁椟椠椤椭楼榄榇榈榉槚槛槟槠横樯樱橥橱橹橼檐檩欢欤欧歼殁殇残殒殓殚殡殴毁毂毕毙毡毵氇气氢氩氲汇汉污汤汹沓沟没沣沤沥沦沧沨沩沪沵泞泪泶泷泸泺泻泼泽泾洁洒洼浃浅浆浇浈浉浊测浍济浏浐浑浒浓浔浕涂涌涛涝涞涟涠涡涢涣涤润涧涨涩淀渊渌渍渎渐渑渔渖渗温游湾湿溃溅溆溇滗滚滞滟滠满滢滤滥滦滨滩滪漤潆潇潋潍潜潴澜濑濒灏灭灯灵灾灿炀炉炖炜炝点炼炽烁烂烃烛烟烦烧烨烩烫烬热焕焖焘煅煳熘爱爷牍牦牵牺犊犟状犷犸犹狈狍狝狞独狭狮狯狰狱狲猃猎猕猡猪猫猬献獭玑玙玚玛玮环现玱玺珉珏珐珑珰珲琎琏琐琼瑶瑷璇璎瓒瓮瓯电画畅畲畴疖疗疟疠疡疬疮疯疱疴痈痉痒痖痨痪痫痴瘅瘆瘗瘘瘪瘫瘾瘿癞癣癫癯皑皱皲盏盐监盖盗盘眍眦眬着睁睐睑瞒瞩矫矶矾矿砀码砖砗砚砜砺砻砾础硁硅硕硖硗硙硚确硷碍碛碜碱碹磙礼祎祢祯祷祸禀禄禅离秃秆种积称秽秾稆税稣稳穑穷窃窍窑窜窝窥窦窭竖竞笃笋笔笕笺笼笾筑筚筛筜筝筹签简箓箦箧箨箩箪箫篑篓篮篱簖籁籴类籼粜粝粤粪粮糁糇紧絷纟纠纡红纣纤纥约级纨纩纪纫纬纭纮纯纰纱纲纳纴纵纶纷纸纹纺纻纼纽纾线绀绁绂练组绅细织终绉绊绋绌绍绎经绐绑绒结绔绕绖绗绘给绚绛络绝绞统绠绡绢绣绤绥绦继绨绩绪绫绬续绮绯绰绱绲绳维绵绶绷绸绹绺绻综绽绾绿缀缁缂缃缄缅缆缇缈缉缊缋缌缍缎缏缐缑缒缓缔缕编缗缘缙缚缛缜缝缞缟缠缡缢缣缤缥缦缧缨缩缪缫缬缭缮缯缰缱缲缳缴缵罂网罗罚罢罴羁羟羡翘翙翚耢耧耸耻聂聋职聍联聩聪肃肠肤肷肾肿胀胁胆胜胧胨胪胫胶脉脍脏脐脑脓脔脚脱脶脸腊腌腘腭腻腼腽腾膑臜舆舣舰舱舻艰艳艹艺节芈芗芜芦苁苇苈苋苌苍苎苏苘苹茎茏茑茔茕茧荆荐荙荚荛荜荞荟荠荡荣荤荥荦荧荨荩荪荫荬荭荮药莅莜莱莲莳莴莶获莸莹莺莼萚萝萤营萦萧萨葱蒇蒉蒋蒌蓝蓟蓠蓣蓥蓦蔷蔹蔺蔼蕲蕴薮藁藓虏虑虚虫虬虮虽虾虿蚀蚁蚂蚕蚝蚬蛊蛎蛏蛮蛰蛱蛲蛳蛴蜕蜗蜡蝇蝈蝉蝎蝼蝾螀螨蟏衅衔补衬衮袄袅袆袜袭袯装裆裈裢裣裤裥褛褴襁襕见观觃规觅视觇览觉觊觋觌觍觎觏觐觑觞触觯詟誉誊讠计订讣认讥讦讧讨让讪讫训议讯记讱讲讳讴讵讶讷许讹论讻讼讽设访诀证诂诃评诅识诇诈诉诊诋诌词诎诏诐译诒诓诔试诖诗诘诙诚诛诜话诞诟诠诡询诣诤该详诧诨诩诪诫诬语诮误诰诱诲诳说诵诶请诸诹诺读诼诽课诿谀谁谂调谄谅谆谇谈谊谋谌谍谎谏谐谑谒谓谔谕谖谗谘谙谚谛谜谝谞谟谠谡谢谣谤谥谦谧谨谩谪谫谬谭谮谯谰谱谲谳谴谵谶谷豮贝贞负贠贡财责贤败账货质贩贪贫贬购贮贯贰贱贲贳贴贵贶贷贸费贺贻贼贽贾贿赀赁赂赃资赅赆赇赈赉赊赋赌赍赎赏赐赑赒赓赔赕赖赗赘赙赚赛赜赝赞赟赠赡赢赣赪赵赶趋趱趸跃跄跖跞践跶跷跸跹跻踊踌踪踬踯蹑蹒蹰蹿躏躜躯车轧轨轩轪轫转轭轮软轰轱轲轳轴轵轶轷轸轹轺轻轼载轾轿辀辁辂较辄辅辆辇辈辉辊辋辌辍辎辏辐辑辒输辔辕辖辗辘辙辚辞辩辫边辽达迁过迈运还这进远违连迟迩迳迹适选逊递逦逻遗遥邓邝邬邮邹邺邻郁郄郏郐郑郓郦郧郸酝酦酱酽酾酿释里鉅鉴銮錾钆钇针钉钊钋钌钍钎钏钐钑钒钓钔钕钖钗钘钙钚钛钝钞钟钠钡钢钣钤钥钦钧钨钩钪钫钬钭钮钯钰钱钲钳钴钵钶钷钸钹钺钻钼钽钾钿铀铁铂铃铄铅铆铈铉铊铋铍铎铏铐铑铒铕铗铘铙铚铛铜铝铞铟铠铡铢铣铤铥铦铧铨铪铫铬铭铮铯铰铱铲铳铴铵银铷铸铹铺铻铼铽链铿销锁锂锃锄锅锆锇锈锉锊锋锌锍锎锏锐锑锒锓锔锕锖锗错锚锜锞锟锠锡锢锣锤锥锦锨锩锫锬锭键锯锰锱锲锳锴锵锶锷锸锹锺锻锼锽锾锿镀镁镂镃镆镇镈镉镊镌镍镎镏镐镑镒镕镖镗镙镚镛镜镝镞镟镠镡镢镣镤镥镦镧镨镩镪镫镬镭镮镯镰镱镲镳镴镶长门闩闪闫闬闭问闯闰闱闲闳间闵闶闷闸闹闺闻闼闽闾闿阀阁阂阃阄阅阆阇阈阉阊阋阌阍阎阏阐阑阒阓阔阕阖阗阘阙阚阛队阳阴阵阶际陆陇陈陉陕陧陨险随隐隶隽难雏雠雳雾霁霉霭靓静靥鞑鞒鞯鞴韦韧韨韩韪韫韬韵页顶顷顸项顺须顼顽顾顿颀颁颂颃预颅领颇颈颉颊颋颌颍颎颏颐频颒颓颔颕颖颗题颙颚颛颜额颞颟颠颡颢颣颤颥颦颧风飏飐飑飒飓飔飕飖飗飘飙飚飞飨餍饤饥饦饧饨饩饪饫饬饭饮饯饰饱饲饳饴饵饶饷饸饹饺饻饼饽饾饿馀馁馂馃馄馅馆馇馈馉馊馋馌馍馎馏馐馑馒馓馔馕马驭驮驯驰驱驲驳驴驵驶驷驸驹驺驻驼驽驾驿骀骁骂骃骄骅骆骇骈骉骊骋验骍骎骏骐骑骒骓骔骕骖骗骘骙骚骛骜骝骞骟骠骡骢骣骤骥骦骧髅髋髌鬓魇魉鱼鱽鱾鱿鲀鲁鲂鲄鲅鲆鲇鲈鲉鲊鲋鲌鲍鲎鲏鲐鲑鲒鲓鲔鲕鲖鲗鲘鲙鲚鲛鲜鲝鲞鲟鲠鲡鲢鲣鲤鲥鲦鲧鲨鲩鲪鲫鲬鲭鲮鲯鲰鲱鲲鲳鲴鲵鲶鲷鲸鲹鲺鲻鲼鲽鲾鲿鳀鳁鳂鳃鳄鳅鳆鳇鳈鳉鳊鳋鳌鳍鳎鳏鳐鳑鳒鳓鳔鳕鳖鳗鳘鳙鳛鳜鳝鳞鳟鳠鳡鳢鳣鸟鸠鸡鸢鸣鸤鸥鸦鸧鸨鸩鸪鸫鸬鸭鸮鸯鸰鸱鸲鸳鸴鸵鸶鸷鸸鸹鸺鸻鸼鸽鸾鸿鹀鹁鹂鹃鹄鹅鹆鹇鹈鹉鹊鹋鹌鹍鹎鹏鹐鹑鹒鹓鹔鹕鹖鹗鹘鹚鹛鹜鹝鹞鹟鹠鹡鹢鹣鹤鹥鹦鹧鹨鹩鹪鹫鹬鹭鹯鹰鹱鹲鹳鹴鹾麦麸黄黉黡黩黪黾鼋鼌鼍鼗鼹齄齐齑齿龀龁龂龃龄龅龆龇龈龉龊龋龌龙龚龛龟志制咨只里系范松没尝尝闹面准钟别闲干尽脏拼', strFT: '萬與醜專業叢東絲丟兩嚴喪個爿豐臨為麗舉麼義烏樂喬習鄉書買亂爭於虧雲亙亞產畝親褻嚲億僅從侖倉儀們價眾優夥會傴傘偉傳傷倀倫傖偽佇體餘傭僉俠侶僥偵側僑儈儕儂俁儔儼倆儷儉債傾傯僂僨償儻儐儲儺兒兌兗黨蘭關興茲養獸囅內岡冊寫軍農塚馮衝決況凍淨淒涼淩減湊凜幾鳳鳧憑凱擊氹鑿芻劃劉則剛創刪別剗剄劊劌剴劑剮劍剝劇勸辦務勱動勵勁勞勢勳猛勩勻匭匱區醫華協單賣盧鹵臥衛卻巹廠廳曆厲壓厭厙廁廂厴廈廚廄廝縣參靉靆雙發變敘疊葉號歎嘰籲後嚇呂嗎唚噸聽啟吳嘸囈嘔嚦唄員咼嗆嗚詠哢嚨嚀噝吒噅鹹呱響啞噠嘵嗶噦嘩噲嚌噥喲嘜嗊嘮啢嗩唕喚呼嘖嗇囀齧囉嘽嘯噴嘍嚳囁嗬噯噓嚶囑嚕劈囂謔團園囪圍圇國圖圓聖壙場阪壞塊堅壇壢壩塢墳墜壟壟壚壘墾坰堊墊埡墶壋塏堖塒塤堝墊垵塹墮壪牆壯聲殼壺壼處備複夠頭誇夾奪奩奐奮獎奧妝婦媽嫵嫗媯姍薑婁婭嬈嬌孌娛媧嫻嫿嬰嬋嬸媼嬡嬪嬙嬤孫學孿寧寶實寵審憲宮寬賓寢對尋導壽將爾塵堯尷屍盡層屭屜屆屬屢屨嶼歲豈嶇崗峴嶴嵐島嶺嶽崠巋嶨嶧峽嶢嶠崢巒嶗崍嶮嶄嶸嶔崳嶁脊巔鞏巰幣帥師幃帳簾幟帶幀幫幬幘幗冪襆幹並廣莊慶廬廡庫應廟龐廢廎廩開異棄張彌弳彎彈強歸當錄彠彥徹徑徠禦憶懺憂愾懷態慫憮慪悵愴憐總懟懌戀懇惡慟懨愷惻惱惲悅愨懸慳憫驚懼慘懲憊愜慚憚慣湣慍憤憒願懾憖怵懣懶懍戇戔戲戧戰戩戶紮撲扡執擴捫掃揚擾撫拋摶摳掄搶護報擔擬攏揀擁攔擰撥擇掛摯攣掗撾撻挾撓擋撟掙擠揮撏撈損撿換搗據撚擄摑擲撣摻摜摣攬撳攙擱摟攪攜攝攄擺搖擯攤攖撐攆擷擼攛擻攢敵斂數齋斕鬥斬斷無舊時曠暘曇晝曨顯晉曬曉曄暈暉暫曖劄術樸機殺雜權條來楊榪傑極構樅樞棗櫪梘棖槍楓梟櫃檸檉梔柵標棧櫛櫳棟櫨櫟欄樹棲樣欒棬椏橈楨檔榿橋樺檜槳樁夢檮棶檢欞槨櫝槧欏橢樓欖櫬櫚櫸檟檻檳櫧橫檣櫻櫫櫥櫓櫞簷檁歡歟歐殲歿殤殘殞殮殫殯毆毀轂畢斃氈毿氌氣氫氬氳彙漢汙湯洶遝溝沒灃漚瀝淪滄渢溈滬濔濘淚澩瀧瀘濼瀉潑澤涇潔灑窪浹淺漿澆湞溮濁測澮濟瀏滻渾滸濃潯濜塗湧濤澇淶漣潿渦溳渙滌潤澗漲澀澱淵淥漬瀆漸澠漁瀋滲溫遊灣濕潰濺漵漊潷滾滯灩灄滿瀅濾濫灤濱灘澦濫瀠瀟瀲濰潛瀦瀾瀨瀕灝滅燈靈災燦煬爐燉煒熗點煉熾爍爛烴燭煙煩燒燁燴燙燼熱煥燜燾煆糊溜愛爺牘犛牽犧犢強狀獷獁猶狽麅獮獰獨狹獅獪猙獄猻獫獵獼玀豬貓蝟獻獺璣璵瑒瑪瑋環現瑲璽瑉玨琺瓏璫琿璡璉瑣瓊瑤璦璿瓔瓚甕甌電畫暢佘疇癤療瘧癘瘍鬁瘡瘋皰屙癰痙癢瘂癆瘓癇癡癉瘮瘞瘺癟癱癮癭癩癬癲臒皚皺皸盞鹽監蓋盜盤瞘眥矓著睜睞瞼瞞矚矯磯礬礦碭碼磚硨硯碸礪礱礫礎硜矽碩硤磽磑礄確鹼礙磧磣堿镟滾禮禕禰禎禱禍稟祿禪離禿稈種積稱穢穠穭稅穌穩穡窮竊竅窯竄窩窺竇窶豎競篤筍筆筧箋籠籩築篳篩簹箏籌簽簡籙簀篋籜籮簞簫簣簍籃籬籪籟糴類秈糶糲粵糞糧糝餱緊縶糸糾紆紅紂纖紇約級紈纊紀紉緯紜紘純紕紗綱納紝縱綸紛紙紋紡紵紖紐紓線紺絏紱練組紳細織終縐絆紼絀紹繹經紿綁絨結絝繞絰絎繪給絢絳絡絕絞統綆綃絹繡綌綏絛繼綈績緒綾緓續綺緋綽緔緄繩維綿綬繃綢綯綹綣綜綻綰綠綴緇緙緗緘緬纜緹緲緝縕繢緦綞緞緶線緱縋緩締縷編緡緣縉縛縟縝縫縗縞纏縭縊縑繽縹縵縲纓縮繆繅纈繚繕繒韁繾繰繯繳纘罌網羅罰罷羆羈羥羨翹翽翬耮耬聳恥聶聾職聹聯聵聰肅腸膚膁腎腫脹脅膽勝朧腖臚脛膠脈膾髒臍腦膿臠腳脫腡臉臘醃膕齶膩靦膃騰臏臢輿艤艦艙艫艱豔艸藝節羋薌蕪蘆蓯葦藶莧萇蒼苧蘇檾蘋莖蘢蔦塋煢繭荊薦薘莢蕘蓽蕎薈薺蕩榮葷滎犖熒蕁藎蓀蔭蕒葒葤藥蒞蓧萊蓮蒔萵薟獲蕕瑩鶯蓴蘀蘿螢營縈蕭薩蔥蕆蕢蔣蔞藍薊蘺蕷鎣驀薔蘞藺藹蘄蘊藪槁蘚虜慮虛蟲虯蟣雖蝦蠆蝕蟻螞蠶蠔蜆蠱蠣蟶蠻蟄蛺蟯螄蠐蛻蝸蠟蠅蟈蟬蠍螻蠑螿蟎蠨釁銜補襯袞襖嫋褘襪襲襏裝襠褌褳襝褲襇褸襤繈襴見觀覎規覓視覘覽覺覬覡覿覥覦覯覲覷觴觸觶讋譽謄訁計訂訃認譏訐訌討讓訕訖訓議訊記訒講諱謳詎訝訥許訛論訩訟諷設訪訣證詁訶評詛識詗詐訴診詆謅詞詘詔詖譯詒誆誄試詿詩詰詼誠誅詵話誕詬詮詭詢詣諍該詳詫諢詡譸誡誣語誚誤誥誘誨誑說誦誒請諸諏諾讀諑誹課諉諛誰諗調諂諒諄誶談誼謀諶諜謊諫諧謔謁謂諤諭諼讒諮諳諺諦謎諞諝謨讜謖謝謠謗諡謙謐謹謾謫譾謬譚譖譙讕譜譎讞譴譫讖穀豶貝貞負貟貢財責賢敗賬貨質販貪貧貶購貯貫貳賤賁貰貼貴貺貸貿費賀貽賊贄賈賄貲賃賂贓資賅贐賕賑賚賒賦賭齎贖賞賜贔賙賡賠賧賴賵贅賻賺賽賾贗讚贇贈贍贏贛赬趙趕趨趲躉躍蹌蹠躒踐躂蹺蹕躚躋踴躊蹤躓躑躡蹣躕躥躪躦軀車軋軌軒軑軔轉軛輪軟轟軲軻轤軸軹軼軤軫轢軺輕軾載輊轎輈輇輅較輒輔輛輦輩輝輥輞輬輟輜輳輻輯轀輸轡轅轄輾轆轍轔辭辯辮邊遼達遷過邁運還這進遠違連遲邇逕跡適選遜遞邐邏遺遙鄧鄺鄔郵鄒鄴鄰鬱郤郟鄶鄭鄆酈鄖鄲醞醱醬釅釃釀釋裏钜鑒鑾鏨釓釔針釘釗釙釕釷釺釧釤鈒釩釣鍆釹鍚釵鈃鈣鈈鈦鈍鈔鍾鈉鋇鋼鈑鈐鑰欽鈞鎢鉤鈧鈁鈥鈄鈕鈀鈺錢鉦鉗鈷缽鈳鉕鈽鈸鉞鑽鉬鉭鉀鈿鈾鐵鉑鈴鑠鉛鉚鈰鉉鉈鉍鈹鐸鉶銬銠鉺銪鋏鋣鐃銍鐺銅鋁銱銦鎧鍘銖銑鋌銩銛鏵銓鉿銚鉻銘錚銫鉸銥鏟銃鐋銨銀銣鑄鐒鋪鋙錸鋱鏈鏗銷鎖鋰鋥鋤鍋鋯鋨鏽銼鋝鋒鋅鋶鐦鐧銳銻鋃鋟鋦錒錆鍺錯錨錡錁錕錩錫錮鑼錘錐錦鍁錈錇錟錠鍵鋸錳錙鍥鍈鍇鏘鍶鍔鍤鍬鍾鍛鎪鍠鍰鎄鍍鎂鏤鎡鏌鎮鎛鎘鑷鐫鎳鎿鎦鎬鎊鎰鎔鏢鏜鏍鏰鏞鏡鏑鏃鏇鏐鐔钁鐐鏷鑥鐓鑭鐠鑹鏹鐙鑊鐳鐶鐲鐮鐿鑔鑣鑞鑲長門閂閃閆閈閉問闖閏闈閑閎間閔閌悶閘鬧閨聞闥閩閭闓閥閣閡閫鬮閱閬闍閾閹閶鬩閿閽閻閼闡闌闃闠闊闋闔闐闒闕闞闤隊陽陰陣階際陸隴陳陘陝隉隕險隨隱隸雋難雛讎靂霧霽黴靄靚靜靨韃鞽韉韝韋韌韍韓韙韞韜韻頁頂頃頇項順須頊頑顧頓頎頒頌頏預顱領頗頸頡頰頲頜潁熲頦頤頻頮頹頷頴穎顆題顒顎顓顏額顳顢顛顙顥纇顫顬顰顴風颺颭颮颯颶颸颼颻飀飄飆飆飛饗饜飣饑飥餳飩餼飪飫飭飯飲餞飾飽飼飿飴餌饒餉餄餎餃餏餅餑餖餓餘餒餕餜餛餡館餷饋餶餿饞饁饃餺餾饈饉饅饊饌饢馬馭馱馴馳驅馹駁驢駔駛駟駙駒騶駐駝駑駕驛駘驍罵駰驕驊駱駭駢驫驪騁驗騂駸駿騏騎騍騅騌驌驂騙騭騤騷騖驁騮騫騸驃騾驄驏驟驥驦驤髏髖髕鬢魘魎魚魛魢魷魨魯魴魺鮁鮃鯰鱸鮋鮓鮒鮊鮑鱟鮍鮐鮭鮚鮳鮪鮞鮦鰂鮜鱠鱭鮫鮮鮺鯗鱘鯁鱺鰱鰹鯉鰣鰷鯀鯊鯇鮶鯽鯒鯖鯪鯕鯫鯡鯤鯧鯝鯢鯰鯛鯨鯵鯴鯔鱝鰈鰏鱨鯷鰮鰃鰓鱷鰍鰒鰉鰁鱂鯿鰠鼇鰭鰨鰥鰩鰟鰜鰳鰾鱈鱉鰻鰵鱅鰼鱖鱔鱗鱒鱯鱤鱧鱣鳥鳩雞鳶鳴鳲鷗鴉鶬鴇鴆鴣鶇鸕鴨鴞鴦鴒鴟鴝鴛鴬鴕鷥鷙鴯鴰鵂鴴鵃鴿鸞鴻鵐鵓鸝鵑鵠鵝鵒鷳鵜鵡鵲鶓鵪鶤鵯鵬鵮鶉鶊鵷鷫鶘鶡鶚鶻鶿鶥鶩鷊鷂鶲鶹鶺鷁鶼鶴鷖鸚鷓鷚鷯鷦鷲鷸鷺鸇鷹鸌鸏鸛鸘鹺麥麩黃黌黶黷黲黽黿鼂鼉鞀鼴齇齊齏齒齔齕齗齟齡齙齠齜齦齬齪齲齷龍龔龕龜誌製谘隻裡係範鬆冇嚐嘗鬨麵準鐘彆閒乾儘臟拚', evtObj: null, toFT: document.cookie.indexOf('viewasft=1') != -1, trans: function(txt, isEvtObj) { var chr, i, str = '', strS = this.toFT ? this.strJT : this.strFT, strT = this.toFT ? this.strFT : this.strJT, tPos = -1; if (isEvtObj) { var tmp = strS; strS = strT; strT = tmp; txt = txt.replace(this.toFT ? '繁' : '简', this.toFT ? '简' : '繁'); } for (i = 0; i < txt.length; i++) { chr = txt.charAt(i); tPos = strS.indexOf(chr); if (chr.charCodeAt(0) > 10000 && tPos != -1) str += strT.charAt(tPos); else str += chr; } return str; }, TransTarget: function(tag, isInit) { var childNodes, OO; childNodes = tag ? tag.childNodes : document.body.childNodes; if (!tag) { if (!isInit) { this.toFT = !this.toFT; document.cookie = 'viewasft=' + (this.toFT ? 1 : 0) + ';path=/'; } document.title = this.trans(document.title); this.evtObj.innerHTML = this.trans(this.evtObj.innerHTML, true); this.evtObj.title = this.trans(this.evtObj.title, true); } for (var i = 0; i < childNodes.length; i++) { OO = childNodes[i]; if ("|BR|HR|TEXTAREA|SCRIPT|OBJECT|EMBED|".indexOf("|" + OO.tagName + "|") != -1 || OO == this.evtObj) continue; if (OO.title != "" && OO.title != null) OO.title = this.trans(OO.title); if (OO.alt != "" && OO.alt != null) OO.alt = this.trans(OO.alt); if (OO.tagName == "INPUT" && OO.value != "" && /^(button|reset|submit)$/i.test(OO.type)) OO.value = this.trans(OO.value); if (OO.nodeType == 3) OO.data = this.trans(OO.data); else this.TransTarget(OO); } }, BindObj: function(Id, innerHTML, title, transDelay) { this.evtObj = $('#' + Id).get(0); if (this.evtObj) { var me = this; this.evtObj.href = "#"; this.evtObj.onclick = function() { me.TransTarget(); return false; }; this.evtObj.innerHTML = this.trans(innerHTML, true); this.evtObj.title = this.trans(title, true); if (this.toFT) setTimeout(function() { me.TransTarget(false, true); }, transDelay ? transDelay : 50); } } } ]);调用方法：<a href="" id="btnId">繁</a> <script> Translate.BindObj('btnId', '繁', '以繁體中文查看内容'); </script>
-
CSS常用片段 清除浮动.clearfix:after { content: "\00A0"; display: block; visibility: hidden; width: 0; height: 0; clear: both; font-size: 0; line-height: 0; overflow: hidden; } .clearfix { zoom: 1; }垂直水平居中绝对定位方式且已知宽高position: absolute; top: 50%; left: 50%; margin-top: -3em; margin-left: -7em; width: 14em; height: 6em;绝对定位 ＋ 未知宽高 ＋ translateposition: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); //需要补充浏览器前缀flex 轻松搞定水平垂直居中(未知宽高)display: flex; align-items: center; justify-content: center;利用绝对定位宽高拉升原理，中心居中元素 position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto;利用相对定位于 CSS3 使元素垂直居中 position: relative; top: 50%; -webkit-transform: -webkit-translateY(-50%); -moz-transform: -moz-translateY(-50%); -o-transform: -o-translateY(-50%); transform: translateY(-50%);文本末尾添加省略号宽度固定，适合单行显示...overflow: hidden; text-overflow: ellipsis; white-space: nowrap;宽度不固定，适合多行以及移动端显示overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;简洁 loading 效果.loading:after { display: inline-block; overflow: hidden; vertical-align: bottom; content: "\2026"; -webkit-animation: ellipsis 2s infinite; } // 动画部分 @-webkit-keyframes ellipsis { from { width: 2px; } to { width: 15px; } }自定义文本选中样式// 注意只能修改这两个属性 字体颜色 选中背景颜色 element::selection { color: green; background-color: pink; }顶角贴纸效果<div class="wrap"> <div class="ribbon"> <a href="#">Fork me on GitHub</a> </div> </div> /* 外层容器几本设置 */ .wrap { width: 160px; height: 160px; overflow: hidden; position: relative; background-color: #f3f3f3; } .ribbon { background-color: #a00; overflow: hidden; white-space: nowrap; position: absolute; /* shadom */ -webkit-box-shadow: 0 0 10px #888; -moz-box-shadow: 0 0 10px #888; box-shadow: 0 0 10px #888; /* rotate */ -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); /* position */ left: -50px; top: 40px; } .ribbon a { border: 1px solid #faa; color: #fff; display: block; font: bold 81.25% "Helvetica Neue", Helvetica, Arial, sans-serif; margin: 1px 0; padding: 10px 50px; text-align: center; text-decoration: none; /* shadow */ text-shadow: 0 0 5px #444; }input 占位符input::-webkit-input-placeholder { color: green; background-color: #f9f7f7; font-size: 14px; } input::-moz-input-placeholder { color: green; background-color: #f9f7f7; font-size: 14px; } input::-ms-input-placeholder { color: green; background-color: #f9f7f7; font-size: 14px; }移动端可点击元素去处默认边框-webkit-tap-highlight-color: rgba(255, 255, 255, 0);首字下沉element:first-letter { float: left; color: green; font-size: 30px; }鼠标手型a[href], input[type="submit"], input[type="image"], input[type="button"], label[for], select, button { cursor: pointer; }屏蔽 Webkit 移动浏览器中元素高亮效果在访问移动网站时，你会发现，在选中的元素周围会出现一些灰色的框框，使用以下代码屏蔽这种样式-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;去默认样式//移除常用标签的浏览器默认的 margin 和 padding body, p, h1, h2, h3, h4, h5, h6, dl, dd, ul, ol, th, td, button, figure, input, textarea, form { margin: 0; padding: 0; } //统一 input、select、textarea 宽度 input, select, textarea { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } table { /*table 相邻单元格的边框间的距离设置为 0*/ border-spacing: 0; /*默认情况下给 tr 设置 border 没有效果，如果 table 设置了边框为合并模式：「border-collapse: collapse;」就可以了*/ border-collapse: collapse; } //移除浏览器部分元素的默认边框 img, input, button, textarea { border: none; -webkit-appearance: none; } input { /*由于 input 默认不继承父元素的居中样式，所以设置：「text-align: inherit」*/ text-align: inherit; } textarea { /*textarea 默认不可以放缩*/ resize: none; } //取消元素 outline 样式 a, h1, h2, h3, h4, h5, h6, input, select, button, option, textarea, optgroup { font-family: inherit; font-size: inherit; font-weight: inherit; font-style: inherit; line-height: inherit; color: inherit; outline: none; } //取消超链接元素的默认文字装 a { text-decoration: none; } ol, ul { /*开发中 UI 设计的列表都是和原生的样式差太多，所以直接给取消 ol，ul 默认列表样式*/ list-style: none; } button, input[type="submit"], input[type="button"] { /*鼠标经过是「小手」形状表示可点击*/ cursor: pointer; } input::-moz-focus-inner { /*取消火狐浏览器部分版本 input 聚焦时默认的「padding、border」*/ padding: 0; border: 0; } //取消部分浏览器数字输入控件的操作按钮 input[type="number"] { -moz-appearance: textfield; } input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }chrome 内核 浏览器 position: fixed 防止抖动position: fixed; -webkit-transform: translateZ(0);强制换行/自动换行/强制不换行/* 强制不换行 */ white-space: nowrap; /* 自动换行 */ word-wrap: break-word; word-break: normal; /* 强制英文单词断行 */ word-break: break-all;
-
Caddy - 方便够用的 HTTPS server 1 安装用过 golang 的应该都知道，golang 程序基本上不会有各种依赖，都是光秃秃一个可执行程序，cp 到 /usr/local/bin 就算安装完成了，所以说安装 caddy 是很简单的，我给出三种方法。1.1 脚本安装curl -s https://getcaddy.com | bashcaddy 官方给出了一个安装脚本，执行上面的命令就可以一键安装 caddy，等执行结束后，使用 which caddy，可以看到 caddy 已经被安装到了 /usr/local/bin/caddy1.2 手动安装https://caddyserver.com/download 点这个链接进入到 caddy 官网的下载界面，网页左侧可以选择平台和插件，如果在 Linux 服务器上使用的话，platform 选择 Linux 64-bit 就可以了，plugins 如果暂时不需要的话，可以不选。然后点击下面的 DOWNLOAD 按钮，就下载到 caddy 了。同理，解压之后用 cp 命令放到 /usr/local/bin/caddy 就完成了安装。image_1bn3mbk8jov2es3vu41l842ac9.png-177.7kB1.3 源码安装go get github.com/mholt/caddy/caddy对于安装了 golang 编译器的同学，只需要执行 go get 就能到 $GOPATH/bin 里，是否 cp 到 /usr/local/bin 里就看心情了。使用源码安装可以安装到最新版本的 caddy，功能上一般是最新的，而且因为是本地编译，性能可能会稍微高一些，但是可能会存在不稳定的现象。2 配置2.1 临时文件服务器Caddy 的配置文件叫做 Caddyfile，Caddy 不强制你把配置文件放到哪个特定文件夹，默认情况下，把 Caddyfile 放到当前目录就可以跑起来了，如下：echo 'localhost:8888' >> Caddyfile echo 'gzip' >> Caddyfile echo 'browse' >> Caddyfile caddy在随便一个目录里执行上面代码，然后在浏览器里打开 http://localhost:8888 发现 caddy 已经启动了一个文件服务器。当临时需要一个 fileserver 的时候（比如共享文件），使用 caddy 会很方便。2.2 生产环境使用当然了，在生产环境使用的时候就不能这么草率的把配置文件放到当前目录了，一般情况下会放到 /etc/caddy 里。sudo mkdir /etc/caddy sudo touch /etc/caddy/Caddyfile sudo chown -R root:www-data /etc/caddy除了配置文件，caddy 会自动生成 ssl 证书，需要一个文件夹放置 ssl 证书。sudo mkdir /etc/ssl/caddy sudo chown -R www-data:root /etc/ssl/caddy sudo chmod 0770 /etc/ssl/caddy因为 ssl 文件夹里会放置私钥，所以权限设置成 770 禁止其他用户访问。最后，创建一下放置网站文件的目录，如果已经有了，就不需要创建了。sudo mkdir /var/www sudo chown www-data:www-data /var/www创建好这些文件和目录了之后，我们需要把 caddy 配置成一个服务，这样就可以开机自动运行，并且管理起来也方便。因为目前大多数发行版都使用 systemd 了，所以这里只讲一下如何配置 systemd，不过 caddy 也支持配置成原始的 sysvinit 服务，具体方法看这里。sudo curl -s https://raw.githubusercontent.com/mholt/caddy/master/dist/init/linux-systemd/caddy.service -o /etc/systemd/system/caddy.service # 从 github 下载 systemd 配置文件 sudo systemctl daemon-reload # 重新加载 systemd 配置 sudo systemctl enable caddy.service # 设置 caddy 服务自启动 sudo systemctl status caddy.service # 查看 caddy 状态3 Caddyfile基本的安装配置搞定之后，最重要的就是如何写 Caddyfile了。可以直接 vim /etc/caddy/Caddyfile 来修改 Caddyfile，也可以再自己电脑上改好然后 rsync 到服务器上。如果修改了 Caddyfile 发现没有生效，是需要执行一下 sudo systemctl restart caddy.service 来重启 caddy 的。3.1 Caddyfile 的格式Caddfile的格式还是比较简单的，首先第一行必须是网站的地址，例如：localhost:8080或lengzzz.com地址可以带一个端口号，那么 caddy 只会在这个端口上开启 http 服务，而不会开启 https，如果不写端口号的话，caddy 会默认绑定 80 和 443 端口，同时启动 http 和 https 服务。地址后面可以再跟一大堆指令（directive）。Caddyfile 的基本格式就是这样，由一个网站地址和指令组成，是不是很简单。3.2 指令指令的作用是为网站开启某些功能。指令的格式有三种，先说一下最简单的不带参数的指令比如：railgun.moe # 没错，moe后缀的域名也可以哦gzip第二行的 gzip 就是一个指令，它表示打开 gzip 压缩功能，这样网站在传输网页是可以降低流量。第二种指令的格式是带简单参数的指令：railgun.moe gzip log /var/log/caddy/access.log tls lengz@lengzzz.com root /var/www/第三行，log 指令会为网站开启 log 功能，log 指令后的参数告诉 caddy log 文件存放的位置。第四行的 tls 指令告诉 caddy 为网站开启 https 并自动申请证书，后面的 email 参数是告知 CA 申请人的邮箱。（caddy 会默认使用 let's encrypt 申请证书并续约，很方便吧）另外，简单参数也可能不只一个，比如 redir 指令：railgun.moe gzip log /var/log/caddy/access.log tls /etc/ssl/cert.pem /etc/ssl/key.pem root /var/www/ redir / https://lengzzz.com/archive/{uri} 301上面的 redir 指令带了三个参数，意思是把所有的请求使用 301 重定向到 https://lengzzz.com/archive/xxx，这个指令在给网站换域名的时候很有用。另外 tls 指令变了，不单单传 email一个参数， 而是分别传了证书和私钥的路径，这样的话 caddy 就不会去自动申请证书，而是使用路径给出的证书了。在这个例子里还使用了 {uri} 这样的占位符（placeholder），详细的列表可以在这里查询到：https://caddyserver.com/docs/placeholders。最后一种指令是带复杂参数的，这种指令包含可能很多参数，所以需要用一对花括号包起来，比如 header 指令：railgun.moe gzip log /var/log/caddy/access.log tls lengz@lengzzz.com root /var/www/ header /api { Access-Control-Allow-Origin * Access-Control-Allow-Methods "GET, POST, OPTIONS" -Server } fastcgi / 127.0.0.1:9000 php { index index.php } rewrite { to {path} {path}/ /index.php?{query} }6-10 行的 header 指令代表为所有的 /api/xxx 的请求加上 Access-Control-Allow-Origin 和 Access-Control-Allow-Methods 这两个 header，从而能支持 javascript 跨域访问 ，第 9 行代表删除 Server header，防止别人看到服务器类型。11-13 行使用了 fastcgi 指令，代表把请求通过 fastcgi 传给 php，ruby 等后端程序。14-15 行，使用了 rewrite 指令，这个指令的作用是 服务器内部重定向 在下面的参数 to 后面，又跟了三个参数，这个功能上有点类似 nginx 的 try_files 。告诉 caddy 需要先查看网址根目录 /var/www 里有没有 {path} 对应的文件，如果没有再查看有没有 {path} 对应的目录，如果都没有，则转发给 index.php 入口文件。这个功能一般会用在 PHP 的 MVC 框架上使用。随着一步步完善这个 Caddyfile，目前这个版本的 Caddyfaile 已经可以直接在网站中使用了。3.3 多 HOST 网站刚才说的一直都是单个域名的网址，那么如果在同一个服务器上部署多个域名的网站呢？很简单，只需要在域名后面跟一个花括号扩起来就可以了，如下：railgun.moe { gzip log /var/log/caddy/railgun_moe.log tls lengz@lengzzz.com root /var/www/ header /api { Access-Control-Allow-Origin * Access-Control-Allow-Methods "GET, POST, OPTIONS" -Server } fastcgi / 127.0.0.1:9000 php { index index.php } rewrite { to {path} {path}/ /index.php?{query} } } lengzzz.com { tls lengz@lengzzz.com log /var/log/caddy/lengzzz_com.log redir / https://railgun.moe/{uri} 301 }
-
PM2 pm2常用命令记录$ pm2 start app.js # 启动app.js应用程序$ pm2 start app.js -i 4 # cluster mode 模式启动4个app.js的应用实例 4个应用程序会自动进行负载均衡$ pm2 start app.js --name="api" # 启动应用程序并命名为 "api"$ pm2 start app.js --watch # 当文件变化时自动重启应用$ pm2 start script.sh # 启动 bash 脚本$ pm2 list # 列表 PM2 启动的所有的应用程序$ pm2 monit # 显示每个应用程序的CPU和内存占用情况$ pm2 show [app-name] # 显示应用程序的所有信息$ pm2 logs # 显示所有应用程序的日志$ pm2 logs [app-name] # 显示指定应用程序的日志$ pm2 flush # 清空所有日志文件$ pm2 stop all # 停止所有的应用程序$ pm2 stop 0 # 停止 id为 0的指定应用程序$ pm2 restart all # 重启所有应用$ pm2 reload all # 重启 cluster mode下的所有应用$ pm2 gracefulReload all # Graceful reload all apps in cluster mode$ pm2 delete all # 关闭并删除所有应用$ pm2 delete 0 # 删除指定应用 id 0$ pm2 scale api 10 # 把名字叫api的应用扩展到10个实例$ pm2 reset [app-name] # 重置重启数量$ pm2 startup # 创建开机自启动命令$ pm2 save # 保存当前应用列表$ pm2 resurrect # 重新加载保存的应用列表$ pm2 update # Save processes, kill PM2 and restore processes$ pm2 generate # Generate a sample json configuration filepm2文档地址：http://pm2.keymetrics.io/docs/usage/quick-start/
