简单瀑布流代码实现
html代码如下
瀑布流-zhangzhang
*{padding: 0;margin:0;}
#main{
position: relative;
}
.pin{
padding: 15px 0 0 15px;
float:left;
}
.box{...
分类:
编程语言 时间:
2014-08-29 22:46:28
阅读次数:
378
上面的版本为通过左右按钮实现图片轮放,这个版本,是通过在窗口拖动鼠标,左右滑动图片。
关键点在于选择一个合适的值,使鼠标拖动时,所有图片均可显示,但是不会滑动过快或离开窗口。
不多说,直接贡献源码。
img {
position: absolute;
top:200;
left:400px;
/* border: 1px solid #333;*/
padding: 2px 5p...
分类:
其他好文 时间:
2014-08-29 13:11:37
阅读次数:
199
本功能比较简单,就是一个大幕,左右滚动播放图片。
关键点在于如何实现平滑的滚动,包括动画效果,3d效果等。
img {
position: absolute;
top:200;
left:400px;
/* border: 1px solid #333;*/
padding: 2px 5px 2px 5px;
-webkit-transition:ease all 0.7s;
...
分类:
其他好文 时间:
2014-08-29 11:03:27
阅读次数:
196
* `margin`和`padding`不管是上下的还是左右的,其百分比%单位是以该容器的宽度作为计算的,与高度无关!宽度为500px,那么`margin-top:1%`等同`margin-top:5px;`,它是以宽度作为百分比来计算,而不是高度哦! ...
分类:
Web程序 时间:
2014-08-29 00:12:46
阅读次数:
309
一个盒子,有margin,border,padding实际占用多少空间:
竖直方向是:height+padding-top+padding-bottom+border-top+border-bottom+margin-top+margin-bottom
水平方向上:width+padding-left+padding-right+border-left+border-right+margin-left+margin-right...
分类:
其他好文 时间:
2014-08-28 14:54:29
阅读次数:
239
在写CSS的时候我们习惯在头部写 *{ margin:0px; padding:0px; }或者,引入reset.css文件中。但是这个文件中也有对常用元素的边距置零的设置;原因就在这个地方,默认li的list-style-position:outside,但是padding-lef...
分类:
其他好文 时间:
2014-08-27 18:38:18
阅读次数:
160
css的团队合作规则以及怎样写出高性能的css代码。 一、使用Reset但并非全局Reset 同浏览器元素的默认属性有所不同,使用Reset可重置浏览器元素的一些默认属性,以达到浏览器的兼容。但需要注意的是,请不要使用全局Reset: *{ margin:0; padding:0; } 这不仅仅因为...
分类:
Web程序 时间:
2014-08-27 18:03:28
阅读次数:
211
Css3圆角讲解:想必大家对于图片,背景圆角,都不陌生吧,圆角语法:border-radius:圆角值;这个值可以使用:em ,ex,pt,px,百分比;Border-radius跟margin,padding差不多Border-radius:lefttop,righttop,rightbottom...
分类:
Web程序 时间:
2014-08-27 16:29:37
阅读次数:
251
所以你学会了基础的id,类和后代选择符,然后你就一直用它们了吗?如果是这样,你丢失了(css的)巨大的灵活性。在本文中提到的很多选择器属于CSS3规范的一部分,因此,只有在现代浏览器中才可使用。1.** { margin: 0; padding: 0; }对于初学者,在学习更多高级选择器之...
分类:
Web程序 时间:
2014-08-27 16:23:08
阅读次数:
251
css.departmentheadpic {height:230px;width:auto;background-color:#fff;padding-top:2px;padding-bottom:2px; positio...
分类:
其他好文 时间:
2014-08-27 16:09:07
阅读次数:
186