css布局实可折叠目录文件夹效果代码-html代码-BFW代码库

css布局实可折叠目录文件夹效果代码

代码语言：html

代码描述：css布局实可折叠目录文件夹效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<html>

<head>
    <style>
        @import url("//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");
        @import url(https://fonts.googleapis.com/css?family=Noto+Sans:400,700);
        
        *, *::before, *::after {
          box-sizing: border-box;
        }
        
        html {
          min-height: 100%;
        }
        
        body {
          margin: 40px;
          font: 1.2em/1.2 'Noto Sans', sans-serif;
          background: linear-gradient(90deg, #b9c3c9, #6b7c87);
        }
        
        form {
        	position: relative;
        	width: 300px;
        	margin: 0 auto;
        	padding: 20px;
        	border-top: 30px solid #5c5d5e;
        	border-radius: 10px;
          background-color: #e8ebed;
        	box-shadow: 0 0 80px rgba(0, 0, 0, .2);
        }
        
        form::before {
        	content: '';
        	position: absolute;
        	top: -20px;
        	left: 15px;
        	width: 10px;
        	height: 10px;
        	border-radius: 50%;
          background-color: #adadae;
        	box-shadow:
            20px 0 0 #adadae,
            40px 0 0 #adadae;
        }
        
        h1 {
          margin: 0;
          padding-bottom: 20px;
          border-bottom: 1px solid #adadae;
          color: #5c5d5e;
          font-size: 1.1em;
        }
        
        .tree {
          padding: 20px 0;
        }
        
        .tree::after {
          content: '';
          display: block;
          clear: left;
        }
        
        .tree div {
          clear: left;
        }
        
        input[type="checkbox"] {
          position: absolute;
          left: -9999px;
        }
        
        label, a {
          display: block;
          float: left;
          clear: left;
          position: relative;
          margin-left: 25px;
          padding: 5px;
          border-radius: 5px;
          color: #5c5d5e;
          text-decoration: none;
          cursor: pointer;
        }
        
        label::before, a::before {
          display: block;
          position: absolute;
          top: 6px;
          left: -25px;
          font-family: 'FontAwesome';
        }
        
        label::before {
          content: '\f07b'; /* closed folder */
        }
        
        input:checked + label::before {
          content: '\f07c'; /* open folder */
        }
        
        a::before {
          content: '\f068'; /* dash */
        }
        
        input:focus + label, a:focus {
          outline: none;
          background-color: #b9c3c9;
        }
        
        .sub {
          display: none;
          float: left;
          margin-left: 30px;
        }
        
        input:checked ~ .sub {
          display: block;
        }
        
        input[type="reset"] {
          display: block;
          width: 100%;
          padding: 10px;
          border: none;
          border-radius: 10px;
          color: #e8ebed;
          background-color: #6b7c87;
          font-family: inherit;
          font-size: .9em;
          cursor: pointer;
          -webkit-appearance: none;
          -moz-appearance: none;
        }
        
        input[type="reset"]:focus {
          outline: none;
          box-shadow: 0 0 0 4px #b9c3c9;
        }
    </style>

</head>

<body>
    <form>
        <h1>C:\Users\Will\Magi.........完整代码请登录后点击上方下载按钮下载查看