• 欢迎访问搞代码网站,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站!
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏搞代码吧

站长推荐:53个CSS-不可或缺的技巧_css

css 搞代码 7年前 (2018-06-10) 187次浏览 已收录 0个评论

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的导航

站长推荐:53个CSS-不可或缺的技巧_css

2. Navigation Matrix Reloaded //导航矩块翻转

站长推荐:53个CSS-不可或缺的技巧_css

3. CSS Tabs //CSS标签

站长推荐:53个CSS-不可或缺的技巧_css

4. CSS Bar Graphs //CSS条状图表

站长推荐:53个CSS-不可或缺的技巧_css

5. Collapsing Tables: An Example //压缩表格:一个实例

站长推荐:53个CSS-不可或缺的技巧_css

6. Adam’s Radio & Checkbox Customisation Method //亚当的单选框和复选框的用户化方法

站长推荐:53个CSS-不可或缺的技巧_css

7. CSS Image Replacement //CSS图像替代

站长推荐:53个CSS-不可或缺的技巧_css

8. CSS Shadows(CSS Shadows Roundup) //CSS阴影(CSS阴影综述)

站长推荐:53个CSS-不可或缺的技巧_css

9. CSS Rounded Corners Roundup (Nifty Corners) //CSS圆角综述(漂亮的拐角)

站长推荐:53个CSS-不可或缺的技巧_css

10. Drop Cap-Capital Letters with CSS //用CSS实现首字母下沉

站长推荐:53个CSS-不可或缺的技巧_css

11. Define Image Opacity with CSS //用CSS定义图像半透明

站长推荐:53个CSS-不可或缺的技巧_css

12. How to Create a Block Hover Effect for a List of Links //如何给链接列表创建鼠标悬停的区块效果

站长推荐:53个CSS-不可或缺的技巧_css

13. Pullquotes with CSS (Automatic Pullquotes with JavaScript and CSS) //用CSS实现引用(用javaScript和CSS实现自动引用)

站长推荐:53个CSS-不可或缺的技巧_css

14. CSS Diagrams //CSS图表

站长推荐:53个CSS-不可或缺的技巧_css

15.CSS Curves //CSS曲线

站长推荐:53个CSS-不可或缺的技巧_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 C whichever is visually lowest.

页脚帖允许一个网站页面的页脚显示在在浏览器窗口的底部或者网站页面内容的底部中实际最底的一个。

站长推荐:53个CSS-不可或缺的技巧_css

17. CSS Image Map //CSS图像地图

站长推荐:53个CSS-不可或缺的技巧_css

18. CSS Image Pop-Up //CSS图像弹出

站长推荐:53个CSS-不可或缺的技巧_css

19.CSS Image Preloader //CSS图像预载

站长推荐:53个CSS-不可或缺的技巧_css

20. CSS Image Replacement for Buttons //CSS按钮的图片替换

站长推荐:53个CSS-不可或缺的技巧_css

21.Link Thumbnail //链接缩略图

站长推荐:53个CSS-不可或缺的技巧_css

22. CSS Map Pop //CSS地图提示

站长推荐:53个CSS-不可或缺的技巧_css

23. PHP-based CSS Style Switcher //基于PHP的CSS样式改变

站长推荐:53个CSS-不可或缺的技巧_css

24. CSS Unordered List Calender (CSS Styled Calender) //CSS无序列表日历(CSS设计的日历)

站长推荐:53个CSS-不可或缺的技巧_css

25. CSS-Based Forms: Techniques //基于CSS的表单:技巧

站长推荐:53个CSS-不可或缺的技巧_css

26. CSS-Based Tables: Techniques //基于CSS的表格:技巧

站长推荐:53个CSS-不可或缺的技巧_css

27. Printing Web-Documents and CSS //打印网站文档和CSS

站长推荐:53个CSS-不可或缺的技巧_css

28. Improved Links-Display for Print-Layouts with CSS //用CSS改良打印布局的链接显示

