[CSS]リスト要素をデザインするスタイルシートの実装集
Post on:2008年7月8日
sponsors
noupeのエントリー「20+のリスト要素を装飾するスタイルシートのデモとチュートリアル」を紹介します。
CSS-Styled Lists: 20+ Demos, Tutorials and Best Practices
上記キャプチャの「Recent Archives」のプルダウンのようになっている箇所は、下記のようにdl, ul 要素が使用されています。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<textarea name="code" class="html" cols="60" rows="5"> <dl class="dropdown"> <dt id="two-ddheader" onmouseover="ddMenu('two',1)" onmouseout="ddMenu('two',-1)" class="module">Recent Archives</dt> <dd id="two-ddcontent" onmouseover="cancelHide('two')" onmouseout="ddMenu('two',-1)"> <ul> <li><a href='http://www.darrenhoyt.com/2008/06/' title='June 2008'>June 2008</a></li> <li><a href='http://www.darrenhoyt.com/2008/05/' title='May 2008'>May 2008</a></li> <li><a href='http://www.darrenhoyt.com/2008/04/' title='April 2008'>April 2008</a></li> </ul> </dd> </dl> </textarea> |
noupeのエントリーでは、他にも多くの実装例が紹介されています。
sponsors
