- 浏览: 2828157 次
- 性别:
- 来自: 武汉
文章分类
- 全部博客 (1173)
- 名言警句 (5)
- 心情随笔 (50)
- 数据库 (57)
- Java基础 (241)
- J2EE框架 (91)
- 数据结构 (12)
- 程序设计 (21)
- WEB技术 (128)
- 网络日志 (12)
- IT资讯 (247)
- linux (64)
- solaris (2)
- 其它 (143)
- WebService (4)
- 日语学习 (2)
- 机器人 (5)
- Android (5)
- cgywin (3)
- Game (1)
- DWR (1)
- spring (8)
- canvas (1)
- Guava (3)
- Modbus (5)
- 测试 (6)
- mongodb (9)
- Quartz (2)
- Cron (1)
- windows (2)
- 持续集成 (1)
- bootstrap (3)
- 结对编程 (1)
- nodejs (1)
- Netty (1)
- 安全 (3)
- webstorm (2)
- sparkline (1)
- Job (1)
- git (3)
- Maven (3)
- knockout (5)
- jquery (1)
- bower (1)
- docker (1)
- confluence (4)
- wiki (1)
- GoogleMap (1)
- jekyll (10)
- ruby (2)
- npm (3)
- browserify (1)
- gulp (3)
- openwrt (1)
- discuz (3)
- 输入法 (1)
- JPA (1)
- eclipse (2)
- IntelliJ (1)
- css (1)
- 虚拟机 (1)
- 操作系统 (1)
- azkaban (2)
- scrum (1)
最新评论
-
pangxiea_:
你好, 想请问一下 Linux下 这么使用rxtxcomm 在 ...
使用Java进行串口通信 -
abababudei:
请教一下,这个您是怎么解决的:/dev/ttyS2enteri ...
Java应用程序的MODBUS通讯 -
xuniverse:
hannibal005 写道楼主,我问下 request.se ...
用javascript与java进行RSA加密与解密 -
atxkm:
找了一下午,终于找到了
gulp 拷贝文件时如何移除文件目录结构 -
kalogen:
gtczr 写道非常感谢,经过我自己的修改,已经完美实现。发出 ...
用javascript与java进行RSA加密与解密
翻译:Blank(怿飞)
53 CSS-Techniques You Couldn't Live Without
53个CSS-不可或缺的技巧
CSS is important. And it is being used more and more often. Cascading Style Sheets offer many advantages you don't have in table-layouts - and first of all a strict separation between layout, or design of the page, and the information, presented on the page. Thus the design of pages can be easily changed, just replacing a css-file with another one. Isn't it great? Well, actualy, it is. |
CSS是重要的,它正在越来越广泛的被运用。层叠样式表拥有很多表格布局所没有的优势,首先从布局或者页面的设计与出现在页面中的信息中作严格 的分离,从而让页面的设计能够很容易被改变,仅用一个CSS文件更换另一个。难道它不够强大吗?恩,是的,其实它很强大。
Over the last few years web-developers have written many articles about CSS and developed many useful techniques, which can save you a lot of time - of course, if you are able to find them in time. Below you'll find a list of techniques we , as web-architects, really couldn't live without. They are essential and they indeed make our life easier. Let's take a look at 53 CSS-based techniques you should always have ready to hand if you develop web-sites. |
在过去的几年里,网站开发者写了很多关于CSS的文章和开发了很多实用的技巧,这些能帮你节省很多时间。当然,如果你有 足够时间也可能发现它们。在下面,你将会发现我们作为网站架构师真正不可或缺的技巧目录。它们确实是必要的,它们使我们的生活更简单。让我们看一看这53 个基于CSS的技巧,如果你做网站开发,应该永远都愿意掌握它们。
Thanks to all developers who contributed to accessible and usable css-based design over the last few years. We really appreciate it. Thanks! |
感谢所有的在过去几年里在易用和可用的基于CSS设计方面作出贡献的开发者们,我们真的很感谢他们!谢谢你们!
1. CSS Based Navigation //基于CSS的导航
2. Navigation Matrix Reloaded //导航矩块翻转
3. CSS Tabs //CSS标签
4. CSS Bar Graphs //CSS条状图表
5. Collapsing Tables: An Example //压缩表格:一个实例
6. Adam's Radio & Checkbox Customisation Method //亚当的单选框和复选框的用户化方法
7. CSS Image Replacement //CSS图像替代
8. CSS Shadows(CSS Shadows Roundup) //CSS阴影(CSS阴影综述)
9. CSS Rounded Corners Roundup (Nifty Corners) //CSS圆角综述(漂亮的拐角)
10. drop Cap-Capital Letters with CSS //用CSS实现首字母下沉
11. Define Image Opacity with CSS //用CSS定义图像半透明
12. How to create a Block Hover Effect for a List of Links //如何给链接列表创建鼠标悬停的区块效果
13. Pullquotes with CSS (Automatic Pullquotes with JavaScript and CSS) //用CSS实现引用(用JavaScript和CSS实现自动引用)
14. CSS Diagrams //CSS图表
15.CSS Curves //CSS曲线
16. Footer Stickallows for the footer of a Web page to appear either at the bottom of the browser window or the bottom of the Web page content – whichever is visually lowest.
页脚帖允许一个网站页面的页脚显示在在浏览器窗口的底部或者网站页面内容的底部中实际最底的一个。
17. CSS Image Map //CSS图像地图
18. CSS Image Pop-Up //CSS图像弹出
19.CSS Image Preloader //CSS图像预载
20. CSS Image Replacement for Buttons //CSS按钮的图片替换
21.Link Thumbnail //链接缩略图
22. CSS Map Pop //CSS地图提示
23. PHP-based CSS Style Switcher //基于PHP的CSS样式改变
24. CSS Unordered List Calender (CSS Styled Calender) //CSS无序列表日历(CSS设计的日历)
25. CSS-Based Forms: Techniques //基于CSS的表单:技巧
26. CSS-Based Tables: Techniques //基于CSS的表格:技巧
27. Printing Web-Documents and CSS //打印网站文档和CSS
28. Improved Links-Display for Print-Layouts with CSS //用CSS改良打印布局的链接显示
29. CSS-Submit Buttons //CSS提交按钮
30. CSS Teaser Box //CSS内容摘要盒子
31. CSS Tricks for Custom Bullets //对于定义式列表的CSS窍门
32. Ticked Off Links Reloaded //用记号标出翻转的链接
33. CSS Zooming //CSS缩放
34. Creating a Star Rater using CSS //用CSS创建星型评价
35. The ways to style visited Links //设计浏览过链接的方法
36. PDF, ZIP, DOC Links Labeling //PDF,ZIP,DOC链接的标注
37. Displaying Percentages with CSS //用CSS显示百分比
38. Image Floats without the Text Wrap //没有被正文包围的浮动图片
39. Let visitors decide, whether or not will they open link in a new window //让访问者决定,是否会在新窗口带开链接
40. Simple accessible external links //简单易用的外部链接
41. Zebra Table with JavaScript and CSS //用JavaScript和CSS实现多条纹的表格
42. Vertical Centering with CSS (Horizontal and Vertical Centering with CSS) //用CSS实现垂直居中(用CSS实现水平和垂直居中)
43. Unobtrusive Sidenotes //不引人注目的旁注
44. Image Caption with CSS (Styled Images with Caption) //用CSS实现图像说明(设计给图像加上说明)
45. Dynamic Piechart with CSS //用CSS实现动态饼图
46. Format Footnotes with CSS //用CSS实现布局脚注
47. Hierarchical Sitemap with CSS //用CSS实现分等级的网站地图
48. Snook's Resizable Underlines //史鲁克的可改变大小的下划线
49. Switchy McLayout: An Adaptive Layout Technique //马克布局改变: 一个自适应布局的技巧
50. StyleMap: CSS+HTML Visual Sitemap //样式地图:CSS+HTML 形象化的网站地图
51. Custom Reading Width //自定义阅读宽度
52. CSS Alert Message //CSS提示信息
53. CSS Production Notes //CSS产品注释
发表评论
-
30个你必须熟记的CSS选择器
2015-06-27 08:44 1719你学会了基本的id,class类选择器和descendant ... -
40 个超棒的免费 Bootstrap HTML5 网站模板
2015-04-11 16:12 2593Bootstrap 是快速开发Web应用程序的前端工具包。它 ... -
必须记住的 30 类 CSS 选择器
2014-12-30 08:56 938大概大家读知道`id`,`class`以及`descenda ... -
如何防止google map 加载Roboto字体
2014-12-26 13:16 831思路是在window.onload中当检测到加载Roboto ... -
JavaScript Equality Table
2014-12-09 16:17 1793Tables displaying the issue: ... -
WebStorm快捷键收集
2014-11-25 10:40 29641、webstorm快捷键: IntelliJ-Idea ... -
webstorm 常用快捷键
2014-08-25 15:58 897常用快捷键 Ctrl+/ 或 Ctrl+Shift+/ ... -
how to change bower components folder
2014-08-25 09:26 7301. create the file bower.json ... -
程序员应该知道的 13 个设计技巧
2014-07-14 09:34 697开发你的美感 … 我最喜欢的站点是: a ... -
tomcat7中tomcat-users.xml配置
2014-04-26 15:48 687将以下代码加入tomcat-users.xml中,即可登录t ... -
tomcat-maven-plugin的使用
2014-03-04 10:52 838环境: Ubuntu 8.10, tomcat6, ma ... -
Jsp动态显示服务器时间
2013-12-31 13:16 1038<script language=" ... -
前端工程与性能优化(下):静态资源管理与模板框架
2013-09-25 08:57 935本系列文章从一个全新的视角来思考web性能优化与前端工程之间 ... -
前端工程与性能优化(上):静态资源版本更新与缓存
2013-09-20 09:35 935每个参与过开发企业级 ... -
Handy and Useful jQuery Snippets for Developers
2013-09-18 15:43 763jQuery is a cross browser Java ... -
11 个用来创建图形和图表的 JavaScript 工具包
2013-08-13 07:00 1266Aristochart DEMO || Download ... -
Jive 论坛 license破解
2013-08-03 13:27 12761. 找到文件 \admin\global.jspf 注释 ... -
2012年度最佳Web前端开发工具和框架
2013-01-10 10:52 15702012年,Web 开发领域继续在快速的发展,HTML5 ... -
为网页设计师准备的 10 个色彩方案生成器
2012-02-22 23:01 1132Pictaculous ColorExplo ... -
13个最常用的CSS和HTML快速开发工具
2012-02-21 08:18 11921)CleverCSS CleverCSS ...
相关推荐
svg转css,css转svg,svg与css互相转换并压缩
css排版技巧 表格已死 css才是王道 一步步教您css的排版技巧
CSS设计技巧,包括取消下划线、设计响应式视频、背景图片的设置以及相对值等
css高级应用与技巧css高级应用与技巧css高级应用与技巧
25个高级CSS技巧教程 有的可能就是你在找的
18个css不可不知的技巧,仅供入门时参考。 专业高手不用看了
纯c制作3D旋转球体 纯CSS3制作3D旋转球体 纯CSS3制作3D旋转球体
简单的CSS3彩色旋转球体,炫酷的CSS3入门实例,练练手吧。
纯CSS实现的图片3D旋转效果,鼠标移上去后一个长方体以Y轴旋转
css颜色安全css配色技巧网站颜色搭配
一些解决 浏览器兼容问题的CSS技巧,看了之后你会觉得写出兼容的CSS代码会容易很多。不必在苦恼于控制float元素,等问题。
上百个CSS实例|CSS基础学习|CSS入门基础|CSS样式集合
CSS-技巧记录 记录一些常用的CSS属性 还可以CSS-技巧记录 记录一些常用的CSS属性 还可以
CSS3中的transform:rotate()可以实现旋转功能 transition: all 2.0s;表示所有的属性变换在2秒内完成; transform: rotate(360deg);表示图片旋转360度。 参考文档: ...
css更改图片颜色的技巧 ,代码很简单,具体代码如下所示: tips: JPG、PNG、GIF 都可以,但是有一个前提要求,就是黑色纯色,背景白色 .pic1 { background-image: url($img), linear-gradient(#f00, #f00); ...
css颜色搭配技巧 平面设计,网页设计,色彩永远是最重要的一环.
CSS3文字旋转特效,代码很少,是个示例代码,需要做特效的可以下载用。
本书还集中介绍了现实的浏览器问题,是弥补CSS知识欠缺不可或缺的参考书。 本书适合具有(X)HTML和CSS基本知识的任何网页设计人员阅读。本书将最有用的CSS技术汇总在一起,在介绍基本的CSS概念和最佳实践之后,...
CSS的常用技巧 CSS的常用技巧
css资料 # 课程目标: > 1. 学会使用CSS选择器 > 2. 熟记CSS样式和外观属性 > 3. 熟练掌握CSS各种选择器 > 4. 熟练掌握CSS各种选择器 > 5. 熟练掌握CSS三种显示模式 > 6....熟练掌握CSS高级技巧强化CSS