仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 861|回复: 7

[DIV+CSS] 来讲讲:HTML5教程:怎样利用details元素和summary元素

[复制链接]
不帅 该用户已被删除
发表于 2015-1-15 23:14:23 | 显示全部楼层 |阅读模式

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

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

x
Table中布局中,垃圾代码会很多,一些修饰的样式及布局的代码混合一起,很不利于直观。而Div更能体现样式和结构相分离,结构的重构性强。
网页制造Webjx文章简介:details和summary元素.
曾多少时,我们创立能够显现/埋没一些内容的小组件时,我们不能不利用Javascript.偶然候你大概不能不为这个小功效,下载一个完全的JS库才干到达这个功效效果.为上面的时候喝彩吧!HTML5供应了创立这类拖拽特性的办法,我们仅仅必要复杂的几行html代码就可以取得这类效果(从今朝而言,这类效果还依附于利用的扫瞄器,固然,在不久的未来,这大概不是成绩).上面让我们一同来看看<detail>元素.
上面就是标准中的形貌
Thedetailselementrepresentsadisclosurewidgetfromwhichtheusercanobtainadditionalinformationorcontrols.
—WHATWGHTML5specification
实际上我们能够用它创立那种折叠的小组件,用户能够有翻开和封闭的交互.在<details>我们能够放进我们任何想放进的内容.
扫瞄器的撑持情形

在我们入手下手之前,实践一点,让我们看看今朝扫瞄器的撑持情形,今朝只要chrome撑持<details>元素.Opera很快就会撑持Operawillsupportitsoon,让我们来用chrome演示这类效果吧.
<details的利用办法

这里有两个相干的元素:<details>和可选的
让我们来看上面的代码:
1234<details><summary>Show/Hideme</summary><p>Pellentesquehabitantmorbitristiquesenectusetnetusetmalesuadafamesacturpisegestas.</p></details>你能够经由过程上面的链接观察效果seethisinactionoveratjsbin.这是一个复杂的例子可是能够将效果完善展示的代码,没有任何Javascript.
OPen属性

在下面的例子中,在页面加载的时分内容是埋没的。我们能够将<detail>默许的视觉属性经由过程布尔值作修正,让其当我们加载页面的时分是睁开的:
1234<detailsopen><summary>Show/Hideme</summary><p>Pellentesquehabitantmorbitristiquesenectusetnetusetmalesuadafamesacturpisegestas.</p></details>注重,这里并没有closed属性,由于只需你移除open属性,实行的就是closed属性效果。
<summary>元素
我们已扼要的看了
的感化。由于它是短语内容,我们可使用内联(inline)标签<span;>。我们为何会有这类设法呢?大概如许子能更便利的经由过程而外款式把持显现效果大概像spec倡议的那样:为一个表单位素增添一个<label>标签。假如他能失效的话,最少能让我很随手:
1234<details><summary><labelfor="name">Name:</label></summary><inputtype="text"id="name"name="name"/></details>常理看,我们点击summary的任何地位都应当睁开<detail>元素的内容。可是在这个例子中,我们点击<summary>并没有睁开内容,由于你点击的是<label>他会将核心放到<input>标签-即便那部份内容被埋没在<details>标签。
很分明,在这点必要更好的声明,你以为这个中央应当产生甚么事变呢?大概某个扫瞄器临盆商能看一下这个效果。
<details>元素多层嵌套

你能够在<details>中嵌套<details>,能够完善的案例检察这个效果:
12345678910111213<details><summary>Question1</summary><p><strong>Pellentesquehabitantmorbitristique</strong>senectusetnetusetmalesuadafamesacturpisegestas.Vestibulumtortorquam,feugiatvitae,ultricieseget,temporsitamet,ante.Doneceuliberositametquamegestassemper.<em>Aeneanultriciesmivitaeest.</em>Maurisplacerateleifendleo.Quisquesitametestetsapienullamcorperpharetra.Vestibulumeratwisi,condimentumsed,<code>commodovitae</code>,ornaresitamet,wisi.Aeneanfermentum,elitegettinciduntcondimentum,erosipsumrutrumorci,sagittistempuslacusenimacdui.<ahref="#">Donecnonenim</a>inturpispulvinarfacilisis.Utfelis.</p><details><summary>Relateddocuments</summary><ul><li><ahref="#">Loremipsumdolorsitamet,consectetueradipiscingelit.</a></li><li><ahref="#">Aliquamtinciduntmauriseurisus.</a></li><li><ahref="#">Loremipsumdolorsitamet,consectetueradipiscingelit.</a></li><li><ahref="#">Aliquamtinciduntmauriseurisus.</a></li></ul></details></details>利用案例

在哪些情形时会用到<details>?FAQ表多是我们开始出现的设法。人人常常利用手风琴效果是用在FAQ列表,以是<details>是这一效果的最好效果。
思索到这一系列内容,它大概被流动在某一地区,当我们转动内容的时分。像如许子?
你也能够利用<details>来操纵博客的批评内容,用户简介,下载列表,庞大的表单,大概像标准中形貌上面的使用:

