·HTML5和CSS3让网页设计提升到下一……　　 ·IBM将未来交给软件　　 ·6千阿里巴巴员工搬家滨江　　 ·淘宝08-09年最失败的策略反思　　 ·ASP实例教程:长文章分页功能　　 ·流量下降与网站架构问题　　 ·网站收录减少和排名退步的原因　　 ·企业建设网站是否划算？　　 ·企业为什么需要建设网站？　　 ·再谈什么是长尾关键　 ·四个也许网上从来没有人提到过的SEO问题　 ·陈一舟：互联网营销中市场越大越好　 ·58同城网CEO：分类信息网广告还能增1 ·唐骏82万入股鼎衡出任独董遭质疑　 ·郁闷昊：我不是最牛网络乞丐　 ·江南春新婚待分众新局　 ·朱威廉：网游新创业公司存活率只有10%　 ·王怀南：从“谷歌之父”到“育儿专家”　 ·今日资本总裁徐新：我是如何打造福布斯首富　 ·李彦宏：危机中要放弃幻想、创新求变　 ·八界网副总黄渊：将会通过并购进行中西部扩

咨询热线：020-61218472

专注于网站建设、网站优化、短信群发

手机：13512754850 　QQ:408170550　加入收藏

首页　关于我们　网站建设　网站推广　建站流程　建站意向　虚拟主机　域名查询　成功案例　手机网站　短信群发　联系我们　专题　

新闻资讯

公司动态

建站知识

行业资讯

建站套餐

咨询电话：13512754850

咨询QQ：294070330 408170550

您的位置：首页 -> 建站知识

　　　建站知识

HTML5和CSS3让网页设计提升到下一个高度
发布日期：2009-8-13 点击次数：3

Web设计师可以使用HTML4和CSS2.1完成一些很酷的东西。我们可以在不使用陈旧的基于table布局的基础上完成文档逻辑结构并创建内容丰富的网站。我们可以在不使用内联和
标签的基础上对网站添加漂亮而细腻的风格样式。事实上，我们目前的设计能力已经让我们远离了那个可怕的浏览器战争时代、专有协议和那些充满闪动、滚动和闪烁的丑陋网页。
虽然我们现在已经普遍使用了HTML4和CSS2.1，但是我们还可以做得更好！我们可以重组我们代码的结构并能让我们的页面代码更富有语义化特性。我们可以缩减带给页面美丽外观样式代码量并让他们有更高的可扩展性。现在，HTML5和CSS3正跃跃欲试的等待大家，下面让我们来看看他们是否真的能让我们的设计提升到下一个高度吧…

跟

说再见,欢迎语义化标签
曾经，设计师们经常会跟频繁使用基于table的没有任何语义的布局。不过最终还是要感谢像Jeffrey Zeldman和Eric Meyer这样的思想革新者，聪明的设计师们慢慢的接受了相对更语义化的

布局替代了table布局，并且开始调用外部样式表。但不幸的是，复杂的网页设计需要大量不同的标签结构代码，我们把它叫做“

-soup” 综合症。也许你很熟悉下面的代码:

Lorem ipsum text blah blah blah.

尽管这有些勉强，但上面这个实例还是可以说明使用HTML4对一个复杂的设计进行代码化后依然过于臃肿(其实xHTML1.1也不过如此)。不过值得激动的是，HTML5解决“

-soup” 综合症并带给我们一套新的结构化元素。这些新的HTML5元素富有更细致的语义从而代替了那些毫无语义的

标签，并同时为CSS的调用提供了”自然”的CSS钩子。下面是HTML5的解决方案实例:

Div Soup Demonstration

Posted on July 11th, 2009

Lorem ipsum text blah blah blah.

正如我们所见，HTML5可以让我们用很多更语义化的结构化代码标签代替那些大量的无意义的

标签。这种语义化的特性不仅提升了我们网页的质量和语义，并且大量减少了曾经代码中用于CSS必须调用的class和id属性。事实上，CSS3也是可以然通过我们忽略掉所有 class和id的。

跟class属性说再
正如我们所见，HTML5可以让我们用很多更语义化的结构化代码标签代替那些大量的无意义的

标签。这种语义化的特性不仅提升了我们网页的质量和语义，并且大量减少了曾经代码中用于CSS必须调用的class和id属性。事实上，CSS3也是可以然通过我们忽略掉所有 class和id的。跟class属性说再
见，欢迎整洁的标签
结合了富有新的语义化标记的HTML5，CSS3为web设计师们的网页提供了神一般的力量。有了HTML5的能量，我们将得到更多的对文档代码的控制权，有了CSS3的能量，我们的控制权将趋于无穷大！

即使没有那些高级的CSS选择器，我们仍然可以通过强大的HTML5条调用不同的容器而不劳驾class和id这类属性。像以往的DIV布局，我们在css中可能要这样调用:

1
2
3
4
5
6
7
div#news {}
div.section {}
div.article {}
div.header {}
div.content {}
div.footer {}
div.aside {}

我们再来看看基于HTML5的实例:

1
2
3
4
5
section {}
article {}
header {}
footer {}
aside {}

这是个进步，但仍有一些问题需要解决。在

实例中，我们需要通过class或id属性来调用页面中的元素。这种逻辑将允许我们将样式应用到文档中的任何一个元素上，无论是整体还是个体。例如在

实例中，.section 和 .content元素很容易定位。但是在HTML5实例中，实际文档中会有很多个section元素。其实我们可以添加一些特定的属性选择器来调用那些不同的section元素，不过谢天谢地，我没现在可以用少量的高级CSS选择器来定位不同的section元素。

不使用class和id定位HTML-5元素
下面让我们来看看如何在不使用class和id的情况下定位HTML5页面元素的一个实例，我们可以使用三种CSS选择器来定位和辨别实例中的元素。如下:

后代选择器:[CSS 2.1]: E F
兄弟选择器:[CSS 2.1]: E + F
子元素选择器:[CSS 2.1]: E > F
下面让我们来看看如何不使用class和id而完成对文档中的那些section元素的定位吧:

定位最外层的

元素

考虑到我们的例子并不是一套完整的HTML5代码，所以我们假定在元素下有个

元素与

元素是兄弟元素。这样的话，我们就可以向下面代码那样定位最外层的

了:

1
body nav+section {}

定位下一个

元素
作为最外层

元素下的唯一直属子集元素，这个

元素也许可以这样定位:

1
section>section {}

定位

元素
可以定位

元素的方法有很多，不过最简单的方法当然就是后代选择器了:

1
section section article {}

定位

、

和

[顶部] [返回]

友情链接

速兴科技虚拟主机智能建站网站建设网站优化海南网站建设网站制作海南网站制作广州建网站短信群发软件开发海南网络公司广州网络公司网站推广建网站北京做网站

关于我们｜手机网站建设｜短信群发｜付款方式｜人才招聘｜在线留言｜网站地图｜联系我们

	客服1
	客服2