`
lq_kevin
  • 浏览: 48720 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

53个CSS-不可或缺的技巧

阅读更多

原文:http://www.smashingmagazine.com/2007/01/19/53-css-techniques-you-couldnt-live-without/
翻译:Blank(怿飞)

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

 

查看CSS源码请查看原文,

原文地址:http://www.smashingmagazine.com/2007/01/19/53-css-techniques-you-couldnt-live-without/

分享到:
评论

相关推荐

    Imersao-css-源码.rar

    响应式设计是现代网页开发不可或缺的部分。源码中可能会有使用媒体查询(Media Queries)实现不同屏幕尺寸下页面样式的调整,以确保在手机、平板电脑和桌面设备上的良好显示。这涉及到了流式布局(Fluid Layout)、...

    CSS-rounded-corners.rar_rounded-corners.css

    总之,CSS的`border-radius`属性是现代网页设计中不可或缺的一部分,它简化了创建圆角边框的过程,同时也为设计师提供了无限的创意空间。通过熟练掌握这一特性,我们可以构建出更加精致、具有吸引力的网页界面。

    css那些事儿---css

    在IT行业中,CSS(Cascading Style Sheets)是网页设计不可或缺的一部分,用于定义网页的布局、样式和视觉表现。这个主题“CSS那些事儿”涵盖了CSS的方方面面,包括基础语法、选择器、盒模型、布局技术、响应式设计...

    css-html资源集锦

    在IT领域,特别是网页设计与开发中,CSS(层叠样式表)和HTML(超文本标记语言)是不可或缺的基础技术。这些技术共同构成了网页的结构和样式,使得我们可以创建出美观且功能丰富的网页。本资源集锦正是针对这些关键...

    CSS-V4.2.3 参考手册-电子版

    《CSS-V4.2.3 参考手册-电子版》是一个非常实用的资源,尤其对于正在学习前端界面设计和CSS技术的初学者或者开发者来说,这是一个不可或缺的工具。CSS,全称Cascading Style Sheets,是用于描述HTML或XML(包括如SVG...

    CSS-中文API.rar

    **CSS(层叠样式表)**是网页设计中不可或缺的一部分,它用于定义页面的布局、颜色、字体等视觉样式。CSS使得网页的呈现与结构分离,增强了网页的可维护性和可扩展性。在这个名为“CSS-中文API.rar”的压缩包中,...

    CSS-elementary-manual-.rar_Elementary

    在网页设计领域,CSS(Cascading Style Sheets)是不可或缺的一部分,它负责定义页面的布局、颜色、字体等视觉样式。本文档《CSS编程入门(全)》将带你走进CSS的世界,从基础概念到实际应用,帮助你掌握这个强大的...

    CSS-Sample.zip_40

    **CSS(层叠样式表)**是网页设计中不可或缺的一部分,它用于定义HTML或XML(包括SVG、XHTML等)文档的呈现。CSS控制着页面的布局和视觉样式,包括字体、颜色、大小、间距、排列以及更多。在这个名为"CSS-Sample.zip...

    css排版技巧 实用

    随着技术的发展,CSS已成为网页设计不可或缺的一部分。虽然“表格已死”的说法在一定程度上反映了CSS的重要性,但在实际应用中仍然存在一些挑战。通过不断学习与实践,我们可以充分利用CSS的强大功能,实现更加美观...

    精通css-高级web标准解决方案

    此外,CSS高级技术还包括布局技术,如弹性盒子模型(Flexbox)、网格布局(Grid)和定位技术(Positioning),这些都是构建复杂网页布局不可或缺的工具。 此外,CSS预处理器如Sass、Less也是高级CSS技术的一部分。...

    css-cheat-sheet-v2.pdf.zip_Simple Style

    在Web开发中,CSS(Cascading Style Sheets)是不可或缺的一部分,它用于控制网页的布局和外观。本资源"css-cheat-sheet-v2.pdf.zip"提供了一份简明易懂的CSS样式速查表,方便开发者快速查找和应用CSS属性。这份速...

    CSS-DIV电子资料

    总的来说,"CSS-DIV电子资料"包含的教程和手册是学习现代网页设计不可或缺的资源。它们提供了详尽的理论知识和实用技巧,帮助你逐步成为精通CSS和DIV的专业网页设计师。通过深入学习和实践,你可以创建出既美观又...

    css-text 教程

    无论是简单的文本缩进还是复杂的文本装饰效果,《CSS Text》这本书都提供了详尽的指导,是每一位前端开发者不可或缺的学习资源。通过实践这些技巧,您可以为您的网站或应用程序创造出更加优雅且易于阅读的文本布局。

    css-quickstart.rar_css_site:www.pudn.com

    在web开发领域,CSS(Cascading Style Sheets)层叠样式表是不可或缺的一部分,它用于控制网页元素的呈现方式,包括颜色、字体、布局以及页面的响应式设计。"css-quickstart.rar"是一个压缩包文件,从标题来看,它是...

    construct_css-源码.rar

    在网页设计领域,CSS(Cascading Style Sheets)是不可或缺的一部分,它负责定义网页的布局、样式和视觉效果。"construct_css-源码.rar"这个压缩包文件,很可能是为了帮助我们深入学习和实践CSS而提供的源码资源。...

    css宝典-五日精通送一套css模版 

    响应式设计是现代Web开发不可或缺的一部分。书中可能会介绍媒体查询,这允许我们根据设备特性(如屏幕尺寸、分辨率等)来调整样式。这有助于创建适应不同设备的网页,从而提供更好的用户体验。 CSS3引入了许多新的...

    精通CSS-高级Web标准解决方案

    3. **布局技术**:包括流体布局、网格布局、Flexbox和Grid布局等,这些都是现代网页设计中不可或缺的部分,尤其是Flexbox和Grid的使用,能实现复杂的响应式设计。 4. **响应式设计**:讨论如何利用媒体查询和其他...

    css-yskz.rar_样式表

    **CSS(层叠样式表)**是Web设计中不可或缺的一部分,它允许开发者通过定义样式规则来控制网页的呈现效果。CSS-YSKZ.rar_样式表这个主题显然聚焦于如何利用CSS来创建和管理网页的视觉样式。让我们深入探讨一下CSS的...

    精通CSS--高级Web标准解决方案(part2)

    在Web开发领域,CSS是实现网页设计与布局不可或缺的一部分,它使得HTML内容可以呈现出丰富的视觉效果和响应式布局。 在Part2部分,这本书可能涵盖了以下几个关键知识点: 1. **选择器的高级用法**:CSS的选择器远...

    css教程免费下载

    综上所述,CSS是网页设计中不可或缺的技术之一,它不仅极大地提升了网页的视觉效果和用户体验,还为前端开发人员提供了一种高效、灵活的样式控制方式。通过学习CSS,可以掌握如何创建更加美观、功能强大且易于维护的...

Global site tag (gtag.js) - Google Analytics