背着吉他的蝙蝠女侠的博客

demo代码如下：  注意：这个是放上去可以发生一次翻转，离开就翻转回去，下面有jq实现的翻转效果，可以来回翻转的，每点击一次就会翻转到反方向。 Document div { width: 200px; height: 200px; position: relative; } div::before,div::after { content:

1. 线性渐变的基本使用（linear  gradients）1.1 从上往下渐变，代码如下：注意：也可以多加几种颜色，下面的也是一样。 Document .box1 { width: 700px; height: 50px; background: linear-gradient(red,blue); } 1.2 从

1. 问题1.1 IE6下的双边距问题。解决办法：使用display：inline；或者是去掉浮动。1.2 margin的重叠问题。解决办法：方法一：解决margin重叠最好的办法就是避免它；方法二：使用浮动，浮动可以解决margin的重叠问题，只能解决同方向上的重叠，不同方向上的是无法解决的。代码如下： Document .box1 { width

过渡属性为transition，是属于css3的属性，所以在处理不同浏览器的兼容性问题时，记得加上私有前缀。代码如下：transition表示的是哪些属性执行动画所需要的时间；transform是应用于元素的2D或者3D转换，其中属性值有rotate表示的是旋转多少度，translate表示的是在X和Y轴移动多少，scale表示的是缩放多少倍，skew表示的是需要倾斜的度数。其中动画效果中，还

使用css自定义动画，使用到了css3中的属性，所以为了处理浏览器的兼容性问题，要记得加上私有前缀，在此我没有添加，主要使用到的属性有keyframes以及animation属性，keyframes是自己定义一个自己想要的动画，animation是让动画与执行动画的元素关联起来。代码如下： Document div { width: 100px; height:

css实现瀑布流的效果是使用的多列布局来实现的，其中column-width表示的是每一列的宽度，column-gap表示每一列的间距，因为是css3的属性，为了处理兼容性问题，记得在前面加上各大浏览器的私有前缀。瀑布流实现的代码如下：注意：使用的图片的宽度是一致的。图片可以自己百度自行几张，然后使用画图工具修改宽度就可以，让高度自己随宽度进行调整。 Document .

1.margin的居中对齐操作 Document div { width: 500px; height: 200px; background: red; margin: 0 auto; } 2.position的左右对齐操作 Document div { width: 500px; height: 2

1.动画效果一：鼠标放上去，后面的背景图放大到一定程度，下面的有个内容盒子，以一定的速度从下向上运动，并且盒子的背景颜色逐渐加深。 Document * { margin: 0; padding: 0; } .big { width: 420px; height: 372px; overflow: hidden; positio

在传统布局中，我们依赖的是diplay+position+float，使特殊的布局非常不方便。那么今天我们说css3中的弹性盒子，使我们在进行布局时，更加的便捷。1.display:flex表示的是把盒子设置为弹性盒子。 Document * { margin: 0; padding: 0; } body,html,#box { width: 1

响应式布局的实现方式有很多种，我们这里先介绍几种实现响应式布局的方式，然后着重介绍的是如何使用媒体查询实现响应式布局。方式一：使用媒体查询。注意在使用媒体查询的时候，and与前后的小括号空一个空格，如果不空格的话，会报错。代码如下： Document * { margin: 0; padding: 0; } body,html,div { wid

如果页面内容不够长的时候，页脚块粘贴在视窗底部；如果内容足够长时，页脚块会被内容向下推送。 Document * { margin: 0; padding: 0; font-size: 48px; } /*第一步设置盒子为满屏大小*/ .box { position: fixed; width: 100%; height: 10

方式一：使用绝对定位实现。代码如下： Document * { margin: 0; padding: 0; } .box1 { position: absolute; width: 100px; height: 200px; background-color: red; top: 50%; left: 50%;