css3新增了相对单位 rem ,使用rem同em一样皆为相对字体大小单位，不同的是rem相对的是HTML根元素。鉴于很多网友提到了rem，所以我这里就对其中一个总结。 在Web中使用什么单位来定义页...

在商城项目中，购物车是一个很重要的功能。其中最常见的是购物车中对库存的+-操作，包括抢购后面有很多算法。但是作为前端来说，购物车的结算中的+-就是一个计算而已。传统的实...

CSS mask遮罩属性的历史非常久远了，远到比CSS3 border-radius等属性还要久远，最早是出现在Safari浏览器上的，差【文章源自：ddos攻击防御 复制请保留原URL】不多可以追溯到09年。 不过那个...

具体代码如下所示： div id=div2/divdiv id=div3p你好/p/div 这是html代码部分，原本想做一个遮盖罩的效果，当鼠标移动到div2的时候，div3会出现微微遮一下div2. 所以最开始的css代码是这样的 做...

有些时候需要用到mouseover和mouseout这两个鼠标事件，但是写js又比较麻烦，还要添加监听事件，所以能用css解决的东西尽量yongcss解决，这样可以提高性能，下面说一下我对:hover 的了解...

使用技巧会让人变的越来越懒，没错，我就是想让你变懒。下面是我收集的CSS高级技巧，希望你懒出境界。 1. 黑白图像 这段代码会让你的彩色照片显示为黑白照片，是不是很酷？ img...

六边形的实现原理其实就是通过旋转三个重叠的矩形得到的，如下图所示： 这里为了得到一个正的六边形，两个矩形旋转的角度必须为-60deg和60deg，以及矩形高宽比必须是Math.sqrt(3) :...

本文主要介绍了css实现六边形图片的示例代码，分享给大家，具体如下： 不说别的，先上效果： 用简单的div配合伪元素，即可画出这幅六边形图片，原理是三个相同宽高的div，通过定...

渐进增强和优雅降级这两个概念是在 CSS3 出现之后火起来的。由于低级浏览器不支持 CSS3，但是 CSS3 特效太优秀不忍放弃，所以在高级浏览器中使用CSS3，而在低级浏览器 只保证最基本的...

本文介绍了css3新单位vw、vh、vmin、vmax的使用详解，分享给大家，具体如下: 1，vw、vh、vmin、vmax 的含义 （1）vw、vh、vmin、vmax 是一种视窗单位，也是相对单位。它相对的不是父节点或者...

本文介绍了CSS经典三栏布局方案，分享给大家，也给自己做个笔记，具体如下： 三栏布局，顾名思义就是两边固定，中间自适应。三栏布局在开发十分常见 1. float布局 最简单的三栏布...

对于前端er来说，Less或Sass已经是一项必备的基本技能，有了这个利器，可以省下前端开发者的很多编码时间，让你写CSS如行云流水一般，然后最近我在Less里加入calc时确发现了有点问题...

需求：实现鼠标悬停在链接上时，链接字体加粗的功能。 实现方式1： a:hover{font-weight:blod} 结果鼠标悬停的时候，页面会有跳动的现象。因为改变字体的时候改变了元素的大小，所以引...

前面的话 CSS以图换字的技术，很久都没人提起了。它是一种在h1标签内，使用图像替换文本元素的技术，使页面在设计和可访问性之间达到平衡。本文将详细介绍CSS以图换字的9种方法...

在写样式时，往往是添加了一个样式，又或者是修改了某个属性，就达到了我们的预期。 而BFC就潜藏在其中，当你修改样式时，一不小心就能触发它而毫无察觉，因此没有意识到BFC的神...

前言 前端本身很杂，想必在学前端的大家都懂，前端技能的各种学习心得，各种教程，只要你有一颗学习的心都可以搞定，关键在于你有没有需求分析的能力，解决问题的能力，这两个...

