可折叠、关闭的文章显示栏目div+css源代码示例

Admin | 2008-5-20 18:30:41 | 被阅次数 | 9369

温馨提示!

如果未能解决您的问题，请点击搜索；登陆可复制文章，点击登陆

　　将如下代码保存为网页格式直接运行即可查看效果；

<div class="deflist" id="links"
style="BORDER-RIGHT: powderblue 1px solid; BORDER-TOP: powderblue 1px solid; DISPLAY: inline-block; BORDER-LEFT:

powderblue 1px solid; WIDTH: 240px; BORDER-BOTTOM: powderblue 1px solid; BACKGROUND-COLOR: white">
<div class="titlebar"
      style="BACKGROUND-IMAGE: url(images/main_bta.jpg)"><span
      id="__title"
      style="PADDING-RIGHT: 2px; PADDING-LEFT: 2px; FLOAT: left; PADDING-BOTTOM: 2px; PADDING-TOP: 2px">栏目名称</span><span
      id="__close"
      style="PADDING-RIGHT: 2px; PADDING-LEFT: 2px; FLOAT: right; PADDING-BOTTOM: 2px; PADDING-TOP: 2px"><img
      id="Media-35" title="关闭" style="CURSOR: hand"
      onclick="javascript: if( document.getElementById('links').style.display !='none') {document.getElementById

('links').style.display='none'; this.src = 'http://localhost/Site/#'; }else {document.getElementById

('links').style.display='block'; this.src = 'images/close.gif';}"
      src="123.files/close.gif" border="0" /></span><span id="__collapse"
      style="PADDING-RIGHT: 2px; PADDING-LEFT: 2px; FLOAT: right; PADDING-BOTTOM: 2px; WIDTH: 1px; PADDING-TOP: 2px"><img
      id="Media-36" title="折叠展开" style="CURSOR: hand; align: right"
      onclick="javascript: if( document.getElementById('links-content').style.display !='none') {document.getElementById

('links-content').style.display='none'; this.src = 'images/mail_dot1.gif'; }else {document.getElementById('links-

content').style.display='block'; this.src = 'images/hide.gif';}"
      src="123.files/hide.gif" border="0" /></span> </div>
<div id="links-content">
    
    <div width="100%">
      <ul>
        <li><a href="http://" target="_blank">内容一</a> </li>
        <li><a href="http:// target="_blank">内容二</a> </li>
        <li><a href="http:// target="_blank">内容三</a> </li>
        <li><a href="http:// target="_blank">内容四</a> </li>
        <li><a href="http:// target="_blank">内容五</a> </li>
      </ul>
    </div>
    
</div>
</div>