css实现网站地图站点地图效果代码
代码语言:html
所属分类:布局界面
代码描述:css实现网站地图站点地图效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> .sitemap-navigation { display: inline-block; width: 900px; max-width: 100%; overflow: hidden; padding: 0; /* Put all this in a media query. Don't forget to style a simple mobile version */ } .sitemap-navigation ul, .sitemap-navigation li { list-style: none; margin: 0; padding: 0; position: relative; } .sitemap-navigation a { display: inline-block; } .sitemap-navigation .menu-item::before, .sitemap-navigation > .menu-item-has-children > .sub-menu::before { content: ""; display: block; position: relative; left: 50%; margin-left: -2px; width: 100%; border-left: #4088c1 solid 4px; height: 2em; } .sitemap-navigation > .menu-item-has-children::before { display: none; } .sitemap-navigation > .menu-item-has-children > .sub-menu { display: flex; justify-content: space-between; border-top: #4088c1 solid 4px; margin-top: 2em; } .sitemap-navigation > .menu-item-has-children > .sub-menu::before { position: absolute; top: -2em; margin-top: -4px; } .sitemap-navigation > .menu-item-has-children > .sub-menu > .menu-item { flex: 1 0 auto; margin-top: -4px; padding-left: 1em; padding-right: 1em; } .sitemap-navigation > .menu-item-has-children > .sub-menu > .menu-item:first-child::before, .sitemap-navigation > .menu-item-has-children > .sub-menu > .menu-item:last-child::before { background: #fefeff; } .sitemap-navigation > .menu-item-has-children > .sub-menu > .menu-item:first-child::before { left: auto; right: 50%; width: 100%; border-left: none; border-right: #4088c1 solid 4px; } body { background: #fefeff; } .sitemap-wrapper { padding: 2rem; text-align: center; } .sitemap-navigation a { background: #69dccd; border-radius: 0.25em; color: white; text-decoration: none; padding: 1em; transition: 0.25s; } .sitemap-navigation a:hover { background: #04a4a2; } .sitemap-navigation > .menu-item-has-children > a { background: #f094a0; font-size: 1.2rem; } .sitemap-navigation > .menu-item-has-children > a:hover { background: #b45f77; } .sitemap-navigation > .menu-item-has-children > .sub-menu &.........完整代码请登录后点击上方下载按钮下载查看
网友评论0