html 好看的css样式大全,优秀漂亮的CSS3样式收集(2012版)

优秀漂亮的CSS3样式收集(2012版)

Sponsor10a45d2d0c23f68c6aa68c87bb9e706a.png

我想有不少人已经接触过CSS3,它给设计师以及前端人员带来很多的方便,今天为大家收集2012年至今较为漂亮的CSS3样式,有些带有教程哦,看到哪么漂亮的样式不知道你有没有心动想制作一个呢?下面大家一起来看看CSS3的样式之美。

※ 下面的CSS3例子,请使用IE9或其它支持CSS3的浏览器浏览。

CSS3制作的Tool Tips效果,半透明很漂亮。

622ed075f588167a40fb90c65a224015.gif

一个带背景动画的盒子。

622ed075f588167a40fb90c65a224015.gif

用CSS3来制作TAB,效果很不错哦,里面还配有教程,喜欢的可以学习下。

622ed075f588167a40fb90c65a224015.gif

CSS3制作的手网琴效果,也带有教程。

622ed075f588167a40fb90c65a224015.gif

这个用CSS3写的UI样式很漂亮啊,赞一个。

622ed075f588167a40fb90c65a224015.gif

鼠标HOVER提示效果,喜欢!

622ed075f588167a40fb90c65a224015.gif

一个带动画的标签云,创意界面都很不错。

622ed075f588167a40fb90c65a224015.gif

这个是由设计达人为了增加用户评论体验而用CSS3创作的一个留言样式,大家可以在设计达人网站尝试一下留言体验哦。

622ed075f588167a40fb90c65a224015.gif

CSS3写的滚动式幻灯片。

622ed075f588167a40fb90c65a224015.gif

一个CSS3相册展示,自己进去欣赏吧。

622ed075f588167a40fb90c65a224015.gif

CSS3图片展示效果。

622ed075f588167a40fb90c65a224015.gif

OL样式范例。

622ed075f588167a40fb90c65a224015.gif

CSS3写的组织架构目录。

622ed075f588167a40fb90c65a224015.gif

漂亮的CSS3表格样式。

622ed075f588167a40fb90c65a224015.gif

622ed075f588167a40fb90c65a224015.gif

CSS3写的通知提示样式。

622ed075f588167a40fb90c65a224015.gif

纯CSS3横向二级菜单,三级怎么写呢?

622ed075f588167a40fb90c65a224015.gif

又一个纯CSS3二级菜单,有点BUG。

622ed075f588167a40fb90c65a224015.gif

CSS3 面包屑导航,现在用CSS3就可以很简单制作出来了。

622ed075f588167a40fb90c65a224015.gif

漂亮CSS3 UI样式。

622ed075f588167a40fb90c65a224015.gif

这个纯CSS3写的效果很赞,无jQuery,响应性布局+平滑过渡的滑动效果,喜欢。

622ed075f588167a40fb90c65a224015.gif

和上面CSS3滑动例子差不多,学习学习。

622ed075f588167a40fb90c65a224015.gif

iPhone页面动画用CSS3的实现方法,原来是这么强悍……不过官网不是这么实现,是用JS写的。

622ed075f588167a40fb90c65a224015.gif

CSS3 创意HOVER效果。

622ed075f588167a40fb90c65a224015.gif

主要用CSS3渐变颜色实现。

622ed075f588167a40fb90c65a224015.gif

CSS3的漂亮按钮风格实现。

622ed075f588167a40fb90c65a224015.gif

CSS3制作的3D按钮效果。

622ed075f588167a40fb90c65a224015.gif

漂亮的CSS3按钮样式。

622ed075f588167a40fb90c65a224015.gif

CSS3改变input样式,UI也很漂亮,这个要在webkit浏览器浏览哦。

622ed075f588167a40fb90c65a224015.gif

一个CSS3的登陆样式。

622ed075f588167a40fb90c65a224015.gif

像iOS哪个提示+选择样式。

622ed075f588167a40fb90c65a224015.gif

Apple风格的登陆表单样式。

622ed075f588167a40fb90c65a224015.gif

看这么多CSS3样式,除了能制作漂亮的UI,还能实现很多jQuery才能实现的效果,真想国内能快点到CSS3时代,我想哪时候国外已经是CSS5的时代了,哈哈。

推荐:查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com

交流:为设计新人提供的设计交流群,请加入UI设计交流群,分享经验、接单、求职、聊设计。

赞助商链接

155252a6671cbe350ec7f31b0924d3ce.png

赞助商链接

喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。

版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。

9ff99a24a3317fd71f083116e876a4c3?s=32&d=mm&r=g

longxia -

2014 年 09 月 26 日 下午 1:20

确实不错

681c8afaf173814c21bcf077c1826a28.png

刘易斯 -

2014 年 11 月 27 日 下午 9:44

kk

681c8afaf173814c21bcf077c1826a28.png

刘易斯 -

2014 年 11 月 27 日 下午 9:44

iii

