全面掌握CSS系列一：为设计元素添加样式效果（译文）
- 八月 24th, 2009
- Posted in html/css
- Write comment
Mastering CSS, Part 1: Styling Design Elements
原文地址：Mastering CSS, Part 1: Styling Design Elements
转载译文请注明出处，谢谢。如有错误欢迎指正。
CSS是现代web设计的重要组成部分，web标准要求设计师们使用CSS来格式化风格化页面，这样做有很好的理由：与table相比，CSS具有文件更小巧和灵活的特点。以下是一些最新的CSS技巧，它们不全是纯CSS，其中也应用了一些javascript和XHTML来扩展网站的可用性。
1、布局和用户界面技术：
CSS是现代网站网页布局所使用的最重要的语言，用它来创建网页布局和用户界面具有无限的可能性，而下面展示的将是一些更有趣的技巧：
*实现DIV水平和垂直居中的最简洁方法
The simplest way to horizontally and vertically center a DIV
这篇文章介绍的是使用CSS水平和垂直居中DIV的方法；前端开发者们通常会使用一个父DIV和一个子DIV来实现这个效果，而文中介绍的这个独特方法仅需要一个DIV且更简单。
*永远停留在最底部的页脚
这里的介绍的方法可以使你的页脚永远停留在页面的最底部，无论主要内容区域的高度有多小；它完全跨浏览器兼容，且不需要任何额外的标签。
*使用Jquery和CSS轻松实现翻页广告
Simple Page Peel Effect with jQuery & CSS
这个教程教你用Jquery和CSS来实现一个翻页效果；目前大多数站点都还是使用flash来实现这种效果的。
*CSS实现盒元素等高
用CSS来实现元素等高，效果如同在table单元格内而有少了table的烦琐特性，唯一的遗憾是它只支持现代浏览器，如Mozilla, Opera, Safari, Firefox, OmniWeb, Camino等，而不支持“某些浏览器”（Too bad it doesn’t work in you-know-which-browser. -_- |||），哈哈。要支持“某些浏览器”，译者一般使用Jquery的等高脚本。
*可切换的浏览效果
Adaptable view – how do they do it?
让用户可以手动改变网站的外观能够增进网站的可用性，改善用户体验；这个技术教会你如何实现可切换的浏览效果。
*可等比缩放的盒子模型
一般情况下宽度特定block元素会随着内容的增多而在垂直方向上不断扩展，比如当用户改变浏览器字体大小时。而该教程教你实现一个可在水平和垂直方向上同时扩展的盒模型。
*实现跨栏等高的四个方法
Four Methods to Create Equal Height Columns
有纯CSS方法也有javascript方法，说不上完美，但提供了宝贵的思路，其中一些是能够支持到IE6这样的低端浏览器的。
*CSS实现垂直居中
此文对比了5种实现垂直居中的方式，同时还提供了一个垂直居中的小型站点作为例子。在这里可以看到实现垂直居中较完善的思路。
*跨浏览器实现inline-block
display:inline-block ，将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。
简单点说，该文就是要解决下图发生的情况（当然inline-block还有其他的作用，比如这里，这里和那里），非常有用的教程：
*頓悟CSS
无语。类似一篇学习CSS的感言。
*深入理解CSS层叠概念：关于z-index,相对定位（position:relative）和绝对定位（position:absolute）
An Indepth Coverage On CSS Layers, Z-Index, Relative And Absolute Positioning
*CSS的overflow属性详解
The CSS Overflow Property 这一篇国内已有译文，地址在这里
*Absolute,Relative,Fixed定位方式之间的区别
Absolute, Relative, Fixed Positioning: How Do They Differ?
*详解display：inline-block
该文介绍了实现display:inline-block跨浏览器兼容的若干方法。
2、导航栏和菜单技术：
导航对于任何网站来说都是非常重要的环节。一个好的导航条应做到既对用户友好又能够与页面的其他设计元素完美结合。下面介绍的就是一些符合以上两个要求的导航条创建技巧。
*纯CSS实现下拉菜单
Create dropdown menus with CSS only
*基于CSS的推进式面包屑导航
Simple scalable CSS based breadcrumbs
在网站使用面包屑导航为用户的访问带来便利，该文介绍的是用CSS实现的推进式面包屑导航技术。
*CSS和Jquery实现的水平式子菜单
Horizontal Sub-nav with CSS & jQuery
这是一个用纯CSS实现水平式子菜单的完整教程，如果你希望它能够兼容IE6，那么需要用到一些Jquery。
*非常有用的CSS递进菜单
*标签式面包屑导航
The Tabbed Breadcrumb Navigation
一个创建标签式面包屑导航的详细教程。
*仅用CSS实现apple网站的导航条
Apple’s Navigation bar using only CSS
*网站地图导航
Sitemap Celebration
这是一个由树型菜单组成的网站地图，跨浏览器兼容（甚至支持IE5/Mac）。
*附带博客feed图标的CSS菜单
Nice CSS menu with feed reader icons list
*超推荐的下拉菜单大集合！基于CSS和Jquery
Multi-level Menus with jQuery and CSS
此文介绍了几十款下拉菜单，非常实用噢。
2、图像样式和画廊：
图像的样式在网页设计中经常容易被忽略，下文介绍的技术和技巧将帮助你弥补这方面的空白。
*用CSS处理图像居中
*用CSS和Javascript为博客图像添加时髦边框
Add a Custom “Trendy” Border Around Blog Images With CSS & JavaScript
*为图像添加漂亮的唱片封套
这是一个很赞的教程，通过对图像画廊做样式的美化，使它们看起来象是一个个唱片专辑。
*用CSS为图片或地图上的锚记链接添加对话气泡
Create CSS pin balloons with ease
*带描述的图像轮换（基于CSS和Jquery）
*5个流行的对话泡泡
*仿Threadless图像库样式
How to Make a Threadless Style T-Shirt Gallery
一个蛮好玩的图片库效果，比较适合电子商务网站，demo在这里。
*图片替换技术
CSS image replacement for… images? It makes sense for print. (Ask the CSS Guy)
一些黑白配色的网站打印出来后，logo效果会变得不可见或很差，此文作者用一种图片替换技术来解决这个问题。
*漂亮的CSS阴影效果（原文是德文，汗）
Beautiful new CSS: box-shadow (in German)
附录：全面掌握CSS系列二：高级技巧及工具 http://www.smashingmagazine.com/2009/08/10/mastering-css-advanced-techniques-and-tools/
No comments yet.