CSS教程:语义化标记抛弃DIV标记

2024-07-11 08:22:25

字体：大中小

来源：转载

供稿：网友

　曾经，设计师们经常会跟频繁使用基于table的没有任何语义的布局。不过最终还是要感谢像jeffrey zeldman和eric meyer这样的思想革新者，聪明的设计师们慢慢的接受了相对更语义化的<div>布局替代了table布局，并且开始调用外部样式表。但不幸的是，复杂的网页设计需要大量不同的标签结构代码，我们把它叫做“<div>-soup” 综合症。也许你很熟悉下面的代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<div id="news">
<div class="section">
<div class="article">
<div class="header">
<h1>div soup demonstration</h1>
<p>posted on july 11th, 2009</p>
</div>
<div class="content">
<p>lorem ipsum text blah blah blah.</p>
<p>lorem ipsum text blah blah blah.</p>
<p>lorem ipsum text blah blah blah.</p>
</div>
<div class="footer">
<p>tags: hmtl, code, demo</p>
</div>
</div>
<div class="aside">
<div class="header">
<h1>tangential information</h1>
</div>
<div class="content">
<p>lorem ipsum text blah blah blah.</p>
<p>lorem ipsum text blah blah blah.</p>
<p>lorem ipsum text blah blah blah.</p>
</div>
<div class="footer">
<p>tags: hmtl, code, demo</p>
</div>
</div>
</div>
</div>

上一篇：CSS基础教程:CSS样式表与具体设备

下一篇：不再使用class和id进行网页布局