sscms Header 排版CSS+HTML

本文主要是介绍sscms Header 排版CSS+HTML，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

在这里插入图片描述

<header class="header" data-aos="fade-down"><div class="wrap"><div class="logo"><stl:a channelIndex="首页"><img src="{Stl.SiteUrl}/upload/logo.png" alt="{stl.siteName}"></stl:a></div><div class="nav_btn"></div><ul id="nav"><stl:if testType="ChannelName" testOperate="Equals" value="首页"><stl:yes><li class="nav_li active"><a href="{Stl.SiteUrl}/" class="active">网站首页</a></li></stl:yes><stl:no><li class="nav_li"><a href="{Stl.SiteUrl}/">网站首页</a></li></stl:no></stl:if><stl:channels topLevel="0" groupChannel="nav"><stl:if type="UpChannelOrSelf"><stl:yes><li class="nav_li active"><stl:a class="active">{Channel.Title}</stl:a><stl:if type="CountOfChannels" operate="GreatThan" value="0"><stl:yes><ul class="menu"><stl:channels><li><stl:a>{Channel.Title}</stl:a></li></stl:channels></ul></stl:yes></stl:if></li></stl:yes><stl:no><li class="nav_li"><stl:a>{Channel.Title}</stl:a><stl:if type="CountOfChannels" operate="GreatThan" value="0"><stl:yes><ul class="menu"><stl:channels><li><stl:a>{Channel.Title}</stl:a></li></stl:channels></ul></stl:yes></stl:if></li></stl:no></stl:if></stl:channels></ul></div>
</header>


.header {width: 100%;background-color: #fff;
}
.header .logo{padding-top:20px;padding-bottom:20px;
}
.header #nav{width:55%;display: flex;flex-wrap: wrap;justify-content: space-around;
}
#nav li.nav_li{width:calc(100% / 6 - 0px);text-align: center;position: relative;
}
#nav li::after{position:absolute;bottom:0px;content:'';width:80px;left:50%;margin-left:-40px;height:0px;background:#00a5ff;transition:all 0.8s;
}
#nav li:hover:after{height:100%}
#nav li.nav_li:first-child{border-left:0px;}
#nav li a{color:#666;  line-height: 6;}
#nav li>a{color:#666;  line-height: 6;display: block;
}
#nav li.active a{color:#666; line-height: 6;}
#nav li:hover a{color: #fff;line-height: 6;z-index: 2;position:relative;
}
#nav li.active:hover a{color: #00aaff; line-height: 6;}
#nav li.active:after{position:absolute;bottom:0px;content:'';width:80px;left:50%;margin-left:-40px;height:2px;background:#00a5ff;transition:all 0.8s;
}
#nav li.nav_li:hover ul.menu{display: block;opacity: 1;
}
#nav li.nav_li ul.menu{opacity: 0;position:absolute;width:100%;top: 31px;background-color: #b22215;
}
#nav ul.menu li{position:relative;height: 42px;line-height: 42px;
}
#nav ul.menu li:after{bottom:0;}