[译]CSS系列技巧之一

      这是我翻译得国外的一篇关于cs技巧的文章,也是想通过翻译来更深入的学习这些东西,避免眼高手低的问题.这是第一次翻译,肯定有很多的纰漏,欢迎高手批评指正.
原文的地址是: 53 CSS-Techniques You Couldn’t Live Without
    css是重要的.并且也越来越多的被应用.样式表
提供了 比表格布局更有利的选择,首先它将页面布局,设计和页面信息进行了精确的分割.(类似MVC模式).由此可以对页面进行更灵活有效的控制和改变,只需要改变一个样式表css文件,就可达到目的.是不是很厉害啊? 事实上,确实如此.
    在过去的几年里,很多web开发者已经写了很多的关于css的技术文章,这些文章肯定让你获益匪浅.当然了,如果你能及时的找到他们.下面是一个css技术列表,作为一个css构建者,你一定不能错过它.它们是非常重要且能使你的工作变得更加的容易.下面让我们来看看这53项你必须掌握的技术吧.
    在这里多谢过去几年里一直耕耘在css技术方面的开发者们,非常感谢你们!

1. css基本导航

效果图:

演示地址: http://www.nundroo.com/navigation/
css代码:
Code

html代码:
html代码


批注:  关键点主要是图片翻转技术. background-position属性.



2. css矩阵导航

效果图:


演示地址: http://www.nundroo.com/nav_matrix/welcome2.html

css代码:

Code


html代码:

Code

关键图片:
[译]CSS系列技巧之一

批注:
    这是个非常有意思的导航,可以说是将background-position属性运用到了极致.随着鼠标的.根据位置的不同和鼠标是否hover来相应的对矩阵图片进行绝对的移动定位.smart!对ul元素和a元素同时应用同一个背景.一个用来做页面载入时的初始背景,一个用来做单个a元素的相应背景.



3. CSS Tab
效果图
:



演示地址: http://exploding-boy.com/images/cssmenus/menus.html

css代码:
 
html代码:

  批注:
这里推荐一个软件CSS Tab Designer,多余的废话就不讲了.下载地址是:  css_tab.zip


你可能感兴趣的:(css)