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...

前言 之前一直听到有人提到 CSS里的BFC，正巧在 IFE的练习里遇到了外边距折叠的问题，所以正好弄清楚BFC的机制。 (参考来源 见文末的 Reference) 一 什么是 BFC 和之前所有博文一样，还是...

简介 前面写了一篇文章讲解了position常用的几个属性：《CSS基础篇-- position属性讲解》 一般都知道下面几个常用的： {position: static;position: relative;position: absolute;position: fixed;} 在https://d...

1.hover 移入其父元素.navI时，触发鼠标的hover态，给父元素添加样式为position:relative;z-index:1;。从而提升了层级z-index。在其子元素导航内容的层级比拼中，子凭父贵，父元素层级高的，其...

根据上面所学的CSS基础语法知识，现在来实现字段的解析。首先还是解析标题。打开网页开发者工具，找到标题所对应的源代码。 发现是在 div class=entry-header 下面的h1节点中，于是打开...

本文介绍了纯css写出爱心版加载效果的示例代码，分享给大家，具体如下： 爱心等待效果如下： 现在互联网时代网站何其多，各有各得风格，但是什么样的风格能留住用户的停留观看...

Flexibility Flex伸缩布局决定性的特性是让伸缩项目可伸缩，也就是让伸缩项目的宽度或高度自动填充剩余的空间。这可以以flex属性完成。一个伸缩容器会等比地按照各伸缩项目的 扩展比...

CSS中有一个属性叫做clip，为修剪，剪裁之意。 clip 属性剪裁绝对定位元素。这个属性用于定义一个剪裁矩形。对于一个绝对定义元素，在这个矩形内的内容才可见。出了这个剪裁区域的...

这是之前客户的一个需求，给的 demo 是用 gif 实现跑马灯，但是我们的没法用 gif，因为图上的文字需要翻译成各国语言，所以不能使用图片来实现，那么，自己写一个咯。 思考过程 h...

项目中用到了这个边沿打孔的效果，尝试下来使用纯css写的这个样式，在这里分享一下： 效果大致如图 分步实现思路： 1，先画两个带圆角的框，A和B（A、B分别需要加投影效果，图上...

本文介绍了用css3实现switch组件的方法，分享给大家，具体如下： 基于表单的checkbox 效果图 原理 checkbox, 有两种状态, 没选中和选中, 当选中的时候(:checked), 改变样式即可, 首先得清除浏...

响应式布局的实现依靠媒体查询（ Media Queries ）来实现，选取主流设备宽度尺寸作为断点针对性写额外的样式进行适配，但这样做会比较麻烦，只能在选取的几个主流设备尺寸下呈现完...

