-
纯CSS实现导航栏Tab切换效果
所属栏目：[系统] 日期：2020-03-17 热度：169
副标题#e# 不用 Javascript，使用纯 CSS 方案，实现类似下图的导航栏切换： CSS 的强大之处有的时候超乎我们的想象，Tab 切换，常规而言确实需要用到一定的脚本才能实现。下面看看如何使用 CSS 完成同样的事情。 实现 Tab 切换的难点在于如何使用 CSS 接收[详细]
-
关于清除浮动塌陷的几种方法总结
所属栏目：[系统] 日期：2020-03-17 热度：80
副标题#e# 什么是浮动呢？ 定义这样说：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 其实也就是把快级元素变成能和别的快级并排成一行。 浮动的的元素有4点特性： 1.浮动元素会脱离标准文档流，已经不区分快和行了。[详细]
-
css让容器水平垂直居中的7种方式
所属栏目：[系统] 日期：2020-03-17 热度：193
副标题#e# 方法一：position加margin XML/HTML Code复制内容到剪贴板 divclass=wrap divclass=center/div /div CSS Code复制内容到剪贴板 /**css**/.wrap{width:200px;height:200px;background:yellow;position:relative; }.wrap.center{width:100px;height[详细]
-
10个非常实用的CSS hack技术
所属栏目：[系统] 日期：2020-03-17 热度：181
副标题#e# 好吧，既然你看了这篇文章，那么我猜你了解CSS并且知道它能为你做什么。但是一些很有用的技术对很多开发人员来说仍然比较隐秘，所以本文中，让我们看看10个肯定能提高你设计的CSS技术吧 1 跨浏览器的inline-block CSS Code复制内容到剪贴板 style[详细]
-
CSS中的line-height行高属性学习教程
所属栏目：[系统] 日期：2020-03-17 热度：149
副标题#e# 基本概念 1.行高、行距 行高是指文本行基线间的垂直距离。那什么是基线呢？记不记得vertical-align属性有个baseline值，这个baseline就是基线。看张盗图（选自下面的参考文章），其实我也修改了一下啦~ 注意：倒数第二根是基线哦，最下面那根是底[详细]
-
CSS3轻松实现清新 Loading 效果的简单实例
所属栏目：[系统] 日期：2020-03-17 热度：188
至今HTML5中国已经为大家分享过几百种基于CSS3的Loading加载动画，效果酷炫代码简洁，非常值得学习借鉴;今天就先给大家分享两个常用的CSS3的Loading的案例。 第一种效果： HTML部分 XML/HTML Code复制内容到剪贴板 divclass=loading span/span span/span s[详细]
-
CSS3 media queries + jQuery实现响应式导航
所属栏目：[系统] 日期：2020-03-17 热度：93
副标题#e# 实现一个响应式导航，当屏幕宽度大于700px时，效果如下： 当屏幕宽度小于700px时，导航变成一个小按钮，点击之后有一个菜单慢慢拉下来： 思路： 1.为了之后在菜单上绑定事件，并且不向DOM中添加多余的节点，在大屏幕中出现的导航和小屏幕中的下拉[详细]
-
20个非常实用的CSS技巧
所属栏目：[系统] 日期：2020-03-17 热度：131
副标题#e# 这段代码会让你的彩色照片显示为黑白照片，是不是很酷？ CSS Code复制内容到剪贴板 img.desaturate{ filter:grayscale(100%); -webkit-filter:grayscale(100%); -moz-filter:grayscale(100%); -ms-filter:grayscale(100%); -o-filter:grayscale(1[详细]
-
利用CSS实现立方体360度旋转效果实例代码
所属栏目：[系统] 日期：2020-03-16 热度：60
示例代码： 复制代码 代码如下: !DOCTYPE html html head lang="en" meta charset="UTF-8" title/title style * { margin: 0; padding: 0} ul {list-style: none;} ul { width: 200px; height: 200px; margin: 200px auto; position: relative; transition[详细]
-
css解决display:inline-block;产生的缝隙（间隙）的方法
所属栏目：[系统] 日期：2020-03-16 热度：138
今天在做H5的水平滑动卡片时用到了display:inline-block;却发现处在同一水平线上的元素之间居然产生了缝隙，这很显然不是我想要的效果，所以我就换成了左浮动，这样缝隙的问题是解决了，但是需要设置父元素的宽度才能实现水平左右滚动，这样又增加了代码量[详细]
-
CSS3 三维变形实现立体方块特效源码
所属栏目：[系统] 日期：2020-03-16 热度：98
三维变换使用基于二维变换的相同属性，如果您熟悉二维变换，你们发现3D变形的功能和2D变换的功能类似。3D变形与2D变形的最大不同就在于其参考的坐标轴不同，2D变形的坐标轴是平面的，只存在X轴和Y轴，而3D变形的坐标轴则是X、Y、Z三条轴组成的立体空间，X[详细]
-
css3学习之2D转换功能详解
所属栏目：[系统] 日期：2020-03-16 热度：171
CSS3提供了2D转换功能，能够对元素进行移动、缩放和转动等功能。 2D转换的属性名为transform，使用方法为transform:method(value)。 2D转换方法有translate、scale、rotate、skew、matrix，还有基于这些分支出的translateX、scaleY等。 这里，我将会介绍到[详细]
-
CSS样式中大于号的使用及Css中处理继承方法
所属栏目：[系统] 日期：2020-03-16 热度：139
继承在一定程度上让程序在编写的过程中更加方便，但是有时候也会给我们的程序带来一定的困扰，所以认真的学习继承的原理，以及处理的方法很重要。下面是Css中处理继承的一个方法。 在一段CSS代码中见到一个大于号()，代码如下： BODY#css-zen-garden DIV#e[详细]
-
深入理解CSS系列之flex兼容
所属栏目：[系统] 日期：2020-03-16 热度：87
Flex 布局教程想了解的可以自己去看看这篇博文，或者自己百度，这里先部多做介绍，我们主要来说一说flex布局的兼容性问题。 why? 大家可能想问了，flex布局为什么会存在兼容性问题啊？ 之所以存在兼容性问题，是因为技术在不断的更新，有些旧的浏览器只支[详细]
-
CSS实现鼠标滑过鼠标点击代码写法
所属栏目：[系统] 日期：2020-03-16 热度：119
鼠标滑过元素，使得元素的样式发生改变 我们定义一个按钮标签 复制代码 代码如下: buttonBUTTON/button 我们首先设置按钮的背景颜色为灰色： 复制代码 代码如下: .px-button{ background-color: grey; } 我们要使得鼠标滑过按钮的时候，让其变为蓝色，我们[详细]
-
IE8的css hack 9 使用说明
所属栏目：[系统] 日期：2020-03-16 热度：87
副标题#e# 首先感谢丸子提供的这个IE8的css hack； 关注过IE8的css hack的人相信大家都在使用这个hack，就是9的css hack： .test{ color:#000000; /* FF,OP支持 */ color:#0000FF9; /* 所有IE浏览器(ie6+)支持 ；但是IE8不能识别*和_的css hack；所以我们[详细]
-
详解CSS中的display:flex
所属栏目：[系统] 日期：2020-03-16 热度：113
Flex是Flexible Box的缩写，意为弹性布局，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。 flex： 将对象作为弹性伸缩盒显示 inline-flex：将对象作为内联块级弹性伸缩盒显示 flex示例代码 !DOCTYPE htmlhtml lang=enheadmeta chars[详细]
-
详解css常用选择器
所属栏目：[系统] 日期：2020-03-16 热度：161
导入外部css样式表的方法 使用link标签导入外部css样式表 link rel=stylesheet href=http://www.jb51.net/css/css/demo01.css 在样式表中import(导入)外部样式表 @import url(/crazy-html5/06css/css/demo01.css); 使用内部样式表 内部样式表只能作用于某[详细]
-
利用纯CSS实现动态的文字效果实例
所属栏目：[系统] 日期：2020-03-16 热度：160
大家可能经常会看到类似酷炫的网站： 在这类网站中能看到，一打开页面，无论是文字还是图片，都随着规定时间的而变化。原理很简单，主要用到CSS中animation属性。 接下来，我以我目前的工程项目为例，实现文字和图片的动画效果。（效果如上图GIF） HTML代[详细]
-
使用css3绘制出各种几何图形
所属栏目：[系统] 日期：2020-03-16 热度：118
副标题#e# 1、圆形 示例: 思路：给任何正方形元素设置一个足够大的 border-radius ，就可以把它变成一个圆形.代码如下： html: 复制代码 代码如下: div/div css: 复制代码 代码如下: .size{ width:200px; height: 200px; background: #8BC34A; } .example1{[详细]
-
CSS性能优化提高css性能的方法
所属栏目：[系统] 日期：2020-03-16 热度：99
不规范的css会导致很多性能问题，这些问题可能在一些小的项目中不够明显，但是在大型项目中就会显现出来。 css匹配原理 在优化css之前我们需要了解下css是怎么进行工作的，我们都知道css是由选择器，属性和属性值构成的。 我们可能会这样写上一行代码 CSS[详细]
-
CSS实现文字高光水波渐变的动态效果实例
所属栏目：[系统] 日期：2020-03-16 热度：197
先来看看静态的效果图，动态效果更好 实例代码 复制代码 代码如下: !DOCTYPE html html lang="en" head meta charset="UTF-8" titlerollcat/title style type="text/css" *{ margin: 0;padding: 0; } body{ background: #333;font-family: "Helvetica Neue[详细]
-
纯CSS3代码实现switch滑动开关按钮效果
所属栏目：[系统] 日期：2020-03-16 热度：189
副标题#e# XML/HTML Code复制内容到剪贴板 divclass=container divclass=bg_con inputid=checked_1type=checkboxclass=switch/ labelfor=checked_1/label /div /div css代码，:before负责颜色，:after是那个白色小圆点，切换时的过渡效果用css3的动画实现。[详细]
-
利用CSS3实现毛玻璃效果示例源码
所属栏目：[系统] 日期：2020-03-16 热度：134
复制代码 代码如下: body { min-height: 100vh; box-sizing: border-box; margin: 0; padding-top: calc(50vh - 6em); font: 150%/1.6 serif; background: url("iphone.jpg") fixed 0 center; background-size: cover; } main { margin: 0 auto; padding:[详细]
-
CSS控制DIV层显示和隐藏的实现方法
所属栏目：[系统] 日期：2020-03-16 热度：50
副标题#e# CSS中的display和visibility属性 css中display和visibility可以隐藏和显示html元素包括DIV层。看起来两者非常类似，很多人会搞混。下面分别介绍两者的属性： display:none|block; display:none; 隐藏该html元素，确切的说，是在浏览器中消除该元[详细]
