日期:2013-12-26  浏览次数:21567 次

网页制造aiyiweb文章简介:本文收集整理了60多个高级CSS技巧,不管你是CSS老手还是高手,置信这些技巧都能助你更进一步提高本人的CSS技能。

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: inlin