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 #.........完整代码请登录后点击上方下载按钮下载查看

网友评论0