![7275569-c98742c21fb0154e.jpg](https://i-blog.csdnimg.cn/blog_migrate/9549bdd97510b01240d73122a5d0a10a.webp?x-image-process=image/format,png)
订阅号:rabbit_svip
![7275569-dc9e0395792824e5.png](https://i-blog.csdnimg.cn/blog_migrate/46484115893a9d553ce24a267a167ae8.webp?x-image-process=image/format,png)
image.png
“简书”不能发动图,把代码考下来运行一下就能动啦,或者看看订阅号上的动图。
我是通过flex来布局的。
HTML代码
<div class="top-bar">
这里是头部
</div>
<div class="nav-bar"> <!-- 主容器 -->
<div class="nav-bg"> <!-- 内容容器 -->
<div class="nav-top"> <!-- 一级标题外容器 -->
<div class="nav-content"> <!-- 一级标题内容器 -->
<ul class="nav-content-box">
<li class="index on">
<a href="#">首页</a>
</li>
<li class="cat">
<a href="#">分类</a>
<ul>
<li><a href="#">自然</a></li>
<li><a href="#">文化</a></li>
<li><a href="#">地理</a></li>
<li><a href="#">历史</a></li>
<li><a href="#">生活</a></li>
<li><a href="#">社会</a></li>
<li><a href="#">艺术</a></li>
<li><a href="#">人物</a></li>
<li><a href="#">经济</a></li>
<li><a href="#">科技</a></li>
<li><a href="#">体育</a></li>
</ul>
</li>
<li class="special ">
<a href="#">特色百科</a>
<ul>
<li><a href="#">历史上的今天</a></li>
<li><a href="#">数字博物馆</a></li>
<li><a href="#">城市百科</a></li>
<li><a href="#">高校百科</a></li>
<li><a href="#">艺术百科</a></li>
<li><a href="#">科学百科</a></li>
</ul>
</li>
<li class="user">
<a href="#">用户</a>
<ul>
<li><a href="#">蝌蚪团</a></li>
<li><a href="#">燃梦计划</a></li>
<li><a href="#">百科任务</a></li>
<li><a href="#">百科商城</a></li>
</ul>
</li>
<li class="cooperation">
<a href="#">权威合作</a>
<ul>
<li><a href="#">合作模式</a></li>
<li><a href="#">常见问题</a></li>
<li><a href="#">联系方式</a></li>
</ul>
</li>
<li class="mobile">
<a href="#">手机百科</a>
<ul>
<li><a href="#">客户端</a></li>
<li><a href="#">网页版</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
CSS代码
* {
margin: 0;
padding: 0;
list-style: none;
box-sizing: border-box;
font-family:arial,tahoma,'Microsoft Yahei','\5b8b\4f53',sans-serif;
}
a{
padding-bottom:3px;
color:white;
text-decoration:none;
}
.top-bar {
min-width:900px;
background-color:#f3f3f3;
text-align:center;
padding:2.5em;
}
.nav-bar {
position:relative;
overflow:hidden;
min-width:900px;
height:45px;
}
.nav-bar:hover{
overflow:visible;
}
.nav-bg{
position:absolute;
width:100%;
height:272px;
background:#24619c;
background:rgba(36,97,158,.95);
}
.nav-top{
height:45px;
border-top:1px solid #5895d5;
border-bottom:1px solid #3b92e9;
background:#459df5;
}
.nav-content{
position:absolute;
width:80%;
left:10%;
height: 100%;
}
.nav-content-box{
position:absolute;
top:0;
left:0;
width:100%;
display: flex;
height: 100%;
height: calc(100% - 1px);
flex-direction: row;
}
.nav-content-box>li {
width: 120px;
}
.nav-content-box>li:hover{
background:#19508b;
}
.nav-content-box>li>a{
display:block;
width:120px;
text-align: center;
margin:0;
height:44px;
line-height:44px;
}
ul.nav-content-box>li>ul{
border-right:solid 1px #3a6fa2;
height: 80%;
margin:0;
}
.nav-content-box>li:hover>ul{
border-right: none;
padding-right:1px;
}
.nav-content-box>li:hover>a{
background:#338ce6;
}
ul.nav-content-box>li>ul{
border-right:solid 1px #3a6fa2;
margin:10px 0 6px;
font-size: .8em;
display: flex;
flex-flow: row wrap;
align-content: flex-start;
}
ul.nav-content-box>li>ul>li{
width:100%;
padding-top: 8px;
line-height:2;
text-align:center;
}
ul.nav-content-box>li>ul>li>a {
color: #a2c9f0;
}
ul.nav-content-box>li>ul>li>a:hover {
color: #fff;
border-bottom: 2px solid #fff;
}
ul.nav-content-box>li.cat>ul>li{
width:50%;
}
HTML与CSS 目录:HTML与CSS
上一篇:【CSS】省略号
下一篇:【CSS】图片动画特效(相框)