来看看：不再利用class和id举行网页结构

只看该作者 · 发表于 2015-1-15 23:37:26

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

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了

仓酷云 · 发表于 2015-1-17 23:36:34

帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。

只看该作者 · 发表于 2015-1-25 19:48:18

Dreamweaver在所见即所得添加链接，也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈，用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。

只看该作者 · 发表于 2015-2-3 21:11:06

还是在Dreamweaver所见即所得添加链接是，可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。

只看该作者 · 发表于 2015-2-9 07:04:43

Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。

只看该作者 · 发表于 2015-2-27 04:49:35

Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。

只看该作者 · 发表于 2015-3-8 22:48:17

dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS，三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。

只看该作者 · 发表于 2015-3-16 19:51:23

足见市场的反响和MACROMEDIA公司对它们的自信。说到Dreamweaver8我们应该了解一下网页编辑器的发展过程，随着互联网(Internet) 的家喻户晓。

只看该作者 · 发表于 2015-3-23 06:41:39

在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。

		自动登录	找回密码
密码			立即注册

[DIV+CSS] 来看看：不再利用class和id举行网页结构

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子