本文记录学到的有关视口的内容，不足之处请指正。1、视口有时会使用百分比来声明宽度,如：html,body{}div{width:30%;}假设div是body的子元素，这段css就表示该div占body宽度的30%.body没有显示声明宽度，因此body占用了父包含块html元素宽度的100%。同样... Read More
用css绘制六边形需要使用到三个容器，分别用于绘制六边形的三个部分，如下图所示：接下来，就是代码了：CSS:如果做成下面这种形状，可以将上面做的进行旋转或者采用浮动的方式：代码：#box4{width:0;border-right:30pxsolid#6c6;border-top:52pxsolid... Read More
1、为啥要用font-face制作小图标1）适用性：一个图标字体要比一系列的图像要小，一旦字体图标加载完，图标则会立刻显示出来，不需要去下载一个图像。2）可扩展性：可以使用font-size对图标进行大小设置，这使得能够随时输出不同大小的图标；但如果是图片，则需要为不同大小的图片输出不同的文件。3）... Read More
做移动端页面时，设计稿中的切片图片往往是实际的2倍,此处记录图片正常显示大小的技巧。当图片是单张的话，可以对容器设计实际大小，然后设置background-image,为了让图片缩小一倍，可以设置background-size:contain;如：图片尺寸是20*20，但是在移动端页面显示的则是10... Read More
1、offsetParent 元素的offsetParent并不是元素的父元素，判断元素的offsetParent要根据以下情况：1）当DOM结构层次中的元素均没有进行css定位（设置position为absolute或relative），则offsetParent为根目录；2）当元素的父元素没有进... Read More
今天做了个固定定位的效果。比如对导航需要进行固定定位效果：当没有滚动到导航下面，导航正常显示。当滚动到导航下面，导航就固定到顶部。这个效果使用了jquery的方法实现，具体思路为：1)首先获取导航相对与文档的偏移量top（使用offset().top）2)定义滚动事件，获取滚动元素的scrollTo... Read More
Jcrop是一款优秀的裁剪工具，它不仅可以裁剪图像，还可以裁剪canvas及任何的div元素，具体可参考：http://code.ciaoca.com/jquery/jcrop/基于Jcrop，开发一个js组件(Cut.js)，使之可进行复用：(function(jQuery,window,und... Read More
先看下效果： 圆心下的那个那个白圈的位置是光圈的起始位置，光圈所在的位置为终点位置。光圈从起始位置开始，沿着圆的轮廓匀速到终点位置。在支持css3的情况下，可以利用css3做旋转效果来达到这种效果。具体思路为：1）将光圈相对于圆进行绝对定位，设置光圈的绝对位置为上面所说的终点位置；2）对圆设置... Read More
昨天和今天做了一个轮播图，它的tab标签不是1,2,3这样的数据表示，而是使用圆圈表示，效果如下：每个圆中是一个img标签，通过设置src可以指定图片。点击每个圆， 下面的图片会向左滚动到对应的位置。今天将记录下图片的滚动效果和箭头随着点击而变化位置的实现。 1、jquery实现向左滚动效果 实现... Read More
在IE7下，是不支持inline-block元素的，当对块级元素如dl进行inline-block样式设置时，在IE7浏览器是下样式是不会生效的。若要在IE7下实现将块级元素设置为内联元素，可以这样进行设置：*display:inline;*zoom:1; //获取布局在这样设置之后，就能继续设置... Read More