如上图所示，在许多的活动宣传html5中会经常需要用到这样的一个动画效果。特别是快到年底了，也许有同学正在为了公司的活动页面而忙碌，get到这样一个小技能说不定刚好对你有帮...

前言 最近公司的ui突然跑过来问我一个问题：如何在不影响操作的情况下，把input的光标隐藏了？。 我相信很多人会跟我一样，觉得这是个什么狗屁需求，输入框不要光标这不是反人类...

本文介绍了CSS 利用table实现五种常用布局的方法示例，分享给大家，具体如下： 布局一： 效果： 代码： html： div class=headerheader/divdiv class=mainmain/divdiv class=footerfooter/div 注意：div中要有...

CSS3中的变形功能：在CSS3中可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动着四种类型的变形功能。 1、如何使用transform功能： （1）在CSS3中通过transform属性来实现tr...

昨天在做一个旅游页面的项目，前端页面实现的过程中遇到这样一个需求。需要把一组图片形成手风琴的展示效果。认真的思考一遍后，决定就用普通的HTML+CSS就可以实现这个需求。今...

后代选择符用于选取一个标签的所有后代，包括子代和孙辈等；而子代选择符只选取指定父辈的子代标签（指定标签元素的第一代子元素）。 子代选择符使用一个额外的符号（尖括号...

缘起 人家都说 康奈尔笔记 法，很好用呢，能抵抗遗忘曲线，让你的笔记事半功倍，有兴趣的同学自行百度哈。 网上有很多现成的模板，下载下来之后吧，看着好像在上面写英文可能更...

2018年已经过了一周，总结一下2017年在公司wiki上写的一篇关于css布局的知识，当时也借鉴了几个大神写的css布局知识，和自己在项目中遇到的坑。废话不多说。请看以下的干货。 1、左...

如何绘制一个圆圆的loading圈 小程序里需要一个像下面的loading，原生的没有，引入别的组件库又太大，所有决定自己写个。 1.基本原理 动态的实现原理是给8个小圆圈设置透明度由大变...

本文介绍了css 进度条的文字根据进度渐变的示例代码，分享给大家，具体如下： 需求 1.进度条里面的文字需要根据进度的长度而变化 原理 用两个一模一样的样式的 div 重叠起来 效果...

本篇文章主要介绍了纯CSS实现下拉菜单的示例代码，分享给大家，具体如下： 将下拉菜单的ul高度设置为0，并且超出部分隐藏掉。 设置下拉菜单的高度添加过渡效果，高度为auto时过渡...

近日，很多浏览器按钮点击会出现以下冲击波效果，出于好奇，参考网上的资料，将这个效果研究实现下。 实现思路： 观察波由小变大，涉及的css3属性变化有width,height,left,top,opacity,首...

CSS 居中【转自：http://www.1234xp.com/kt.html 转载请说明出处】对齐 代码中均省略了浏览器前缀 以下例子以我的个人的标准排序 当然也有更多的居中处理方法 但我觉得只有这5种方法是最完...

Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sas...

