css简洁的网站栏目结构图排列效果代码-html代码-BFW代码库

css简洁的网站栏目结构图排列效果代码

代码语言：html

代码描述：css简洁的网站栏目结构图排列效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">






    <style>
        .sitemap {
          position: relative;
          display: flex;
          flex-flow: row wrap;
          padding: 0;
        }
        
        .sitemap a {
          position: relative;
          z-index: 10;
          display: inline-flex;
          flex-direction: column;
          padding: 0.5em 1em;
          border: 1px solid #e0e0e0;
          border-radius: 4px;
          border-bottom-width: 3px;
          background: #f9f9f9;
          font-weight: 500;
          text-decoration: none;
          color: #595959;
        }
        
        .sitemap a:before {
          margin-bottom: 0.3em;
          content: attr(href);
          font-size: 0.8em;
          color: #aaa;
        }
        
        .sitemap-main {
          position: relative;
          flex: 1 1 100%;
          order: 3;
          margin-bottom: 1em;
        }
        
        .sitemap-main a {
          margin-bottom: 0.5em;
          margin-left: 0.2em;
        }
        
        .sitemap-main ul {
          position: relative;
          padding-left: 2em;
        }
        
        .sitemap-main > ul {
          dis.........完整代码请登录后点击上方下载按钮下载查看