- 博客(16)
- 收藏
- 关注
RSS订阅原创 【专题】常用JavaScript正则表达式（regexp）汇编与示例
1 概述1.1 前言目前收集整理了21个常用的javaScript正则表达式，其中包括用户名、密码强度、整数、数字、电子邮件地址（Email）、手机号码、身份证号、URL地址、 IP地址、 十六进制颜色、 日期、 微信号、车牌号、中文正则等。表单验证处理必备，赶紧收藏吧！还会陆续加入新的正则进来，大家多提宝贵意见！2 正则列表2.1 用户名正则2.1.1 基本用户名正则在做用户注册时...
2019-04-25 10:59:06
164
翻译 学习《CSS选择器Level-4》不完全版
1 概述1.1 前言选择器是CSS的核心组件。本文依据W3C的Selectors Level 4规范，概括总结了Level1-Level4中绝大多数的选择器，并做了简单的语法说明及示例演示。希望对程序员有所助益。2 元素选择器2.1 类型选择器-h1类型选择器也可以称为标签名选择器，会选中文档中该类型元素的实例。h1 { color: red;}将文档中元素类型为h1的颜...
2019-04-10 16:09:39
252
原创 【基础】固定列宽的表格及示例演示
引言对我来说，table 有一个非常有用，支持性也很好的 CSS 属性，但它却很少为人所知。它改变了表格的渲染方式，并生成一个更加稳定可靠的布局。它就是：table { table-layout: fixed;}table-layout的缺省值是 auto，这个属性值及其效果大家十分熟悉。对我来说其效果十分的怪异，具体见如下演示：查看演示效果fixed属性...
2018-08-14 17:59:24
1073
原创 使用min-content实现容器宽度自适应于内部元素
前言设计师可以分为如下两类：先做好设计，然后将内容放入静态框架中优秀的设计师充分考虑内容的各个方面及其上下文，并创建适合于内容的设计HTML原生就是响应式的（HTML内容在视口内流式的分布）。随着CSS的广泛应用，设计者创建了许多固定布局的“盒子”并把内容强制的放在盒子之中，这有悖于HTML原生响应的特性。过去几年出现了一场革命，包括自适应设计，响应式设计，移动优先设计等。所...
2018-08-10 16:28:52
174
原创 【基础】CSS实现多重边框的5种方式
简言目前最优雅地实现多重边框的方案是利用CSS3 的 box-shadow属性，但如果要兼容老的浏览器，则需要选择其它的方案。本文简要地列举了几种多重边框的实现方案，大家可以根据项目实际及兼容性要求等情况，选择最适合的实现方案。1 利用描边(outline)属性方案1利用描边(outline)属性结合border属性实现双重边框。此方案实现简单，兼容性好，能兼容除IE6,7以外...
2018-05-04 23:46:12
694
原创 【图片版】CSS网格布局（Grid）完全教程
简言CSS网格布局（Grid）是一套二维的页面布局系统，它的出现将完全颠覆页面布局的传统方式。传统的CSS页面布局 一直不够理想。包括table布局、浮动、定位及内联块等方式，从本质上都是Hack的方式，并且遗漏了一些重要的功能（比如：垂直居中）。Flexbox的出现部分解决了上述问题，但Flex布局是为了解决简单的一维布局，适用于页面局部布局。而Grid天然就是为了解决复杂的二维布局而出现的...
2018-05-02 14:39:54
260
原创 【基础】EM 还是 REM？这是一个问题！
简言应用象EM 和 REM这种相对长度单位进行页面排版是WEB开发中的最佳实践。在页面排版中较好应用EM 和 REM，根据设备尺寸缩放显示元素的大小。这就使得组件在不同设备上都达到最佳的显示效果成为可能。但问题是究竟该用 EM 还是 REM 呢？关于这个问题一直存在比较大的争议。本文将会给大家介绍究竟什么是 EM 和 REM 和如何进行两者的选择，以及结合两者优势构建模块化的WEB组件。...
2018-04-20 14:44:36
152
原创 【基础】在css中绘制三角形及相关应用
简言本文简要阐述了用CSS边框的方法在页面上绘制三角形，包括几种典型的三角形绘制，还介绍了几个简单的应用场景。利用边框绘制三角形方法只是众多方案中的一种，大家根据项目实际，选用最适宜项目的方案。1 基本原理在CSS中，我们可以利用border-top、border-left、border-bottom、border-left四个属性来绘制三角形。实现的基本原理参见下面的演示代码...
2018-04-14 23:50:12
125
原创 【基础知识】Flex-弹性布局原来如此简单！！
简言布局的传统解决方案是基于盒状模型，依赖 display + position + float 方式来实现，灵活性较差。2009年，W3C提出了一种新的方案-Flex，Flex是Flexible Box的缩写，意为”弹性布局”。Flex可以简便、完整、响应式地实现多种页面布局。下面我们就从基础语法开始，一起来感受下Flex的魅力吧！1 基本概念采用 Flex 布局的元素，称为...
2018-04-02 21:53:00
1568
【基础】这15种CSS居中的方式，你都用过哪几种？
简言CSS居中是前端工程师经常要面对的问题，也是基本技能之一。今天有时间把CSS居中的方案汇编整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15种。如有漏掉的，还会陆续的补充进来，算做是一个备忘录吧。css居中1 水平居中1.1 内联元素水平居中利用 text-align: center 可以实现在块级元素内部的内联元素水平居中。此方法对内联元素(inline)...
2018-04-01 22:52:48
111
【收藏】这么多WEB组件(CSS)，攒一个网站够了吧？
简言总是喜欢简单又精致的东西，美的不繁复也不张扬。这是闷骚程序员的癖好么？闲来无事，把收集到的部分WEB组件整理汇总一下，攒一个逼格高一点的网站够了吧？CSS组件1 表单(form)相关1.1 输入框(input)一个简单的输入框样式，简捷又不夸张。需要约30行的CSS代码。输入框(input)样式图演示程序1.2 单选多选框(checkbox,radio)浏...
2018-03-30 14:20:04
201
原创 【收藏】这么多WEB组件(CSS)，攒一个网站够了吧？
1 表单(form)相关1.1 输入框(input)一个简单的输入框样式，简捷又不夸张。需要约30行的CSS代码。演示程序1.2 单选多选框(checkbox,radio)浏览器内置的checkbox及radio样式效果太差，本例展示了一个简单大方的单选多选框样式。需要约25行的CSS代码，额外需要搭配三个png小图标。演示程序1.3 选择框(sel...
2018-03-29 10:00:09
235
原创 【基础】这15种CSS居中的方式，你都用过哪几种？
简言CSS居中是前端工程师经常要面对的问题，也是基本技能之一。今天有时间把CSS居中的方案汇编整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15种。如有漏掉的，还会陆续的补充进来，算做是一个备忘录吧。1 水平居中1.1 内联元素水平居中利用 text-align: center 可以实现在块级元素内部的内联元素水平居中。此方法对内联元素(inline), 内...
2018-03-25 09:34:59
2621
原创 【从0到1】分步实现一个出生日期的正则表达式(JavaScript)
简言在表单验证中，经常会用正则表达式做出生日期校验。本文把出生日期分割成几个部分，分步地介绍了实现一个出生日期校验的完整过程。相信您在理解了本篇的内容后，对如何编写和如何应用正则表达式会有进一步的理解和体会。声明：本文目的是为了阐述如何编写一个正则表达式的过程。另本文所涉代码皆未经严格测试。我们将一个形式如 2018-06-15 的出生日期分割个年份，月份和日期三个组成部分，分别来...
2018-03-22 08:24:37
836
原创 基于规则评分的密码强度检测算法分析及实现(JavaScript)
简言用正则表达式做用户密码强度的通过性判定，过于简单粗暴，不但用户体验差，而且用户帐号安全性也差。那么如何准确评价用户密码的强度，保护用户帐号安全呢？本文分析介绍了几种基于规则评分的密码强度检测算法，并给出了相应的演示程序。大家可以根据自己项目安全性需要，做最适合于自己的方案选择。 1 方案1 （简单）...
2018-03-20 14:18:25
132
原创 基于规则评分的密码强度检测算法分析及实现(JavaScript)
简言用正则表达式做用户密码强度的通过性判定，过于简单粗暴，不但用户体验差，而且用户帐号安全性也差。那么如何准确评价用户密码的强度，保护用户帐号安全呢？本文分析介绍了几种基于规则评分的密码强度检测算法，并给出了相应的演示程序。大家可以根据自己项目安全性需要，做最适合于自己的方案选择。1 方案1 （简单）方案1算法通过密码构成分析，结合权重分派，统计得出密码强度得分。得分越高，表示密码强度越大，也就越...
2018-03-20 09:24:07
500
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人