六合开奖结果现场直播欢迎诸位!收藏本站注 册登 陆
常用三肖中特马:基础知识网络知识操作系统WPS网页制作数据库算法网页成功之路网络安全最新技术古典mid流行midmid背景下载中心
您现在的位置:首页 > 三肖中特马 > 文章页

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

Admin | 2008-5-20 18:30:41 | ReadNums | 6857 | 标签 网页制作 | 打印本页
     

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

<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 = 'https://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="https://" target="_blank">内容一</a> </li>
        <li><a href="https:// target="_blank">内容二</a> </li>
        <li><a href="https:// target="_blank">内容三</a> </li>
        <li><a href="https:// target="_blank">内容四</a> </li>
        <li><a href="https:// target="_blank">内容五</a> </li>
      </ul>
    </div>
    <!-- end: write list -->
  </div>
</div>


问题未解决:在线咨询

网友评论

(访客)
内容实用原创,讲得很好。
20xx年x月x日
(站长)
有问题请在线咨询。
20xx年x月x日