网页制作,转变你的思维方式

“重构”的东风吹遍大江南北，互联网临时间土崩瓦解，“div+CSS”俨然已成为一种“时尚”，难以尽数的网站都不谋而合地开始了本身的“重构”。然而打开这形形色色网站的源代码，却时常令人哑然发笑——

我们看到有嵌套6、7层的div布局，有不消table的表格，有纯div+a构成的页面，有成百上千的体现层class……如今关于尺度的册本越来越多，除了少数几本标榜“高级本领”的册本以外，很少有人不会在本身著作的前几章夸大如许一句话——“布局与体现分散”。然而这些册本的读者们，又有几多人认认真真地读过前几章呢？照旧更多地直接跳过那些乏味的布局解说，一头扎到貌似高妙的布局本领与Hack中去？

实在div+CSS这个说法从一开始就误导了太多的人，急功近利的心态则更是造成这种征象的罪魁罪魁。一个风俗了table布局的网页制作打仗尺度的第一步，不该该是去盲目寻求实现种种布局的CSS本领，而是高兴转变本身的头脑方法。

下面将联合我的亲身领谈判一谈适应尺度的头脑方法，此中有不少是我曾经走过的弯路，盼望对方才打仗尺度的XDJM们有些资助：

1、“节流代码”是营销本领，不是宗旨

“利用div布局可以比table布局节流更多的代码”，我在很多册本和网站上见到过这句话。这句话本身是没错的，可以“节流代码”简直是网页尺度化所带来的利益之一。然而牢记，它只是“利益之一”，而不是“唯一利益”，更不是宗旨。“节流代码”更多的时间是我们用来说服那些至死不悟的老板的营销本领。网页尺度化的唯一宗旨是“布局与体现分散”，而绝不是为了节流代码而节流代码。我曾经过于网站边栏乃至主体内容的体现情势雷同而接纳了同一的class （至今另有一些书是如许教的），如许简直比分别定名id更节流代码，然而如许做的价钱是代码失去了精良的布局。失去精良布局的结果是：一、源代码没有了可读性；二、网站增加了未知的维护本钱。试想，当某一块内容由于必要而作出体现情势的变更，比方链接的颜色等等，我们就不得不去修改页面源文件，增加分外的class，事情量比起只必要调解id分组就大了很多。并且长此以往，布局将会越来越差，形成难以逆转的恶性循环。

另有一种环境，出如今id的定名方面，也是本人曾经犯过的错误。当时为了“节流代码”，而把主菜单定名为“mm”，二级菜单定名为“m2”，三级菜单为“m3”，结果严峻低落了网页的可读性，使其他同事很难接办，图省事却累了本身。同理，文件及文件夹定名方面也不宜过简，象《网站重构》里发起把图片都用“i”目次存放，小我私家以为并不行取，除非你能为这种高度缩写的目次布局撰写细致阐明并包管每个相干职员包罗其他制作职员、开辟、乃至懂行的老板……都能明白和实行，不然只会给你本身增加不必要的贫苦。

2、ID是偷袭枪，class是双刃剑

想要做好网页布局，id与class都是必须纯熟掌握的，所谓“两手抓，两手都要硬”。ID就象偷袭枪一样，可以资助我们精准地定位要想要加载样式的元素；而class则是侠客的佩剑，信手拈来越发轻巧灵巧，两者的联合可以大概实现布局精良且体现富厚的页面。然而如今有一种错误的看法，便是id完全可以用class来代替，究竟上很多网页源代码也简直云云，打开来通篇class，找不到一个id。造成这种征象的来由有很多种，然而自table期间传下来的根深蒂固的“class=CSS”的看法才是本因。简直，class比id用途更广更机动，但也必须意识到，class对付构建精良的网页布局远不如id有用。id的逼迫唯一性使得我们可以很容易通过id检索到我们必要的恣意模块，而class则没有这个上风。固然我们可以为模块界说唯一的class名，但条件是——只有制作者本人可以动网页样式。不然换一个轻微懒一些店员，看到样式雷同便直接把前面的class拿来套用，其结果便是我们发明网页里有十几个模块都叫做“gonggao”大概“xinwen”，以至于为了区分还不得不加上大量的html解释，如许的结果显然并不是我们想要的。再者便是前面提到的，通过通用class所节流下来的代码，又不得不在每个单独界说的class中浪费失。

ID是偷袭枪，class是双刃剑，合则两利，分则两败。

3、并不是全部的内容都必要div做“容器”

　　主菜单究竟是用