cssHack-属性Hack
语法: selector{<hack>?property:value<hack>?;} _:选择IE6及以下。连接线(中划线)(-)亦可使用,为了避免与某些带中划线的属性混淆,所以使用下划线(_)更为合适。 *:选择IE7及以下。诸如:(+)与(https://csswang.com/)之类的均可使用,不过业界对(*…
csshack-条件Hack
cssHack-条件Hack语法 <code><!–[if <keywords>? IE <version>?]> HTML代码块 <![endif]–></code> 取值: <keywords> if条件共包含6种选择方式:是否、大于、大于或等于、…
CSS3圆角例子
在网页制作时采用CSS技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。 只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和格式。CSS3是CSS技术的升级版本,CSS3语言开发是朝着模…
jQuery跟随浏览器窗口的回到顶部按钮
上周花了点时间改了一下 Go Top 按钮的显示效果, 显示在页面右侧, 跟随浏览器窗口滚动, 在 IE6 浏览器中使用淡入淡出的跟随显示. 可能现在已经存在很多类似的插件和工具, 但我还是想分享一下, 并将脚本封装成类, 以方便其他人阅读和使用. 因为实现原理比较…
基于YUI3的淘宝式“图片延迟加载”组件
打开淘宝首页和大部分的搜索、商品内容页,等待第一屏加载完毕,这个时候拖住浏览器滚动条迅速拖拽,如果你的网速不够快但是动作够快的话(*_*),会看到图片会一张一张的呈现出来,而不是像普通的页面那样,请求页面的时候就一次性加载完毕。 打开Firefox…
基于Jquery的瀑布流布局(绝对定位)
setwaterfall插件 使用方法: 导入jquery和setwaterfall插件,可直接查看源代码script id=&https://csswang.com/8221;setwaterfall&https://csswang.com/8221;为该插件,或者点击setwaterfall.js 如$(&https://csswang.com/8220;li&https://csswang.com/8221;).setwaterfall(),li为要瀑布流化的元素 设置相应的css,要求父层定位为posi…
inline-block元素的空白间距解决方法
使用inline-block来代替float进行布局,或者使用inline-block来实现元素的居中效果。有关于使用inline-block来代替float的讨论也蛮多的。 不过就是使用inline-block的元素之间会存在“4px”的空白间距。那么今天我们就一起来说说这个“4px”的问题。 先看下代…
CSS3动画下拉导航
由于最近一直在学习CSS3中,接触到不少新的知识,有的非常搞脑子,比如父子选择器,伪类,一些复杂的动画效果,甚至还有CSS4的东西让我头脑很混乱。所以趁热打铁分享一款纯CSS3打造的下拉导航。在这款导航中运用到许多父子选择,gradient(渐变)以及transi…
jQuery中.addClass()和.removeClass()使用
jQuery中.addClass()主要用来给匹配的元素增加一个类或多个类名(class名),需要注意的是这种方法只是给匹配的元素增加了类名,这里所说的增加就是在以前的基础上追加类名,新增加的类名并不会代替元素原有的类名。可以使用.addClass()给元素一次添加一个…
input输入框获得和失去焦点时隐藏/显示文字
input 输入框获得和失去焦点时隐藏或者显示文字我们先看下效果图 输入框默认状态: 输入框获取焦点状态: 大家可以看效果图的搜索输入框,默认显示着“用户名/Email”的提示,当这个 input 输入框获得焦点时,就自动清空等待用户输入,当用户啥也没输入就离…
CSS3的column实现瀑布流效果
图片瀑布布局很好看,以前也看过别人实现的一些方法,大部分是用js实现的,今天试了一下,用CSS3简单的实现了类似的布局效果,希望对大家有用 使用CSS3的多列column实现瀑布流效果,涉及到CSS3的时候,我们首先要抛弃的是IE,然后再跑到高版本的FireFox或…
jQuery tab选项卡插件(可多次使用)
这个选项卡插件估计是最简单的了,我使用过好多次了,不过用于对jquery理解还不是很深刻,不知道性能上有没有问题,总之代码很简介,可用性也比较强,支持一个页面多次调用,html标签可以随便的更改,只需要把class加上就行了!是不是很简单啊, HTML代码…
鼠标经过图片显示大图并跟随鼠标效果-jQuery插件
今天看完了《JavaScript语言精粹》这本书,还有时间,就决定写写jQuery插件练练手,实现的效果是,鼠标移到缩略图上会显示该图的大图,并且大图跟随鼠标移动;或是移动到提示文字上,也可以显示图片。并且含有方向判别功能,具体来说就是如果缩略图在页面…
背景半透明最佳实践
背景半透明最佳实践 透明作为一种效果增强的方案,被众多视觉设计师喜欢。但因为 IE 的原因,透明,特别是半透明,已经成为前端工程师最不愿意实现的东西。现在有一个需求,需要对一个纯色的层实现半透明效果。效果如下,边框需要透明,透明度为 https://csswang.com/000000 …
细节决定成败-合理表现响应区域
先举个简单的示例: 机票排序模块,当点击其中一个筛选条件“起飞时间”时通过虚线框的位置可以看到文字所占的区域,而事实上整个按钮都能响应该事件,那给用户造成的错觉就是似乎只有文字部分是可点击区域,这就需要对文字的样式进行合理设置,扩大响应区…