一、使用css实现梯形html：<div class="div">这是一个梯形</div>做法：通过tansform属性的perspective和rotateX，实现梯形（声明的顺序不能错）。rotateX是将物体以X轴为旋转轴，进行旋转。perspective是设置透视的...
css让图片居中，不管图片是方图、竖图、横图，都可以让图片在父框架下居中，即方图则占满整个父框架；横图则左右填充上下居中；竖图则左右居中上下填充1、html如下： <body><div id="redblock"><img src="katong.png" > ...
TransformCSS3中，transform属性允许盒子模型被进行二维或三维空间坐标的变换。使用该属性之后，元素主要可以进行以下变换：旋转(rotate)平移(translate)缩放(scale)倾斜(skew)下面的图片我们实现了一个旋转和缩放的变换、然后结合animation属性实现了一...
Flexible Box弹性布局(flexbox)，第一次见到这种布局方式的我，有种第一次遇到外国人一样的好奇，咦~这个人长得这么特别，黄头发大鼻头深眼窝。然后，在好奇心的趋势下，我就打算一窥究竟，它的内部构造到底是和我们有什么不同的(我们不一样~)。直到我遇到了bootsrap的库之后，我深深被...
Animation前言好的前端工程师，会更注重用户的体验和交互。那么动画就是将我们的静态页面，变成具有灵动性，为我们的界面添加个性的一种方式。下面是七喜的官方主页，它就是很好的富交互样例。鼠标移动到导航栏，就会播放多种动效，给用户一种酷炫的体验。我觉得用户体验，才是前端工程师更加关注的问题，而不是...
Transition & Animation记得很早以前使用过css动画，但是当时写起来感觉很混乱。大概是不太了解Transition & Animation这两个属性的关系，他们分别控制动画的哪些操作，因此，今天整理一下这两个动画中，经常用到的属性。CSS3中,动画允许在多个关键...
CSS3 Animation之前一直在用cocos等编辑器做动画，最近想学习一下使用CSS3实现一些基本的动画。所以，将这两种动画开发模式，进行对比学习或许会有更深的理解与体会。什么是动画在学习CSS3动画之前，我们必须先介绍一个什么是动画，动画都具有哪些特性。动画是将静止的画面变为动态的艺术．实...
实现透明的css方法通常有以下3种方式，以下是不透明度都为80%的写法：css3的opacity:x，x 的取值从 0 到 1，如opacity: 0.8css3的rgba(red, green, blue, alpha)，alpha的取值从 0 到 1，如rgba(255,255,255,0.8...
第一部分：什么是CSS Hack？CSS hack是通过在CSS样式中加入一些特殊的符号，让不同的浏览器识别不同的符号（什么样的浏览器识别什么样的符号是有标准的，CSS hack就是让你记住这个标准），以达到应用不同的CSS样式的目的。例如：1、margin属性在ie6中显示的距离会比其他浏览器中...
理论基础CSS3 animation 属性和 @keyframes 规则主体思想准备相同大小的多个图片将要展示图片横排放在一个图片容器里面在图片容器外再加一个展示容器，展示容器大小为图片大小给图片容器添加自定义动画，在动画不同阶段设置递增的偏移值注意事项动画效果分为切换和停留两部分自定义动画阶段与...
不开头了，直接进入主题。普通背景模糊效果如下：使用属性：filter:(2px) 1####普通背景模糊为了美观不能使背景前的文字模糊，而filter属性会使这整个div的后代并且还会出现白边。也就是说无法达到这个效果。怎么办呢？我们可以使用伪元素，这样我们也顺便解决了白边的问题。实现思路：在父容...
八、页面布局1.简介常见页面布局：表格布局div布局2.表格布局2.1 简介不适用于复杂布局，仅用于简单 、有规则的结构定位相对准确，与浏览器基本无关，适用于简单分隔2.2 用法table常用样式的属性border在表格外围设置边框border-spacing设置单元格之间的距离（相当于table标...
六、定位方式1.简介通过position属性实现对元素的定位，有四种定位方式常用取值：取值含义说明static默认值按照常规文档流进行显示relative相对定位相对于标签原来的位置进行的定位absolute绝对定位相对于第一个非static定位的父标签的定位fixed固定定位相对于浏览器窗品进行定...
五、盒子模型1.简介盒子模型是网页布局的基础，将页面中所有元素都看作是一个盒子，盒子都包含以下几个属性：width 宽度height 高度border 边框padding 内边距margin 外边距2.盒子模型2.1 border表示盒子的边框分为四个方向：上top、右right、下bottom、左...
四、常用CSS属性1.字体属性设置字体相关的样式属性含义说明font-size大小、尺寸可以使用多种单位font-weight粗细 font-family字体 font-style样式 font简写 1.1 font-size取值：inherited继承，默认从父标签继承字体大小（默认值），所有CS...
三、选择器1、基础选择器1.1 标签选择器也称为元素选择器，使用HTML标签作为选择器的名称以标签名作为样式应用的依据1.2 类选择器使用自定义的名称，以 . 号作为前缀，然后再通过HTML标签的class属性调用类选择器以标签的class属性作为样式应用的依据注意事项：调用时不能添加 . 号同时调...
CSS入门学习一、CSS简介1、什么是CSSCSS：Cascading Style Sheet 层叠样式表是一组样式设置的规则，用于控制页面的外观样式2、为什么使用CSS实现内容与样式的分离，便于团队开发样式复用，便于网站的后期维护页面的精确控制，让页面更精美3、CSS作用页面外观美化布局和定位二...
CSS-颜色、单位、字体、命名规范、书写顺序颜色单位绝对单位：无论其他相关的设置怎么变化，绝对单位指定的值是不会变化的，常用于打印方面相对单位：没有固定的度量值，是由其他元素尺寸来决定的相对值。注意：此处的相对指当前元素的字号（font-size）或者视口（viewport）尺寸。（1）绝对单位px...
清除浮动常用方式总结HTML代码如下：<div id="wrap"> <div id="inner"></div></div>CSS 清除浮动方案（1）给浮动的父级元素加高度，缺点：浮动元素高度不确定的时候不适用#wrap{ border:...
1、绝对定位两栏布局<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>绝对定位两栏布局</title> &l...