来讲讲:HTML5教程:怎样利用details元素和summary元素

来讲讲:HTML5教程:怎样利用details元素和summary元素

Anexampleofthe<details>elementfromthespec实践上,只需你看看我写的wordpress,会发明有大批的利用<details>的时机。让我们在批评中懂得一下你的概念和设法。
款式格局化

你怎样对这个界说款式?同时,在webkit扫瞄器中我们可使用伪类款式::-webkit-details-marker。你能够看到这个小的案例:
12345detailssummary::-webkit-details-marker{background:red;color:#fff;font-size:500%;}我们也能够将这个小组件定位。这里是向右浮动的这就是我们初始化效果。
我们怎样将默许的组件Icon自界说呢?那就是用属性选择器(attributeselector),你能够用来检测<details>元素是翻开的仍是封闭的,然后为其界说一个符合的背景图片。我们咋上面的例子中作了一个相似的效果,利用:afterpseudo-element元素界说成我们喜好的背景图片:
12345678910111213141516171819summary::-webkit-details-marker{display:none}summary:after{background:red;border-radius:5px;content:"+";color:#fff;float:left;font-size:1.5em;font-weight:bold;margin:-5px10px00;padding:0;text-align:center;width:20px;}details[open]summary:after{content:"-";}在下面的例子中,我们利用文本“+”和“-”来界说这个组件的形态,依据你的计划必要,你大概但愿利用:before来取代:after,这两个为类元素都可使用image.
details的[open]属性选择器能制造良多成心思的大概性。由于我们是好大夫,上面是我们粉饰后的效果,上面是截屏效果:

来讲讲:HTML5教程:怎样利用details元素和summary元素

来讲讲:HTML5教程:怎样利用details元素和summary元素

Styled<details>elementinChrome假如我们能够用过CSS的动画效果来润色翻开和封闭时的形态,如许计划就更完善了,可是今朝为止我们还没有举措做到这点。
可会见性

不幸的是在我们写这篇文章的时分,<details>h还没法经由过程键盘会见,SteveFaulkner写到:
Bottomlineis,currentlynokeyboardsupportandnousableinformationexposedtoassistivetechnology.
本人试一下,假如你利用鼠标翻开<details>元素,你可使用键盘抵达内容部分,可是你没法利用键盘翻开和封闭地区。以是今朝这并非幻想形态,不外我们信任这个小国很快会被改善。
向后兼容

在我们埋怨其在IE6中没法失效之前,感激这些伶俐的人们,我们能够供应文雅的像狗兼容。这些效果也被列鄙人面的网站veryhandycollectionofcross-browserpolyfills,这两个都必要jQuery:


  • <details>fallbackviajQuerybyMathiasBynens
  • Another<details>alternative,alsobasedonjQuerybyManuelBieh
12345<script>if(!(openindocument.createElement(details))){alert("Nodetails");}</script>更新:感激的批评。下面的代码并非100%牢靠,由于他在某些chrome版本下会失利。你可使用thisModernizrsnippet。
我们为什么利用这类范例的交互?

言回正传,为何会有这个效果在HTML5中?就像别的HTML5的效果,利用这类效果可以更复杂。好比工夫选择,Datepickers,sliders,progressindicators,如今这类手风琴效果就能够在不利用JavaScript的情形下更便利实行。谁能想到下一个是甚么?假如是tabs标签那就行了。
总结

在这篇文章中,我们论述了怎样往利用<details>和<summary>元素。<details>是一个新元素,经由过程和<summary>元素经由过程扫瞄器能够制造手风琴的交互效果。
今朝,<details>只能在Chrome事情,不外我们等候这会在不久的未来有所改动。这里只要一个csstrick我们可使用::-webkit-details-marker,可是我们具有良多的别的css。让我们在批评中晓得关于<details>元素你在这方面的履历和设法。
中文原文:details和summary元素
英文原文:Thedetailsandsummaryelements

</p>
在主页制作时采用CSS技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。
蒙在股里 该用户已被删除
发表于 2015-1-17 20:51:52 | 显示全部楼层
每天上网看着那样多的网页,于是我才下定决心选择了网页制作这一门课程,目的就是希望以后能够做出一个完美的网页来。
再见西城 该用户已被删除
发表于 2015-1-26 22:47:04 | 显示全部楼层
滚动条)层属性--溢出(visible/hidden/scroll/auto)
小妖女 该用户已被删除
发表于 2015-2-5 06:12:08 | 显示全部楼层
Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。
小女巫 该用户已被删除
发表于 2015-2-11 07:54:44 | 显示全部楼层
dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS,三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。
飘灵儿 该用户已被删除
发表于 2015-3-2 01:05:22 | 显示全部楼层
Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。
再现理想 该用户已被删除
发表于 2015-3-11 04:05:26 | 显示全部楼层
还可以在Dreamweaver常用工具中选择超级链接,完成相应的填写即可。
活着的死人 该用户已被删除
发表于 2015-3-25 08:17:42 | 显示全部楼层
Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-3-29 15:01

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表