web标准解决方案

web标准解决方案

篇一：web标准

我总是对每一个想学CSS的朋友说: “学CSS真的很简单，一个星期就搞定。”但真的这么简单吗？魔方也很简单，拿到手里就知道怎么玩了，但最高境界却不是几天或几个月就能修成的，甚至根本就不可能达到，永远需要提高，看似痛苦，同时也享受升华的乐趣，CSS也一样，痛并快乐指的就是这些东西吧。

本文里面收集一些有关CSS的技巧、教程、工具和观点等，其中一些你也许早就运用的炉火纯青，也可能有的你听都没听说过。不管是新手还是高手，大家都继续学习吧。一，Web 标准

要玩游戏，就得先了解规则。要学CSS，就应该先了解一下Web标准。尽管看上去不是必须的。应该说，你是否学Web标准，跟你是否能学会CSS没有什么关系，但跟你能写出什么样的CSS，以及Xhtml或其它代码，跟你能做出什么质量的网页有很大的关系。

其实我自己对Web标准也不甚了解，尽管我看过不少关于Web标准的文章和书。，所以每次谈到Web标准，我头里就会有一堆问号:

Web标准真的有利于吗？ Web标准的动机难道就是SEO

出于SEO动机的Web标准是否会失去一些Web标准真正的本质

如何才算符合Web标准仅仅是通过W3C的代码验证，你就觉得自己符合Web标准了

?

Web标准是为了提升用户体验，而一个对用户友好的网站其代码应该写得非常简洁实用，而一个使用简洁实用代码的网站是有利于SEO的。这个逻辑似乎合情合理，但在实际运用中却又总有这样那样的冲突

我们应该把Web标准看成一份”道德约束”还是”法律强制”呢

我个人比较乐意看成前者，努力靠拢就好了，但没必要为了标准而标准，自己为难自己。

你已经花了50%的时间完成了一个项目的90%，如果余下的10%又需要你花50%的时间去弄，是否值得尤其是这种情况发生在: 你的90%已可以让用户在各个浏览器下正可常浏览，而那10%仅仅是为了通过W3C代码验证。这时候你或许该考虑下，你千辛万苦的通过W3C验证是为了符合Web 标准还是为了满足自己小小的虚荣心

特喜欢跟别人争论”DIV+CSS”的说法是错误的，应该是”XHTML+CSS”，你有没有做过类似这样的事儿还打心里为自己科学家般严谨的态度而感到自豪。但事实上，叫”

DIV+CSS”的人，没有哪个傻到整个页面的元素都使用DIV。这就像当你说”吃饭”时，你也不光是吃白花花的大米。

呃，本来只是想随便写点文章引语，闲扯太多了，还是看看下面这些有关Web标准的东西吧，有助于你了解这个东西。

一些有Web标准的文章

什么是Web标准?对Web标准的理解 | CSS森林 ) |Web 标准和网站重构 Web标准要求一览表。

验证HTML，CSS及RSS源的14个免费工具

这篇译文里介绍了14个工具可以方便的验证你的CSS 以及HTML和RSS源。你别看我上面说了一堆看似反验证的话，其实我也挺在乎这个东西的，我也每次都玩验证，只是当碰到很难解决无关痛痒的东西时，我不会为难自己。我只是想告诉你，别对自己太苛求了，别让自己太累。

二， CSS布局和定位

我不是什么Web前端观察家，我个人发现的两个可能并不正确的网页布局趋势是: 两栏和水平条。

说两栏是趋势似乎有点唬烂，两栏本身就是最基本最常用的布局，但之所以成为更加流行的网页设计趋势得益于Web 的流行，你很少会看到一个Web 网站把自己做成门户般的杂志型布局，大家都力求简洁。当然，在国内，还是有很大一部份个人站长和企业喜欢把自己的网站挤得密密麻

麻，Magazine的非常厉害。这恐怕也不能说谁前卫谁落后，好的Magazine布局确实能让人产生一个感觉或错觉: 这个网站很专业，做的很大，很优。我个人是希望简洁两栏真的能成为趋势，每次进入门户型布局的非门户级网站时，就感觉自己掉进了一堆链接的海洋里。

水平条成为趋势则源于宽屏浏览器的普及，它能让你的网页不管在各种宽屏分辨率下显得协调美观。比如帕兰映像的网页主体是960像素固定宽度，我的电脑分辨率是1440*990像素，如果没有水平条，总感觉网页太空，尽管留白也是一种设计技巧，但并不是这样的留白。尽管还有另一种解决方案是自适应宽度，但我个人觉得，对于大多数网站来说，自适应宽度并不是一个好方法，它解决了宽度的问题，却又让网页产生了很大其它破坏视觉的问题。

还是让我们看一些关于CSS布局的技巧吧。

15款网格布局生成器

网格布局的页面能给人简洁明快、层次分明的感觉。之前帕兰映像里面也介绍过一些网格布局相关的文章: 探索极简派设计/Minimalist Design，32个网格布局的网页设计欣赏和960网格系统等。如果你也想制作一个网格布局，可以看看这些在线生成器。 9个永不过时的CSS 3栏布局技巧我喜欢3栏布局的网页设计，尽管时下正火的似乎很少采用3栏布局。但没关系，我们是非非非主流。但是3栏

布局相对来说就比较复杂，有些难以控制，Noupe发表一篇文章，收集了9个号称永不过时的三栏布局设计技巧。

五种方法让CSS实现垂直居中

使用 CSS 实现垂直居中并不容易。有些方法在一些浏览器中无效。本文里介绍了使对象垂直集中的5种不同方法，以及它们各自的优缺点。

CSS布局口诀

网络上有朋友把CSS BUG编成了顺口溜了！是否有效不好说，但至少是蛮有趣的。使用CSS创建三列固定布局结构

讲解如何通过设计一个HTML/CSS的基本结构，来创造一个简单且常用的三列式固定页面布局。

使用CSS完美实现垂直居中的方法

使用XHTML+CSS来实现元素的垂直居中一直是前端开发中的一个比较复杂且棘手的问题，作为网页设计师或前端开发工程师，这个垂直居中问题也是必须掌握的技巧之一，一些互联网公司面试题中也会出现这类题目。本文分享一个由aka Yuh?发明完美通过CSS实现垂直居中的方法。渐进增强式布局探讨（上）、（下）

经典得一塌糊涂的表格布局，在渐进增强面前落花流水——表格布局要求书写HTML代码时，首先考虑布局，而不是内容。不啰嗦，直接枪毙。