|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
使页面的字体变得更漂亮,更容易编排,使页面真正赏心悦目。
网页制造poluoluo文章简介:庞大的网页计划必要大批分歧的标签布局代码,我们把它叫做“div-soup”综合症。
已经,计划师们常常会跟频仍利用基于table的没有任何语义的结构。不外终极仍是要感激像JeffreyZeldman和EricMeyer如许的头脑刷新者,伶俐的计划师们渐渐的承受了绝对更语义化的<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
<divid="news">
<divclass="section">
<divclass="article">
<divclass="header">
<h1>DivSoupDemonstration</h1>
<p>PostedonJuly11th,2009</p>
</div>
<divclass="content">
<p>Loremipsumtextblahblahblah.</p>
<p>Loremipsumtextblahblahblah.</p>
<p>Loremipsumtextblahblahblah.</p>
</div>
<divclass="footer">
<p>Tags:HMTL,code,demo</p>
</div>
</div>
<divclass="aside">
<divclass="header">
<h1>TangentialInformation</h1>
</div>
<divclass="content">
<p>Loremipsumtextblahblahblah.</p>
<p>Loremipsumtextblahblahblah.</p>
<p>Loremipsumtextblahblahblah.</p>
</div>
<divclass="footer">
<p>Tags:HMTL,code,demo</p>
</div>
</div>
</div>
</div> 只管这有些委曲,但下面这个实例仍是能够申明利用HTML4对一个庞大的计划举行代码化后仍然过于痴肥(实在xHTML1.1也不外云云)。不外值得冲动的是,HTML5办理“<div>-soup”综合症并带给我们一套新的布局化元素。这些新的HTML5元素富有更仔细的语义从而取代了那些毫无语义的<div>标签,并同时为CSS的挪用供应了”天然”的CSS钩子。上面是HTML5的办理计划实例:
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
<section>
<section>
<article>
<header>
<h1>DivSoupDemonstration</h1>
<p>PostedonJuly11th,2009</p>
</header>
<section>
<p>Loremipsumtextblahblahblah.</p>
<p>Loremipsumtextblahblahblah.</p>
<p>Loremipsumtextblahblahblah.</p>
</section>
<footer>
<p>Tags:HMTL,code,demo</p>
</footer>
</article>
<aside>
<header>
<h1>TangentialInformation</h1>
</header>
<section>
<p>Loremipsumtextblahblahblah.</p>
<p>Loremipsumtextblahblahblah.</p>
<p>Loremipsumtextblahblahblah.</p>
</section>
<footer>
<p>Tags:HMTL,code,demo</p>
</footer>
</aside>
</section>
</section> 正如我们所见,HTML5可让我们用良多更语义化的布局化代码标签取代那些大批的偶然义的<div>标签。这类语义化的特征不但提拔了我们网页的质量和语义,而且大批削减了已经代码顶用于CSS必需挪用的class和id属性。现实上,CSS3也是能够然经由过程我们疏忽失落一切class和id的。
缩短改版时间。只要简单的修改几个CSS文件就可以重新设计一个有成百上千页面的站点。 |
|