站长推荐：53个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的导航

screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window\nCTRL Mouse wheel to zoom in/out';}" onclick="if(!this.resized) {return true;} else {window.open('http://www.planabc.net/uploads/200703/53css_01.gif');}" alt="" src="/info/upimg/allimg/080225/1052260.gif" onload="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window\nCTRL Mouse wheel to zoom in/out';}" border=1>

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

screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window\nCTRL Mouse wheel to zoom in/out';}" onclick="if(!this.resized) {return true;} else {window.open('http://www.planabc.net/uploads/200703/53css_02.gif');}" alt="" src="/info/upimg/allimg/080225/1052261.gif" onload="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window\nCTRL Mouse wheel to zoom in/out';}" border=1>

3. CSS Tabs //CSS标签

screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window\nCTRL Mouse wheel to zoom in/out';}" onclick="if(!this.resized) {return true;} else {window.open('http://www.planabc.net/uploads/200703/53css_03.gif');}" alt="" src="/info/upimg/allimg/080225/1052262.gif" onload="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window\nCTRL Mouse wheel to zoom in/out';}" border=1>

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

screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window\nCTRL Mouse wheel to zoom in/out';}" onclick="if(!this.resized) {return true;} else {window.open('http://www.planabc.net/uploads/200703/53css_04.gif');}" alt="" src="/info/upimg/allimg/080225/1052263.gif" onload="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window\nCTRL Mouse wheel to zoom in/out';}" border=1>

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

screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window\nCTRL Mouse wheel to zoom in/out';}" onclick="if(!this.resized) {return true;} else {window.open('http://www.planabc.net/uploads/200703/53css_05.gif');}" alt="" src="/info/upimg/allimg/080225/1052264.gif" onload="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window\nCTRL Mouse wheel to zoom in/out';}" border=1>

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

screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window\nCTRL Mouse wheel to zoom in/out';}" onclick="if(!this.resized) {return true;} else {window.open('http://www.planabc.net/uploads/200703/53css_06.gif');}" alt="" src="/info/upimg/allimg/080225/1052265.gif" onload="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window\nCTRL Mouse wheel to zoom in/out';}" border=1>

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有