25b4c65ae69045ef5f5d61ab9764f362?s=32&d=mm&r=g

罗罗磊磊 -

2012 年 09 月 02 日 下午 1:28

不错

a11f55b83f91771b6cc11ba3d0cc6558?s=32&d=mm&r=g

疤在互联网上的刀 -

2012 年 08 月 30 日 下午 4:04

不错不错~~

681c8afaf173814c21bcf077c1826a28.png

Kaede -

2012 年 08 月 30 日 上午 9:21

感谢提供……很不错,很喜欢。支持一下哈。继续加油~

{ 发表评论 }

姓 名 (必填)

邮 件 (必填)

网 站

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
数计学院第八届综合技能大赛系列活动之—— 网页设计大赛 为提高我院同学计算机应用技能特别是网络技术的能力,完善我院同学从事任教的 技能,以增强班级凝聚力并丰富同学们的课余文化生活,我院特举办第八届综合技能之 网页制作大赛。 一、活动主题:创意网页,我来做主 二、面向对象:数计学院全日制在校学生 三、参赛方式: 1、组织形式:以个人、小组(不能多于3人)为单位参赛; 2、作品上交方式:(1)参赛作品小于20M上传到网络部邮箱:用户名: skywyds2013@163.com (下届建议:不能公开公布密码)。 (2)或者参赛者在25号晚上18:30——19:30,带作品到教一学工办(原教一207),届 时会有专人在那里收集作品。 3、作品挑选规则:上交作品先经专业评委筛选,再选出10左右优秀作品进行决赛(按参 赛人数决定)。 四、活动流程: 1、作品征收阶段:2013年10月25日下午19:30前 2、入围作品公布名单阶段:10月28日 3、入围作品决赛阶段:2013年11月2日(决赛中,选手对作品进行5分钟内的解说,具体 解说内容将会在选手会议通知) 五、作品要求: 1、所有参赛作品制作软件不限,使用技术不限(每个作品要求3个页面以上)。 2、主题鲜明突出,创意新颖,页面结构美观,内容积极健康向上。 3、内容包括:学院风采展、班特色风采展、班风建设、学风建设、专业学习资源等,参 赛者可以添加其他个性特色项目。 4、参赛选手自定一个站点名称,静态网页格式html,动态网页格式为php,参赛作品首 页文件名为index.htm、index.html或index.php。 5、参赛作品中字体设定应为常见的简体字,不应用不常见的字体或繁体字。 6、网页应有较好的浏览兼容性,浏览器为IE 6.0以上、IE 10.0以下。 7、作品用Word文档注明参赛人员的名字、联系方式、年级班别,作品在哪个本浏览器 效果最佳以及从作品的设计方法、构思、功能、所用到的技术等。(下届必须强调选手 要填写) 六、奖项设置: 一等奖 1名 、 二等奖2名 、 三等奖 3名 、 优秀奖 4名(下届修改建议:占百分比?) 主办单位:数计学院团委、学生会 宣委会、勤工中心、学生党建中心 承办单位:网络部、电脑协会、权益部 2013年10月11日 附件一、评分细则 "项目 "标 准 描 述 "标 "得分" " " "分 " " "内容取材 "所用资源的原创程度(鼓励原创)。 "10 " " "(35分) " " " " " "内容丰富详实、主题明确(全站点围绕一个主题 "10 " " " "及其周边内容)、栏目规划科学。 " " " " "通过多种内容形式(如文字、图片、动画等)突 "8 " " " "出表现网站主题。 " " " " "内容健康向上,具有实用性、艺术性、可读性。 "7 " " "面设计 "原创面设计 "10 " " "(35分) " " " " " "整体结构布局合理,整体风格一致,构图和谐, "10 " " " "页面内容清晰明了。 " " " " "导航清晰,网页文字及链接无错误,主页与附属 "8 " " " "页连接自如、查阅方便,文件组织管理合理规范 " " " " "(特别强调文件名使用规范,首页命名一律使用i" " " " "ndex.htm/index.html/index.php)。 " " " " "色彩搭配和谐(包括页面、文字、图片、动画等 "7 " " " "颜色的整体搭配),美观大方,符合美感,贴近 " " " " "主题。 " " " "技术含量 "动态网站附加分。评分标准:数据库设计合理(1"30 " " "(20分) "0分)、后台功能完善(10分)、管理方便(5分)、 " " " "(附加30分"用户交流区(5分)。 " " " ") " " " " " "网页数据定位准确,无偏移、错位,文字无乱码 "5 " " " "。在800×600和1024×768分辨率下能正常显示,浏" " " " "览速度快捷。 " " " " "合理使用使用层叠样式表(css)对网页进行修饰"5 " " " ",使网站页面能统一风格。 " " " " "素材音效质量高、占用空间小,图片、动画清晰 "5 " " " "生动,网页无冗余代码,无错误,下载速度快。 " " " " "综合运用多种网页特效技术,使页面既能统一风 "5 " " " "格,又可突出主题。 " " " "个性特点 "选题、设计、内容表达形式和技术运用有个人独 "10 " " "(10分) "特风格。 " " " 湛江师范学院数学与计算科学学院第八届综合技能系列活动之网页设计大赛现在开始报 名啦!"创意网页,我来做主",我们提供舞台,你们来展现,一个机会,设计出专属
### 回答1: 为了使表格看起来更美观,可以使用CSS样式。 一些常用的样式包括设置边框、表格间距和颜色、为表头和行/列设置不同的背景色等。 一些示例代码: ``` table{ border-collapse: collapse; /* 合并边框 */ width: 100%; /* 表格宽度 */ } th, td{ border: 1px solid #ccc; /* 边框样式 */ padding: 8px; /* 单元格内边距 */ } th{ background-color: #f2f2f2; /* 表头背景色 */ text-align: left; /* 文本对齐方式 */ } ``` 除此之外,还可以使用css框架,如Bootstrap来美化表格,只需要在table上添加class就可以了。 还有很多其他的样式可以调整, 这里只是给出一些基本的样例。 ### 回答2: HTML的table(表格)是一个用于在网站上展示数据的非常常见的元素。然而默认的样式相对简单,如果你想要让表格更美观一些,可以使用CSS给它加点样式。在这里,我将会分享一些好看的table样式,希望能够为你的网站添加一些迷人的效果。 1. 简洁的黑白表格 这是一种非常简单却又非常流行的表格样式。只需要设定表格的背景颜色和字体颜色为白色和黑色,然后设置一些padding和border,你就可以得到一个很常见的简洁的表格。你还可以使用CSS伪类选择器来设置鼠标悬停时的效果。 2. 带有斑马线的表格 斑马线是指在表格中的每一行之间交替设置不同颜色的背景,以便于视觉区分。仍然可以使用黑白颜色组合,但是在不同的行之间间隔一些灰色或其他颜色的背景。你可以在CSS中使用:nth-child属性来设置这个效果。这种样式会让表格看起来更有层次感。 3. 圆角表格 圆角表格给人一种温和、柔软、可爱的效果。你可以用CSS的border-radius属性来控制,设置几个像素的边角半径来实现圆角。这个样式适用于如博客、产品列表等需要呈现温和氛围的网站。 4. 排序表格 如果你需要一个可以按照不同条件排序的表格,考虑使用第四种样式——排序表格。这个样式应用了一些额外的JavaScript功能,也可以使用jQuery插件库来实现。很多数据表格在传统上是通过点击表头实现排序,而这个样式让排序具有更显眼的效果。 这些都是一些不错的table样式来美化你的网站。虽然可以用这里提供的样式迅速地使表格变得好看,但除此之外还有很多其他的样式选择可以探索。总体而言,选择适合你的目的和风格的表格样式是一个重要的过程,你需要考虑你的网站主题、受众群体的偏好以及信息的可读性和可操作性。 ### 回答3: 在Web开发中,table是常用的布局元素,可以用于展示数据、排列表格等。然而,table默认的样式并不美观,这就需要我们自己来设计表格的样式,使其看起来更加美观、清晰、易于阅读。下面我来介绍一些好看的table样式。 首先,我们可以通过CSS来设计表格的外观,其中包括:背景色、边框、文本样式、字体等。以下是一个简单的CSS样式代码段,可以用于美化表格: ``` table { border-collapse: collapse; width: 100%; text-align: left; font-family: Arial, sans-serif; font-size: 14px; } td, th { border: 1px solid #ddd; padding: 8px; } th { background-color: #f2f2f2; color: #333; } tr:nth-child(even) { background-color: #f9f9f9; } ``` 这段代码实现了一些基本的样式,包括: - `border-collapse: collapse`将表格的边框合并为一个; - `width: 100%`使表格占据整个父元素的宽度; - `text-align: left`将表格中的文本左对齐; - `font-family`和`font-size`定义了表格中的字体信息; - `td, th`定义了表格中的单元格样式,包括边框和内边距; - `th`定义了表格头的样式,包括背景色和文本颜色; - `tr:nth-child(even)`定义了表格中偶数行的背景色。 此外,我们还可以通过CSS框架来进行表格的美化。Bootstrap是一个非常流行的CSS框架,它提供了丰富的组件库,其中包括表格组件。以下是一个Bootstrap表格样式代码段: ``` <table class="table table-striped"> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <td>2</td> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <td>3</td> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table> ``` 这段代码中使用了Bootstrap的表格样式类`table table-striped`,它可以让表格变得更加美观,有斑马线效果,同时还包括表头样式等。 除了基本的CSS样式和框架之外,还有很多第三方CSS库可以用于表格样式的美化,例如Tablecloth、DataTables等。这些库都提供了丰富的表格样式、交互效果等,可以让我们在设计表格时更加方便快捷。 总之,设计好看的表格样式需要我们具备一定的CSS技术和美学能力,同时也要结合使用CSS框架和第三方库,充分利用现有的资源,才能让表格看起来更加美观、清晰、易于阅读、有条理。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值