CS的S 是造型设计元素.doc

CSS 是现代网页设计的重要基石。Web 标准要求使用 CSS 来格式化和造型网页。其轻量级的特性，大大超越以往诸如表格之类的布局方法。CSS 并没有想象中的难以捉摸。以下是一些利用 CSS 创建造型设计元素的技巧和技术，也包括一些结合 JavaScript 或 XHTML 以扩展网站功能的案例，适合作为学习 CSS 的基本指南。当然对于经验丰富的设计师，同样值得阅读。1. 布局和用户界面技术当前 CSS 主要应用于创建页面布局。利用 CSS 创造页面布局和用户界面，有几乎无限的可能性。下面是一些更有趣的技术。The simplest way to horizontally and vertically center a DIV本文介绍用 CSS 方法使 DIV 纵向或横向居中。虽然有很多通过父 DIV 和子 DIV 实现居中的代码，但这个特殊方法仅使用一个 DIV 元素，并且简单得多。New CSS Sticky Footer - 2009一个棘手的完全跨浏览器兼容的页脚技术，兼容 Google Chrome 浏览器，并且不需要空 DIV 辅助。Simple Page Peel Effect with jQuery CSS此教程结合 jQuery 和 CSS 创建网页剥离效果。大多数网站都使用 Flash 来实现这种效果。因此如果不热衷于 Flash 技术，这会是一个不错的选择。Equal height boxes with CSS一个使用 CSS 创建等高栏式布局的基本实例，彻底抛弃表格布局的代码冗杂与混乱。Adaptable view - how do they do it?让用户手动改变网站的表现，似乎可以大大提高网站的易用性和用户粘度。本教程将介绍如何为网站实施和部署浏览器适应技术。CSS: The All-Expandable Box一个创建自适应 CSS 容器的教程。容器会自动向各个方向扩大，以适应所包含的内容，而不只是垂直增长。适用于用户可控字号导致使 CSS 容器撑开的情况。Four Methods to Create Equal Height Columns一个使用 CSS 创建等高列的教程，共涉及四个不同的技术。兼容所有主流浏览器（甚至 IE6 浏览器）。Vertical Centering With CSS这篇文章包括各种使 CSS 元素垂直居中于网页的最佳技术。同时也介绍了如何利用这些技术，创建一个简单小巧的垂直居中的站点。CSS vertical center using float and clear使用浮动 (float) 和清除 (clear) 创建垂直居中的 CSS 容器，甚至兼容 IE5 版本。Cross-Browser Inline-Block本教程涵盖在多重内容情况下，创建一个内联块 (inline-block) 布局的方法，而不打破布局的完整性。The CSS “Ah-ha!” Moment谈论大多数设计师，在其职业生涯的某个时候发出 Ah-Ha! 感叹的时刻。以及一些重要的关于 CSS 容器布局的灵感突现。An Indepth Coverage On CSS Layers, Z-Index, Relative And Absolute Positioning本文给出了关于 CSS 层，相对和绝对定位。以及 Z-Index 属性的全面概述。The CSS Overflow Property详解了 CSS 溢出属性的工作流程。包括可见 (visible)，隐藏 (hidden)，滚动 (scroll)，自动 (auto)，以实例说明逐一说明。Absolute, Relative, Fixed Positioning: How Do They Differ?分析容易混淆的绝对 (absolute)，相对 (relative)，固定位置 (fixed) 之间的差异性，详细说明各个属性的区别。display: inline-block介绍在不同的样式中创建内联块 (inline-block) 的方法，并兼容不同的浏览器环境。2. 导航和菜单技术良好的导航是网站中非常重要的一部分。良好的导航既方便用户使用，也补充和完整了网站的其他设计元素。以下是一些关于创建导航的技巧和提示，使其两者兼备。Create dropdown menus with CSS only一份创建 CSS 下拉菜单的完整教程，该方法快速而且易于实施。Simple scalable CSS based breadcrumbs在网站上使用面包屑导航，可以方便访问者浏览。本教程介绍了一种创建基于 CSS 的，