53个CSS不可或缺的技巧

css|技巧

53 CSS-Techniques You Couldn’t Live Without
53个CSS-不可或缺的技巧

QUOTE: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文件更换另一个。难道它不够强大吗?恩,是的,其实它很强大。

QUOTE: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的技巧,如果你做网站开发,应该永远都愿意掌握它们。

QUOTE: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产品注释

时间: 2024-09-25 18:26:22

53个CSS不可或缺的技巧的相关文章

CSS网页制作技巧:IE浏览器下li的默认高度问题

文章简介:CSS网页制作技巧:IE浏览器下li的默认高度问题. 昨天,在家打开IE7浏览器看"视频导航网"的时候,发现居然有排版错误. 用F12开发者工具看了下,发现 li 的默认高度既然不统一? 用工具看了下,发现火狐高度解析统一为33px,而IE7解析高度根据字的不一样,默认解析的高度为30px,纯数字的解析高度为31px;中英文组合的解析高度为32px; 解决方法一:给LI设置高度后,IE7正常了,但IE6问题依然存在.原来,LI里面还嵌套着A标签,给A也设置一个高度后问题解决.

CSS网页制作技巧:兼容主流浏览器的背景颜色透明

文章简介:CSS网页制作技巧:兼容主流浏览器的背景颜色透明. 以前都是用jquery来写背景透明,方法简单,但是有缺点,脚本没加载完时,背景颜色是不透明的.如果换成在css里写好的话,效果就很好了..transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; } 上面的几个属性分别是: opacity: 0.5; 这是最重要的,因为它是CSS标准.该属性支持f

CSS网页制作技巧:隐藏网页元素的方法汇总

文章简介:CSS网页制作技巧:隐藏网页元素的方法汇总. 在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间:有的可以响应点击,有的不能响应点击.下面一个个列出,选一个适合你的 { display: none; /* 不占据空间,无法点击 */ }{ visibility: hidden; /* 占据空间,无法点击 */ }{ position: absolute; top: -999em; /* 不占据空间,无法点击 */ }{ position: rela

CSS网页设计技巧:input按钮在IE浏览器的兼容问题

文章简介:CSS网页设计技巧:input按钮在IE浏览器的兼容问题. 这段时间在处理网页默认的input 按钮时,IE下常显现不一致的宽度问题,让人感到很纠结.所以今天请教了几位高手把这个问题解决了,现在贴出来和大家共享一下,当然这个方法在网上曾有人写过,大家可以一起来相互探讨一下. Html Code: <input type="submit"; class="form-submit" value="subscribe" name=&qu

网页制作——CSS的常用技巧放送

css|技巧|网页 CSS的常用技巧放送(一) 一.使用css缩写 使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则请参看<常用css缩写语法总结>,这里就不展开描述. 二.明确定义单位,除非值为0忘记定义尺寸的单位是CSS新手普遍的错误.在HTML中你可以只写width=100,但是在CSS中,你必须给一个准确的单位,比如:width: 100px width:100em.只有两个例外情况可以不定义单位:行高和0值.除此以外,其他值都必须紧跟单位,注意,不要在数值和

CSS兼容的技巧

CSS教程:CSS兼容的技巧-浏览器兼容教程 让你的样式完美兼容各大浏览器,这个方案主要是用来解决Safari的,Opear是在测试的时候顺带试了一下,结果发现竟然也行,所以顺便也解决了. .e {/*FF OP*/ background-color: #FF0000 } html* .e{/*Sa IE7 OP*/ background-color:#FF00FF } * html .e{ background-color:#000000;/*OP*/ *background-color:#0

CSS 黑魔法小技巧,让你少写不必要的JS,代码更优雅

之前不久,由于自己平时涉猎还算广泛,总结了一篇博客: 这些JavaScript编程黑科技,装逼指南,高逼格代码,让你惊叹不已 ,没想到受到了大家的欢迎,有人希望能博主还能整理个 CSS的一些黑魔法小技巧,无奈我 CSS 一直很渣,没什么干货,最近写了一个 Chrome 插件 GayHub,算是把 GitHub 的样式审查了个变,在写的过程中,也收获了很多关于 CSS 的小技巧,尤其是开始的第一个技巧,学习到了很多,于是再加上一波搜集,就诞生这篇博文,欢迎补充~~~:joy:. 1.利用 CSS 

CSS网页制作技巧:让网页内容居中的方法

文章简介:居中一直是设计师们比较喜欢使用的一种摆放形式,无论是图片还是文字都会被要求放在中间,水平或者垂直.css提供了很多方便的让内容居中的方法给我们使用,以下罗列那些最长被使用的居中技巧. 居中一直是设计师们比较喜欢使用的一种摆放形式,无论是图片还是文字都会被要求放在中间,水平或者垂直.css提供了很多方便的让内容居中的方法给我们使用,以下罗列那些最长被使用的居中技巧. 水平居中的text-align:center 和 margin:0 auto 这两种方法都是用来水平居中的,前者是针对父元

CSS网页设计技巧:表单button的text

文章简介:表单button的text-indent问题. HTML <input type="submit" value="Submit" id="btn" /> HTML <input type="submit" value="Submit" id="btn" /> CSS Code在这个实例中,通过图片背景来制作Button,采用了图片替代文字最常用的一种方法