当前位置:首 页>> 百 宝 箱

CSS-ONLY 内容展示切换效果 微信扫一扫
分享给朋友

  此展示效果,宽高自适应浏览器窗口大小,且仅使用CSS完成切换效果。切换导航按钮使用的是Radio button组合,通过CSS来切换不同内容,切换效果平滑。因为是使用了CSS3的很多属性,所以IE9以下的全军覆没,看不到效果,但还能切换。新版浏览器如Chrome、Firefox、Opera、Safari都没啥问题。
  原先演示内容英文的,俺翻译+替换成了中文,增加了图片背景,其他未动。喜欢的同学可以自己定制。点击下面图片查看演示。
CSS-ONLY 内容展示切换效果

SmoothTransitionsResponsiveLayout.zip
200.31KB

CSS3 打造的巨幅下拉菜单 微信扫一扫
分享给朋友

  这种下来菜单用的比较多了,一般是用在网站导航条上,如果需要给用户呈现的导航内容详细的话,这种巨幅菜单就少不了的。其他的这种下拉菜单也不少,之所以介绍这个,是因为这个下拉菜单兼容性非常好,IE6-9通吃,功能是没问题的,无非是IE6-8不支持一些CSS3的新属性,其他新版浏览器如Chrome、Firefox、Opera、Safari等都是没问题的。 点击下面图片查看演示。 CSS3 打造的巨幅下拉菜单

CSS3_Mega_Drop-Down_Menu.zip
83.81KB

CSS3 & jQuery : 仿 Google Play's 迷你标签导航 微信扫一扫
分享给朋友

  这种标签内容导航很常见了,有很多种实现方式,都是为了在页面上显示更多的内容而不用刷新页面。下面这个标签导航,是基于CSS3和jQuery的,且是仿 Google Play's 的。
  看看吧【https://play.google.com

  本身这个标签导航是没有用到任何图片的,纯纯的CSS3+HTML,辅之以jQuery,上面演示帧页面中的图片是俺为了切合文字美化了一下。按照原页面的教程,标签的几块内容,在页面刷新时会闪一下全部内容,俺就稍微在CSS里收拾了一下。

CSS3 tooltips 浮动显示提示说明 微信扫一扫
分享给朋友

  这个tooltips,一般是用在按钮、图标或者其他网页元素上,用来详细说明按钮或者图标用途什么的,或者其他什么附加内容需要给用户提示的。有了它,对浏览网页的用户来说无疑是更方便了,不过这个tips的样式是纯粹由CSS3打造,所以,IE6这样的老古董估计看起来会有所不同,同时,因为IE6不支持hover这个属性,所以还要借助jQuery来搞定。
  具体的HTML和CSS代码,请查看下面帧页面的源代码。鼠标移动到带下划线的文字上就能看见Tips了^_^

CSS3 ordered list styles 有序列表样式 微信扫一扫
分享给朋友

  平常无序列表用的机会多点,也就是ul,偶然瞅见这个有序列表ol的样式,挺不错,不过是用CSS3定义的样式,IE6-8浏览的话就没那么好看了,不过也还好,就是圆角圆环什么的看不到,清一色的方块。这玩意用在排行榜还是相当不错的^_^
  具体的HTML和CSS代码我就不贴了,自己查看一下下面帧页面的源代码就一清二楚了。

人到穷途应一笑,几凡失意仍能傲。成败何须问江湖,我心依旧任逍遥。
这一生只想好好做个平凡的人,有个家有个梦,陪我迎接每一个早晨。
这一生只想好好做个平凡的人,何必争何必问,只有快乐开心才是真。