|
|
马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
您需要 登录 才可以下载或查看，没有帐号？立即注册
x
在Div+CSS标准化的影响下，网页设计人员已经把这一要求作为行业标准。那么什么是Div+CSS标准？Div+CSS的标准化设计到底有什么好处？
网页制造poluoluo文章简介：即便没有那些初级的CSS选择器，我们仍旧能够经由过程壮大的HTML5条挪用分歧的容器而不光驾class和id这类属性.
分离了富有新的语义化标志的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{} 这是个前进，但仍有一些成绩必要办理。在<div>实例中，我们必要经由过程class或id属性来挪用页面中的元素。这类逻辑将同意我们将款式使用到文档中的任何一个元素上，不管是全体仍是个别。比方在<div>实例中，.section和.content元素很简单定位。可是在HTML5实例中，实践文档中会有良多个section元素。实在我们能够增加一些特定的属性选择器来挪用那些分歧的section元素，不外谢天谢地，我没如今能够用大批的初级CSS选择器来定位分歧的section元素。
上面让我们来看看怎样在不利用class和id的情形下定位HTML5页面元素的一个实例，我们可使用三种CSS选择器来定位和分辨实例中的元素。以下:
- 儿女选择器:[CSS2.1]:EF
- 兄弟选择器:[CSS2.1]:E+F
- 子元素选择器:[CSS2.1]:E>F
上面让我们来看看怎样不利用class和id而完成对文档中的那些section元素的定位吧:
定位最外层的<section>元素
思索到我们的例子并非一套完全的HTML5代码，以是我们假定在<body>元素下有个<nav>元素与<section>元素是兄弟元素。如许的话，我们就能够向上面代码那样定位最外层的<section>了:
1
bodynav+section{}定位下一个<section>元素
作为最外层<section>元素下的独一直属子集元素，这个<section>元素大概能够如许定位:
1
section>section{}定位<article>元素
能够定位<article>元素的办法有良多，不外最复杂的办法固然就是儿女选择器了:
1
sectionsectionarticle{}定位<header>、<section>和<footer>元素
这三个元素分离在两个中央都呈现过，一是在<article>元素中呈现，另外一是在<aside>元素中呈现。这类不同能让我们轻松定位每一个元素。
1
2
3
articleheader{}
articlesection{}
articlefooter{}大概一同界说:
1
2
3
sectionsectionheader{}
sectionsectionsection{}
sectionsectionfooter{} 到今朝为止，我们已利用CSS2.1选择器扫除失落了一切的class和id。那末我们为何还必要利用CSS3呢？我很乐意你能这么问…
这工具比表格好的唯一就是你可以定义一个ID，想怎么玩它就怎么玩他，表格用来处理显示数据，DIV+css+TABLE就行了，都什么年代了，以前没有DIV，而且386的年代不也一样，现在都奔腾4了 |
|
|Archiver|手机版|仓酷云
鄂ICP备14007578号-2
发表于 2015-1-15 23:37:26
收藏
转播
分享
淘帖
顶
踩
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
照妖镜
窥视卡
雷达卡
发表于 2015-1-17 23:36:34
楼主