怎么把css代码折叠起来的啊，有详细一点的吗

html-css054

怎么把css代码折叠起来的啊，有详细一点的吗,第1张

像css, html, JavaScript以及其它代码, 都是纯文本文件, 你所看到的折叠, 着色等功能都是编辑器实现的, 不需要特别操作, 只需要使用好的代码编辑器就可以了. visual studio code以及atom都是当今最为流行也最为出色的JavaScript/html/css编辑器. 都是免费的, 体积也都比较小. 百度直接搜索,打开官网下载即可.

用html和css实现标签折叠，代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />

<title>用html和css实现标签折叠</title>

</head>

<body>

<ul id="fm">

      <li><a href="#"><h1>折叠标签A</h1>

          <span>这里是描述标签A</span>

<span>这里是描述标签A</span>

<span>这里是描述标签A</span>

</a></li>

      <li><a href="#"><h1>折叠标签B</h1>

          <span>这里是描述标签B</span>

<span>这里是描述标签B</span>

<span>这里是描述标签B</span></a>

      <li><a href="#"><h1>折叠标签C</h1>

          <span>这里是描述标签C</span>

<span>这里是描述标签C</span>

<span>这里是描述标签C</span></a>

<li><a href="#"><h1>折叠标签D</h1>

          <span>这里是描述标签D</span>

<span>这里是描述标签D</span>

<span>这里是描述标签D</span></a>

  </ul>

</body>

</html>

CSS样式为：

<style type="text/css">

#fm{

  overflow:hidden

  background-color:#FFCCCC

  width:200px

  height:500px

  overflow:hidden

}

#fm h1{

  margin:0px

  color:#FF3333

  font-size:14px

}

#fm li{

  list-sytle-type:none

  display:block

  width:178px

  border:1px solid #00CCCC

  border-bottom-width:0px

}

#fm li.end{

  border-bottom-width:1px

}

#fm li a{

  display:block

  text-decoration:none

  width:100%

  padding:10px

}

#fm li a span{

  display:none

  color:#000000

  font-size:12px

  padding-top:10px

}

#fm li a:hover{

  background:#fff

}

#fm li a:hover span{

  display:block

  cursor:hand

}

</style>

效果如图：

以上就是用html和css实现标签折叠的解决方法。

利用伪类可以实现点击打开折叠菜单，但是再次点击收起貌似就没法实现了。跟楼下说的一样，利用:hover、:active 可以设置二级菜单的样式（如height、visibility、display）以达到展开的效果。