html5 的 details 标記 ，summary标記，布局

html5的新加的标簽：details的用法,兩種方式的介紹，一種是直接css的實作，一種是js+css的實作。

<code>&lt;</code><code>header</code><code>&gt;導航&lt;/</code><code>header</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>nav</code><code>&gt;菜單&lt;/</code><code>nav</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>article</code><code>&gt;内容&lt;/</code><code>article</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>footer</code><code>&gt;</code>

<code>        </code><code>隐藏腳注</code>

<code>        </code><code>&lt;</code><code>details</code><code>&gt;頁面生成于2015-7-9&lt;/</code><code>details</code><code>&gt;&lt;</code><code>br</code><code>/&gt;</code>

<code>        </code><code>顯示腳注</code>

<code>        </code><code>&lt;</code><code>details</code> <code>open</code><code>=</code><code>"open"</code><code>&gt;</code>

<code>            </code><code>&lt;</code><code>summary</code><code>&gt;頁面說明：&lt;/</code><code>summary</code><code>&gt;</code>

<code>            </code><code>頁面生成于2015/7/9</code>

<code>            </code><code>summary是對details的詳細說明</code>

<code>        </code><code>&lt;/</code><code>details</code><code>&gt;</code>

<code>        </code><code>&lt;</code><code>span</code> <code>onClick</code><code>=</code><code>"span1_click()"</code><code>&gt;js腳本控制互動元素的使用腳注&lt;/</code><code>span</code><code>&gt;</code>

<code>        </code><code>&lt;</code><code>details</code> <code>id</code><code>=</code><code>"details1"</code><code>&gt;本頁面生成時間：2015-7-9 11:27&lt;/</code><code>details</code><code>&gt;</code>

<code>        </code><code>&lt;</code><code>script</code> <code>type</code><code>=</code><code>"text/javascript"</code><code>&gt;</code>

<code>            </code><code>function span1_click(){</code>

<code>                </code><code>var objD = document.getElementById("details1");</code>

<code>                </code><code>var attD = objD.getAttribute("open");</code>

<code>                </code> 

<code>                </code><code>if(attD != "open"){</code>

<code>                    </code><code>objD.setAttribute("open","open");</code>

<code>                </code><code>}else{</code>

<code>                    </code><code>objD.removeAttribute("open");</code>

<code>                </code><code>}</code>

<code>            </code><code>}</code>

<code>        </code><code>&lt;/</code><code>script</code><code>&gt;</code>

<code>    </code><code>&lt;/</code><code>footer</code><code>&gt;</code>

通用的css樣式的實作：

<code>&lt;style type=</code><code>"text/css"</code><code>&gt;</code>

<code>header, nav, article,footer{</code>

<code>    </code><code>border</code><code>:</code><code>1px</code> <code>solid</code> <code>#666</code><code>;</code>

<code>    </code><code>padding</code><code>:</code><code>5px</code><code>;</code>

<code>}</code>

<code>header{</code>

<code>    </code><code>width</code><code>:</code><code>500px</code><code>;</code>

<code>nav{</code>

<code>    </code><code>float</code><code>:</code><code>left</code><code>;</code>

<code>    </code><code>width</code><code>:</code><code>60px</code><code>;</code>

<code>    </code><code>height</code><code>:</code><code>100px</code><code>;</code>

<code>article{</code>

<code>    </code><code>width</code><code>:</code><code>428px</code><code>;</code>

<code>footer{</code>

<code>    </code><code>clear</code><code>:</code><code>both</code><code>;</code>

<code>details{</code>

<code>    </code><code>overflow</code><code>:</code><code>hidden</code><code>;</code>

<code>    </code><code>height</code><code>:</code><code>0px</code><code>;</code>

<code>    </code><code>padding-left</code><code>:</code><code>200px</code><code>;</code>

<code>    </code><code>position</code><code>:</code><code>relative</code><code>;</code>

<code>    </code><code>display</code><code>:</code><code>block</code><code>;</code>

<code>details[open]{</code>

<code>    </code><code>height</code><code>:</code><code>auto</code><code>;</code>

<code>span{</code>

<code>    </code><code>cursor</code><code>:</code><code>pointer</code><code>;</code>

<code>&lt;/style&gt;</code>

本文轉自 愛笑嘚蛋蛋 51CTO部落格，原文連結：http://blog.51cto.com/dd118/1672509，如需轉載請自行聯系原作者