站长推荐:53个CSS-不可或缺的技巧_css

29. CSS-Submit Buttons //CSS提交按钮

站长推荐:53个CSS-不可或缺的技巧_css

30. CSS Teaser Box //CSS内容摘要盒子

站长推荐:53个CSS-不可或缺的技巧_css

31. CSS Tricks for Custom Bullets //对于定义式列表的CSS窍门

站长推荐:53个CSS-不可或缺的技巧_css

32. Ticked Off Links Reloaded //用记号标出翻转的链接

站长推荐:53个CSS-不可或缺的技巧_css

33. CSS Zooming //CSS缩放

站长推荐:53个CSS-不可或缺的技巧_css

34. Creating a Star Rater using CSS //用CSS创建星型评价

站长推荐:53个CSS-不可或缺的技巧_css

35. The ways to style visited Links //设计浏览过链接的方法

站长推荐:53个CSS-不可或缺的技巧_css

36. PDF, ZIP, DOC Links Labeling //PDF,ZIP,DOC链接的标注

站长推荐:53个CSS-不可或缺的技巧_css

37. Displaying Percentages with CSS //用CSS显示百分比

站长推荐:53个CSS-不可或缺的技巧_css

38. Image Floats without the Text Wrap //没有被正文包围的浮动图片

站长推荐:53个CSS-不可或缺的技巧_css

39. Let visitors decide, whether or not will they open link in a new window //让访问者决定,是否会在新窗口带开链接

站长推荐:53个CSS-不可或缺的技巧_css

40. Simple accessible external links //简单易用的外部链接

站长推荐:53个CSS-不可或缺的技巧_css

41. Zebra Table with JavaScript and CSS //用JavaScript和CSS实现多条纹的表格

站长推荐:53个CSS-不可或缺的技巧_css

42. Vertical Centering with CSS (Horizontal and Vertical Centering with CSS) //用CSS实现垂直居中(用CSS实现水平和垂直居中)

站长推荐:53个CSS-不可或缺的技巧_css

43. Unobtrusive Sidenotes //不引人注目的旁注

站长推荐:53个CSS-不可或缺的技巧_css

44. Image Caption with CSS (Styled Images with Caption) //用CSS实现图像说明(设计给图像加上说明)

站长推荐:53个CSS-不可或缺的技巧_css

45. Dynamic Piechart with CSS //用CSS实现动态饼图

站长推荐:53个CSS-不可或缺的技巧_css

46. Format Footnotes with CSS //用CSS实现布局脚注

站长推荐:53个CSS-不可或缺的技巧_css

47. Hierarchical Sitemap with CSS //用CSS实现分等级的网站地图

站长推荐:53个CSS-不可或缺的技巧_css

48. Snook’s Resizable Underlines //史鲁克的可改变大小的下划线

站长推荐:53个CSS-不可或缺的技巧_css

49. Switchy McLayout: An Adaptive Layout Technique //马克布局改变: 一个自适应布局的技巧

站长推荐:53个CSS-不可或缺的技巧_css

50. StyleMap: CSS+html Visual Sitemap //样式地图:CSS+HTML 形象化的网站地图

站长推荐:53个CSS-不可或缺的技巧_css

51. Custom Reading Width //自定义阅读宽度

站长推荐:53个CSS-不可或缺的技巧_css

52. CSS Alert Message //CSS提示信息

站长推荐:53个CSS-不可或缺的技巧_css

53. CSS Production Notes //CSS产品注释

站长推荐:53个CSS-不可或缺的技巧_css

原文:http://www.smashingmagazine.com/ … uldnt-live-without/

欢迎大家阅读《站长推荐:53个CSS-不可或缺的技巧_css》,跪求各位点评,若觉得好的话请收藏本文,by 搞代码


搞代码网(gaodaima.com)提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected],我们会在看到邮件的第一时间内为您处理,或直接联系QQ:872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:站长推荐:53个CSS-不可或缺的技巧_css

喜欢 (0)
[搞代码]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址