这是我翻译得国外的一篇关于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
<!--
body {
}{
margin: 26px;
padding: 0;
background: #fff url(back.png) no-repeat;
}
span {}{
display: none;
}
ul {}{
position: relative;
width: 800px;
background: url(bg_nav.png) no-repeat;
height: 113px;
list-style-type: none;
margin: 0;
padding: 0;
}
li#bu1 a, li#bu2 a, li#bu3 a, li#bu4 a {}{
background: transparent;
position: absolute;
width: 110px;
height: 32px;
bottom: 0;
text-decoration: none;
}
/**//* IE6 hacker */
* html*li#bu1 a, * html*li#bu2 a, * html*li#bu3 a, * html*li#bu4 a {}{ bottom: -1px; }
li#bu1 a {}{ left: 21px; }
li#bu2 a {}{ left: 122px; background: url(business_hover.gif) 0 0 no-repeat; }
li#bu3 a {}{ left: 223px; background: url(personal_hover.gif) 0 0 no-repeat; }
li#bu4 a {}{ left: 324px; background: url(information_hover.gif) 0 0 no-repeat; }
/**//*这里用到图片翻转技术,当鼠标移动到图片上的时候,显示图片的下半部分*/
li#bu2 a:hover, li#bu3 a:hover, li#bu4 a:hover {}{ background-position: 0 -32px; }
-->:
html代码
<body>
<ul>
<li id="bu1"><a href="#"><span>homepage</span></a></li>
<li id="bu2"><a href="#"><span>business</span></a></li>
<li id="bu3"><a href="#"><span>personal</span></a></li>
<li id="bu4"><a href="#"><span>information</span></a></li>
</ul>
</body>
批注: 关键点主要是图片翻转技术. background-position属性.
2. css矩阵导航
效果图:
演示地址:
http://www.nundroo.com/nav_matrix/welcome2.html
css代码:
Code
body {}{
background: #f1efe2;
}
#header {}{
margin: 0 auto 0 auto; /**//*居中*/
width: 650px;
padding: 0;
border: 5px solid #fff;
height: 120px;
background: #666 url(header.png) no-repeat left top;
}
ul#nav {}{
position: relative;
top: 68px; /**//*对矩阵图片进行绝对定位*/
left: 188px;
width: 346px; /**//*设定导航栏的宽度,这里为矩阵图片的每一行的宽度*/
margin: 0;
height: 22px; /**//*设定导航栏的高度,这里为矩阵图片的每一行的高度*/
list-style-type: none;
overflow: hidden;
}
/**//* 这里分别为四个所导航页面的图片的初始位置,根绝页面的不同相应的应用不同的样式,来定位背景 */
/**//* 这里将ul的样式不写入上面的ul#nav里面,而分开来写,是为了四个页面能同时使用同一个css文件 */
body#welcome ul#nav {}{ background: transparent url(nav_f_2.png) no-repeat 0 0; }
body#products ul#nav {}{ background: transparent url(nav_f_2.png) no-repeat 0 -22px; }
body#support ul#nav {}{ background: transparent url(nav_f_2.png) no-repeat 0 -44px; }
body#contact ul#nav {}{ background: transparent url(nav_f_2.png) no-repeat 0 -66px; }
/**//*对a元素应用同样的矩阵背景,这个背景主要是定位单个的a元素背景*/
ul#nav li a {}{
position: absolute;
top: 0;
width: 84px; /**//*将每一个a元素的宽度都设定为84,即每一个小格的宽度.第一列的小格为94*/
text-indent: -9000px; /**//*将a元素中的文本定位到页面外*/
text-decoration: none;
padding: 22px 0 0 0; /**//* 这里搞不明白,padding做什么呢?让a元素透明吗? */
overflow: hidden;
height: 0px !important;
height /**//**/:22px; /**//* IE5/Win */
background: transparent url(nav_f_2.png) no-repeat;
}
/**//*welcome页面的样式表,根据位置的不同相应的调整矩阵中应该显示那一个小格*/
body#welcome li#wel a {}{ background-position: 0 0; width: 94px; left: 0; }
body#welcome li#wel a:hover {}{ background-position: 0 0; }
body#welcome li#pro a {}{ background-position: -94px -88px; left: 94px; }
body#welcome li#pro a:hover {}{ background-position: -94px 0px; }
body#welcome li#sup a {}{ background-position: -178px -88px; left: 178px; }
body#welcome li#sup a:hover {}{ background-position: -178px 0; }
body#welcome li#con a {}{ background-position: -262px -88px; left: 262px; }
body#welcome li#con a:hover {}{ background-position: -262px 0; }
/**//*products页面的样式表*/
body#products li#wel a {}{ background-position: 0 -110px; width: 94px; left: 0; }
body#products li#wel a:hover {}{ background-position: 0 -22px; }
body#products li#pro a {}{ background-position: -94px -22px; left: 94px; }
body#products li#pro a:hover {}{ background-position: -94px -22px; }
body#products li#sup a {}{ background-position: -178px -88px; left: 178px; }
body#products li#sup a:hover {}{ background-position: -178px 0; }
body#products li#con a {}{ background-position: -262px -88px; left: 262px; }
body#products li#con a:hover {}{ background-position: -262px 0; }
/**//*support页面的样式表*/
body#support li#wel a {}{ background-position: 0 -88px; width: 94px; left: 0; }
body#support li#wel a:hover {}{ background-position: 0 -44px; }
body#support li#pro a {}{ background-position: -94px -110px; left: 94px; }
body#support li#pro a:hover {}{ background-position: -94px -44px; }
body#support li#sup a {}{ background-position: -178px -44px; left: 178px; }
body#support li#sup a:hover {}{ background-position: -178px -44px; }
body#support li#con a {}{ background-position: -262px -88px; left: 262px; }
body#support li#con a:hover {}{ background-position: -262px 0; }
/**//*contact页面的样式表*/
body#contact li#wel a {}{ background-position: 0 -88px; width: 94px; left: 0px; }
body#contact li#wel a:hover {}{ background-position: 0 -44px; }
body#contact li#pro a {}{ background-position: -94px -88px; left: 94px; }
body#contact li#pro a:hover {}{ background-position: -94px 0; }
body#contact li#sup a {}{ background-position: -178px -110px; left: 178px; }
body#contact li#sup a:hover {}{ background-position: -178px -66px; }
body#contact li#con a {}{ background-position: -262px -66px; left: 262px; }
body#contact li#con a:hover {}{ background-position: -262px -66px; }
html代码:
Code
<body id="welcome">
<div id="header">
<ul id="nav">
<li id="wel"><a href="welcome2.html">welcome</a></li>
<li id="pro"><a href="products2.html">products</a></li>
<li id="sup"><a href="support2.html">support</a></li>
<li id="con"><a href="contact2.html">contact</a></li>
</ul>
</div>
</body>
关键图片:
批注:
这是个非常有意思的导航,可以说是将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