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

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

<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">
    <!-- start: write list -->
    <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>
    <!-- end: write list -->
  </div>
</div>

Copyright ＠ 2007-2012 敏韬网(敏而好学，文韬武略--MinTao.Net)（学习笔记） Inc All Rights Reserved.
闵涛 E_mail:admin@mintao.net(欢迎提供学习资源)

鄂公网安备 42011102001154号

站长：MinTao ICP备案号：鄂ICP备11006601号-18