前言 之前一直听到有人提到 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 矩阵 基本...

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

一般情况下，我们给块状元素（四边形）添加阴影样式，直接用css box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);就可以了，但是总有一些需求是那么的特别，例如下图： 要求给这样的梯形盒外围加...

滚动条是浏览器中最常见的组件了。然而，滚动条的颜值总是不能令人满意，特别是嵌入在页面中的滚动条: 漂亮的网页突然出现一根灰灰的滚动条真是太煞风景了。虽然浏览器也提供...

在很多购物网站上都能看到优惠券，代金券，什么什么的券，但基本都是图片直接放上去，那么你有没有想过css来做一个呢，反正我是这样想过。那么你怎么做呢，切图做背景平铺边缘...

今天浏览这个http://www.sitepoint.com站时，因为好奇看了下人家写的代码，结果发现了这行代码， 于是就研究了一下，calc()从字面我们可以把他理解为一个函数function。其实calc是英文单词...

响应式布局的单位我们第一时间会想到通过rem单位来实现适配，但是它还需要内嵌一段脚本去动态计算跟元素大小。 比如： (function (doc, win) { let docEl = doc.documentElement let resizeEvt = 'orie...

本文介绍了css实现悬浮效果的阴影的方法示例，分享给大家，具体如下： 要实现的效果图： 实现的代码： -webkit-box-shadow:0px 3px 3px #c8c8c8 ;-moz-box-shadow:0px 3px 3px #c8c8c8 ;box-shadow:0px 3px 3px...

本文介绍了CSS3实现全景图特效示例代码，分享给大家，具体如下： 基本代码 html代码： div class=panorama/div 首先定义一些基本的样式和动画： .panorama { width: 300px; height: 300px; background-ima...

需求说明 因为项目中章节配置的时候有小数点，1，1.1,1.2,1.11的标题，这个时候每一行标题的id,class设置成标题号是独一无二的标记。但是，直接用js获取是获取不到的，例如$('#3.22')打印...

三角形 div class=box/divstyle.box{ width: 0; height: 0; border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-left: 50px solid transparent; border-right: 50px solid red;}/style 平行四边形图标 div class=...

案例基础布局 html ul class=box li class=item/li li class=item/li li class=item/li li class=item/li /ul css .box{ display: -webkit-flex; display: flex; } .item{ width: 200px; height: 300px; background: red; border: 1px solid #ccc; font...

如果想要实现网页的二级导航，我们可以使用JS技术，动态的显示和隐藏二级菜单，当然也可以使用CSS技术来实现。并且这里推荐使用CSS，因为其效率更高，更流畅。这里将介绍二级菜...