注册 登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

一车,一房,一个温暖家

10万左右的车,80平方的房子,这是我奋斗的暖暖的家

 
 
 

日志

 
 

引用 30个优秀的CSS样式和实例下载(表格样式、登录样式)   

2015-05-08 15:56:33|  分类: 默认分类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
今天,为大家收集精选了30个使用纯CSS完成的强大实践的优秀CSS技术和实例,您将在这里发现很多与众不同的技术,比如:图片集、阴影效果、可扩展按钮、菜单等…这些实例都是使用纯CSS和HTML实现的。

  单击每个实例的标题可以被转向到该技术实例的相关教程或说明页面(英文),单击每个实例的图片截图可以直接跳转到相应实例的Demo页面。 

1.CSS样式表格版本2

一个使用背景图片且非常漂亮,被语义化标记的表格。

CSS-实例
直接下载样式:Table_version_2
30个优秀的CSS样式和实例下载(表格样式、登录样式)
直接下载样式:Table_Css_1

2.Pattern Tap

网页设计

  学习有效用户界面的设计,最好的办法是看看其他设计师是如何做的。你可以从Pattern Tap的设计模型展示中获得灵感。这儿收藏了表单设计登录界面二级导航按钮等资源。


3.Hoverbox 图片集

一个纯净的基于CSS的图片集,鼠标悬停缩略图就会显示放大效果。

CSS-实例

 

4.高级CSS菜单

一款很有创意且复杂的CSS导航方案。

CSS-实例

5.滑动影集

手风琴效果的影集,悬停便可拉伸图片。

CSS-实例

6.Lightbox幻灯片

题为”Supercharge your image borders“的文章中的一部分展示了如何使用CSS样式让图片变得更有意思。

CSS-实例

7.图片的阴影效果

在A List Apart上的一个关于图片效果Demo的讨论文章”CSS Drop shadows“.

CSS-实例

8.跨浏览器多页式影集

悬停标签改变分类,悬停缩略图显示放大图。

CSS-实例

9.CSS照片放大

使用简单的图片和background-position属性来进行调解。

CSS-实例

10.CSS gallery layout—smells like a table

模仿表格布局,但使用的是列表。图集是流式宽度。

CSS-实例

11.Sticky Footer

仅使用了很少XHTML的静态页脚。

CSS-实例

12.whatever: hover

模仿Windows开始菜单的CSS导航菜单。

CSS-实例

13.纯CSS手风琴效果

使用div和:hover伪类的手风琴效果,这个效果可以垂直显示也可以水平显示。

CSS-实例

14.使用PNG和背景色的可扩展按钮

CSS-实例

15.Pushbutton Links

链接在不使用图片的情况下看起来像个按钮。

CSS-实例

16.含固定Header的可卷动表格

表格的标题被固定的优秀长表格。

CSS-实例

17.CSS内容遮盖

当你悬停在图片上时,div容器会显示更多文字。

CSS-实例


18.利用CSS为超链接添加提示

关于为不同类型的链接添加图标的简单教程。

CSS-实例

19.简单的CSS圆角边框

仅适用了一张图片和很少的几行代码及标记。

CSS-实例

20.Sitemap Celebration

使用嵌套列表的树形导航,很适合网站地图页面。

CSS-实例

21.简单的跨浏览器幻灯片

不使用JavaScript实现透明度技巧(但是以不符合XHTML验证为代价)

CSS-实例

22.圆角2

流式跨度和高度的圆角div。

CSS-实例

23.使用背景图片百分比来创建图表

条线图使用列表<li>。

CSS-实例

24.CSS柱状图:实例

3款柱状图实例:使用div和列表标签的”基本CSS柱状图”、”复杂CSS柱状图”、”垂直CSS柱状图”。

CSS-实例

25.动态翻转简单头

箭头会平滑的跟随鼠标移动,没有使用一丁点JavaScript和gif动画。

CSS-实例

26.基于CSS的表单模板

CSS-实例

27.CSS图片文本结合技巧

使用了空白div来让文本能围绕背景图中的图像显示。

CSS-实例

28.使用CSS实现淡入效果的图片

这个实例使用透明度设置和简单的图片逐渐在文字上方淡入图片。

CSS-实例

29.纯CSS弹出效果

一个在IE5(Mac)上也能正常工作的弹出技巧。


  评论这张
 
阅读(6)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018