HTML5+CSS3应用实例分析
这篇文章主要介绍“HTML5+CSS3应用实例分析”,在日常操作中,相信很多人在HTML5+CSS3应用实例分析问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”HTML5+CSS3应用实例分析”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
我们提供的服务有:网站建设、做网站、微信公众号开发、网站优化、网站认证、惠安ssl等。为近千家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务,是有科学管理、有技术的惠安网站制作公司
曾经,设计师们经常会跟频繁使用基于table的没有任何语义的布局。不过最终还是要感谢像Jeffrey Zeldman和Eric Meyer这样的思想革新者,聪明的设计师们慢慢的接受了相对更语义化的
复制代码
代码如下:
Div Soup Demonstration
Posted on July 11th, 2009
Lorem ipsum text blah blah blah.
Lorem ipsum text blah blah blah.
Lorem ipsum text blah blah blah.
Tangential Information
Lorem ipsum text blah blah blah.
Lorem ipsum text blah blah blah.
Lorem ipsum text blah blah blah.
尽管这有些勉强,但上面这个实例还是可以说明使用HTML4对一个复杂的设计进行代码化后依然过于臃肿(其实xHTML1.1也不过如此)。不过值得激动的是,HTML5解决“
下面是 HTML5的解决方案实例:
复制代码
代码如下:
Div Soup Demonstration
Posted on July 11th, 2009
Lorem ipsum text blah blah blah.
Lorem ipsum text blah blah blah.
Lorem ipsum text blah blah blah.
Tags: HMTL, code, demo
Tangential Information
Lorem ipsum text blah blah blah.
Lorem ipsum text blah blah blah.
Lorem ipsum text blah blah blah.
Tags: HMTL, code, demo
正如我们所见,HTML5可以让我们用很多更语义化的结构化代码标签代替那些大量的无意义的
跟class属性说再见,欢迎整洁的标签
结合了富有新的语义化标记的HTML5,CSS3为web设计师们的网页提供了神一般的力量。有了HTML5的能量,我们将得到更多的对文档代码的控制权,有了CSS3的能量,我们的控制权将趋于无穷大!
即使没有那些高级的CSS选择器,我们仍然可以通过强大的HTML5条调用不同的容器而不劳驾class和id这类属性。像以往的DIV布局,我们在css中可能要这样调用: div#news {}
复制代码
代码如下:
div.section {}
div.article {}
div.header {}
div.content {}
div.footer {}
div.aside {}
我们再来看看基于HTML5的实例: section {}
复制代码
代码如下:
article {}
header {}
footer {}
aside {}
这是个进步,但仍有一些问题需要解决。在
不使用class和id定位HTML-5元素
下面让我们来看看如何在不使用class和id的情况下定位HTML5页面元素的一个实例,我们可以使用三种CSS选择器来定位和辨别实例中的元素。如下:
后代选择器:[CSS 2.1]: EF
兄弟选择器:[CSS 2.1]: E + F
子元素选择器:[CSS 2.1]: E > F
下面让我们来看看如何不使用class和id而完成对文档中的那些section元素的定位吧:
定位最外层的
考虑到我们的例子并不是一套完整的HTML5代码,所以我们假定在
元素下有个