下面一段代码给大家介绍css3中的calc()方法，具体内容如下所示： div style=width:100px; height:50px; background:red; div style=width:100%; height:20px; margin:5px; background:green;/div/div [Ctrl+A 全部选择 提示：您...

在某些页面上常常看到波浪的效果，虽然只有装饰的作用，但是却让页面看上去更生动了，同时某些情况下也能起到进度条的作用，而波浪的形式却比普通进度条更美观有趣。 如果想要...

CSS的定位属性有三种，分别是绝对定位、相对定位、固定定位。 position: absolute; !-- 绝对定位 --position: relative; !-- 相对定位 --position: fixed; !-- 固定定位 -- 下面逐一介绍。 相对定位 相对定...

工作时遇到这样一个问题:根据某元素所包含的子元素个数，分别设置不同的样式，这个用js可以解决，不过个人认为用css解决可能更简单一点。这也正好加深了我对css选择器的理解和运...

当一个网站或者 App 的规模达到一定程度，需要分析用户在 App 或者网站的相应操作，则需要埋点统计用户行为，这个不用多说，具体实现有 JS 脚本写好埋点事件并调接口，今天 get 到一...

效果图如下所示： 直接上代码！ !DOCTYPE htmlhtml lang=enheadtitle小三角/titlestyle.up-triangle{width:0px;height:0px;border-bottom:30px solid #000;border-left:15px solid transparent;border-right:15px solid transparent;margin:...

Webapp中的CSS3实现 0.5px的细线 感觉很长时间没写过博客了，最近生活还算稳定，过得较为充实，所以又要开始写写东西了，一个是为了做些记录，是怕自己某一天，忘记了，回头翻翻博...

今天开始～小编将与大家分享一系列的web前端特效荟萃，喜欢把玩儿炫酷效果的小伙伴快快看过来^_^ ，希望大家喜欢呦～ 第一期，给大家分享一个使用纯CSS实现书籍3D翻页效果， 相关...

一，我们为什么要浮动 为什么浮动，为什么要清除浮动，以及清除浮动的方法。在网页布局的时候有时需要元素并排显示，如果不选择浮动，那么那些块状元素就会一行一行显示，占用...

nth-child和nth-of-type是css的两个伪选择符。应用中，这两者常常容易混淆。这里把它们拿出来仔细做个对比，看看这两者是怎么查找元素的。 nth-child(n) 寻找第n个子元素 nth-of-type(n) 寻找同...

很久没写文章了，最近做了一个员工入职的项目，该系统有一个批量打印个人信息的功能需求。因为之前也没接触过打印这方面的功能，就上网查了下，发现jquery有个打印功能的 API（...

之前写的三角形一直在同一个颜色，没有边框的样式。如下： CSS代码如下： .tri-up{width: 0;height:0;border-left:20px solid transparent;border-right: 20px solid transparent;border-bottom: 20px solid red; }.tri-left...

本文介绍了CSS 实现平行四边形的示例代码，分享给大家，具体如下： 先上效果图 平行四边形可以用做导航栏部分。 原理：利用transform属性拉伸矩形。 CSS代码 transform: skewX(-45deg); 上面...

CSS 选择器权重值 CSS 具有自己的优先级计算方法，而不仅仅是行间内部外部、IDclass元素 1. 样式类型 行间样式 h1 style=font-size:12px;color:#000;我的行间CSS样式。/h1 内联样式 style type=text/css...

所谓 Sticky Footer，并不是什么新的前端概念和技术，它指的就是一种网页效果：如果页面内容不足够长时，页脚固定在浏览器窗口的底部；如果内容足够长时，页脚固定在页面的最底部...

CSS命名规则 头：header 内容：content/containe 尾：footer 导航：nav 侧栏：sidebar 栏目：column 页面外围控制整体布局宽度：wrapper 左右中：left right center 登录条：loginbar 标志：logo 广告：banne...

先给大家分享效果图： 给大家分享一个使用CSS+JS实现的唯美星空轨迹运动效果， 这样的效果不输给Flash 。相关代码如下： !doctype htmlhtml lang=enhead meta charset=UTF-8 titlecloth/title style body {...

1. 重构和架构 重构是指在不改变代码行为的前提下，重写代码，使其更加简洁、易于复用。 架构是指软件项目的各个不同部件之间的组合方式。 优秀的架构： 可预测：可以对软件的工...

最近在做公司的登录页，UE同学希望第三方登录的图标在hover的时候有一个圆形的缩放效果（原话是波纹效果-_-||），效果参考腾讯新闻和网易新闻的分享按钮。 腾讯新闻的分享按钮ho...

1.文档流 简单说就是元素按照其在 HTML 中的位置顺序决定排布的过程。HTML的布局机制就是用文档流模型的，即块元素（block）独占一行，内联元素（inline）不独占一行。 一般使用margi...