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 {
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          align-items: flex-start;
        }
        
        .sitemap-main > ul > li {
          flex: 1 1 auto;
        }
        
        .sitemap li {
          margin-right: 1em;
          list-style: none;
        }
        
        /* Handle grid lines */
        .sitemap-main li:before,
        .sitemap-main li:after {
          display: inline-block;
          width: 1em;
          height: 2em;
          border: 2px solid #f2f2f2;
          border-right: none;
          border-top: none;
          content: "";
        }
        
        .sitemap-main li:after {
          position: absolute;
          left: 2em;
          bottom: 0;
          width: 2px;
          height: 100%;
        }
        
        .sitemap-main ul:before {
          position: absolute;
          left: 0;
          top: -2.75em;
          display: block;
          width: 2px;
          height: 100%;
          background: #fff;
          content: "";
        }
        
        .sitemap-main > ul:before {
          display: none;
        }
        
        .sitemap-main li:last-child:after {
          border-color: #fff;
          bottom: 0;
          height: 2.7em;
        }
        
        /* The home/top level link */
        .sitemap-root {
          margin-bottom: 2em;
        }
        
        .sitemap-root > a {
          min-width: 8em;
          background: #C3BAAA;
          border-color: #aea28c;
          color: #fff;
        }
        
        .sitemap-root > a:before {
          color: #f2f2f2;
        }
        
        .sitemap-root > a:after {
          position: absolute;
          bottom: -2.6em;
          left: calc(2em - 1px);
          display: block;
          width: 2px;
          height: 2em;
          background: #f2f2f2;
          content: "";
        }
        
        .sitemap-main > ul > li > a {
          background: #f2e8dd;
          border-color: #e4cfb8;
        }
        
        .sitemap-main ul ul ul a {
          background: #fff;
        }
        
        .sitemap-aux {
          order: 3;
          font-size: 0.9em;
        }
        
        .sitemap-aux ul {
          display: flex;
          flex-wrap: wrap;
          padding: 0;
        }
        
        .sitemap-aux li {
          margin: 0 0.5em 0.5em 0;
        }
        
        .sitemap-aux a {
          background: #FAF8D4;
          border-color: #f5f1a6;
        }
        
 .........完整代码请登录后点击上方下载按钮下载查看