一般来说，DIV没有悬浮一说，更准确的应为层叠或者固定。最简单的方法是采用CSS定位属性。1、DIV层叠，即一个层叠加在另外一个层上利用相对定位和绝对定位来实现:在父对象上设置：position:relative;在子对象上设置：position:absolute;top:10px;left:10px;这样如果父对象里...
css3鼠标:hover效果会平滑过渡，但鼠标离开，效果消失的太生硬，能不能和：hover一样平滑过渡?<ahref=""><imgsrc="image/portfolio-03.jpg"<bclass="block"></b></a>最终实现效果：鼠标划入img上...
一、background-image不支持CSS3transitionbackground-image不支持CSS3transition，而CSS3gradient渐变作为背景图片存在的时候，下面的CSS设置是不会有过渡效果的。.gradient{background-image:linear-gradient(tor...
CSS3的@keyframes用法详解:此属性与animation属性是密切相关的，关于animation属性可以参阅CSS3的animation属性用法详解一章节。一.基本知识:keyframes翻译成中文，是"关键帧"的意思，如果用过flash应该对这个比较好理解，当然不会flash也没有任何问...
垂直滚动，用鼠标滚轮滚动 <!DOCTYPEhtml><htmllang="utf-8"><head><metacharset="utf-8"/><style>.parent{height:80px;width:100px;overflow:hidd...
解决方案1、HTML先建一个div层作为公告显示区，里面包裹一个公告列表(ul);<divclass="notice"><ul><li>第1条公告第1条公告第1条公告第1条公告第1条公告第1条公告</li><li>第2条公告第2条公告第2条公告第2条公告第2条...
样式：{width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}说明：white-space:nowrap保证文本内容不会自动换行，如果多余的内容会在水平方向撑破单元格。overflow:hidden隐藏超出单元格的部分。text-o...
-webkit-mask这个属性是相当强大的，所以详细的介绍超出了本文的范畴，它非常值得深入研究，因为它可以在实际应用中为你省掉很多时间。-webkit-mask让为一个元素添加蒙板成为可能，从而你可以创建任意形状的花样。蒙板可以是CSS3渐变或者半透明的PNG图片。蒙板元素的alpha值为0的时候会覆盖下面的元素，为...
父元素使用position:relative;子元素使用position:absolute;height:100%; ...
CSS3实现鼠标移动到图片上图片变大（缓慢变大，有过渡效果，放大的过程是有动画过渡的，这个过渡的时间可以自定义）
CSS3的transform:scale()可以实现按比例放大或者缩小功能。 CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。效果如下图所示：1、当未鼠标未放到图片上的效果：&n...
让过渡效果持续5秒：div{transition-duration:5s;-moz-transition-duration:5s;/*Firefox4*/-webkit-transition-duration:5s;/*Safari和Chrome*/-o-transition-duration:5s;/*Opera*/...
在现在的网页设计中，鼠标移到图片上图片放大的效果常常被用到，这个效果多应用于文章列表里。我一开始以为是用JQuery来实现的，后来才知道原来是用CSS3来实现的。虽然用JQuery也能实现同样的效果，但用CSS3来实现会更加简单和方便。本文将介绍如何用CSS3来实现这个功能。在介绍实现代码之前，我们先来看看效果演示吧。...
css3的功能真是很强大，学无止境，不多说，直接上代码<style>*{margin:0;padding:0;}.text-center{text-align:center}.col_cont{width:300px;height:300px;margin:auto}.thumbnail{cursor:po...
CSS选择器大致可以分成5类：基本选择器，层次选择器，属性选择器，伪类，伪元素。基本，层次，属性选择器比较容易理解，毕竟它们选择的对象都属于DOM中看得见摸得着的元素。但伪类和伪元素相对比较抽象，稍微有一点点理解上的难度。本篇就是我对伪类和伪元素的理解。先介绍一下伪类和伪元素有什么区别？其实这是个纯概念上的问题，就算不...
居中效果在CSS中很是普通的效果，平时大家所看到的居中效果主要分为三大类：水平居中、垂直居中和水平垂直居中。而其中水平居中相对于后两者来说要简单得多。早期总结了一下互联网上有关于水平垂直居中的几种实现方案，比如说《CSS制作水平垂直居中对齐》中介绍了八中实现水平垂直的方案，而在《CSS制作图片水平垂直居中》一文介绍了四...
Table表格颜色，默认时是整个表格每行每列的颜色都一样，这很容易产生视觉疲劳，因此，较友好的设计是TR单双行颜色相间而不同。效果如下图所示： table表格tr单双行颜色相间而不同 如果先定义两个class，然后每行 tr 均设置其class，这是可以达到要求的，但是代码就比较多，如下代码所示： <style type="text/css"> .tr1{background-color:#F5F5F5} .tr2{background-color:#FFFFFF} </style> <table> <...