效果图如下所示： 在线演示：Here～ 给大家分享一个使用css与js生成的唯美炫酷的图形树效果，相关代码如下： !doctype htmlhtml lang=enhead meta charset=UTF-8 titlecloth/title style @import url(http://fo...

反过来也可以：左侧宽度固定，右侧自适应。不管是左是右，反正就是一边宽度固定，一边宽度自适应。 这种布局比较常见，博客园很多默认主题就是这种。一般情况下，这种布局中宽...

准备 创建元素 div class=parent div class=childchild/div/div 垂直水平居中方案一：知道宽度的情况下 absolute+margin负值 .parent { width:400px; height:400px; background: red; position: relative;}.child { position: abso...

本文介绍了css3 仿写阿里云水纹效果的示例代码，分享给大家，具体如下： 效果图 什么也不说了，上代码。 !DOCTYPE htmlhtmlhead titlecss3 水纹效果/title style type=text/css .point_area { text-align:...

最近闲来无聊，看了下ES6的语法，结合canvas实现了动画特效随着鼠标的移动，会有小球跟随且自动消失的动画。 首先，html部分，目前就一个canvas标签。 canvas id=canvas 当前浏览器不支持...

1.BFC 定义 BFC(Block formatting context)直译为块级格式化上下文。它是一个独立的渲染区域，只有Block-level box（块级元素）参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫...

相信大家昨天打开某 404 搜索引擎的时候应该都看到这张图片了，不得不说，后人会以这么一种方式来纪念前人，而且还是一个伟大的公司，挺感动的。 前言 在开发 H5 页面的时候发现...

很多答题的H5界面上有旋转倒计时的效果，一个不断旋转减少的动画，类似于下图的这样。 今天研究了下，可以通过border旋转得到。一般我们可以通过border得到一个四段圆。 See the Pen...

CSS3 @keyframes简单动画实现 定义： 通过 @keyframes 规则，能够创建动画。 创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。 在动画过程中，可以多次改变这套 CSS 样式。 以百分...

废话不多说了，直接给大家贴代码了，具体代码如下所示： @{ Layout = null; ViewBag.Title = Login Page;}!DOCTYPE htmlhtmlhead meta name=viewport content=width=device-wid【本文由：防cc 提供，感恩】th / titleI...

效果如下所示： 收缩旋转圆环 css代码： stylebody { background: #372940;}.demo { position: relative; margin: 120px auto; width: 150px;}.loader { position: absolute; opacity: .7;}.loader circle { -webkit-animation: draw 4s infi...

豆豆加载效果 point_down:html代码： div class=demo div class=pacman/divdiv class=dot/div point_down:css代码： style@-webkit-keyframes up { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-30deg); }}@-moz-keyframes up {...

前言： 最近在学习HTML、CSS的过程中，想模仿一下百度首页。发现搜索框这一部分与上下其它元素的空白距离可以随着窗口大小变化（效果如下图所示），于是自己研究了一下并记录下...

先看题，别看答案试下吧 ~_~ 1、下面的代码输出的内容是什么？ function O(name){ this.name=name||'world';}O.prototype.hello=function(){ return function(){ console.log('hello '+this.name) }}var o=new O;var hello=o.hello...

神秘巨星来了吗？快，打追光，快，快给她镜头。 ------《神秘巨星》 神秘巨星是谁？它就是 CSS Variables 。 简介 CSS Variables，一个并不是那么新的东西，但对css来说绝对是一场革命。 之...

一、方法一：借助mask-image属性 如果您手头上的浏览器是Chrome或是Safari，则您可以在demo页面中看到类似下面的效果： 方法一下的文字渐变效果 相应的HTML代码如下： h2 class=text-gradient...

本文介绍了前端css实现最基本的时间轴的示例代码，分享给大家，具体如下： 原型： 代码： !DOCTYPE html html head link rel=stylesheet href=http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min....

本文介绍了详解css布局实现左中右布局的5种方式，分享给大家，具体如下： 效果如下： 左中右布局 !doctype htmlhtml lang=enhead meta charset=UTF-8 meta name=viewport content=width=device-width, user-scalab...

本文介绍了css3编写浏览器背景渐变背景色的方法，分享给大家，具体如下： 效果如下： 知识点：rgb全色循环算法，HEX与RGB颜色转换算法、CSS3颜色渐变，CSS3渐变色兼容ie方法，定时器与...

本文介绍了CSS实现卡片3D翻转效果的示例代码，分享给大家，具体如下： 效果： 代码： html： div class=main div class=box b1/div div class=box b2/div/div css： .main { position: absolute; top: 50%; left: 50%;...

简单的CSS代码，甚至不符合图灵完备的语言，但是也能成为一些攻击者的工具，下面简单介绍一下如何使用CSS去记录用户的密码。但是这些CSS脚本会出现在第三方CSS库中，所以使用第三...

前言 最近做一个登陆界面的，突然想使用这种背景图片透明，而内容不透明的效果，这里我就说一说我的两个思路吧。 效果展示 半透明 不透明 常见的失败做法 最常见的做法事设置元...

宽度是高度的两倍(等比缩放) 实现思路: 以父级元素为基准, 子级 width:100%; (也就是父级宽度的100%), padding-top:50% (也就是父级宽度的50%,根据css规范, padding用百分比表示的话, padding: 100%等于...

一、浮动的定义 使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停了下来。 ps:文档流：文档流是文档中可显示对象在排列时所占用的位置 。 语法 floa...

居中布局 水平居中 1）使用inline-block+text-align 原理：先将子框由块级元素改变为行内块元素，再通过设置行内块元素居中以达到水平居中。 用法：对子框设置display:inline-block，对父框设...

一、CSS3 :default伪类选择器简介 CSS3 :default 伪类选择器只能作用在表单元素上，表示默认状态的表单元素。 举个例子，一个下拉框，可能有多个选项，我们默认会让某个 option 处于 sele...

css3 矩阵变化. 应用格式为: transform: matrix(a,b,c,d,e,f); 对应于就是: 实际应用中的转换就是: 其中: ax+cy+e = 横坐标 bx+dy+f = 纵坐标 为什么会多出 0 0 1呢？ 因为, 为了凑参数. translate 矩阵 基本...

什么是动画？这是我们应该先了解的问题。按照百度百科的解释动画是采用逐帧拍摄对象并连续播放而形成运动的影像技术。不论拍摄对象是什么，只要它的拍摄方式是采用的逐格方式...