HTML css web简单的导航栏

html web简单的导航栏

Emm。。 本人的第一篇博客，不知写点什么。。 也不会写什么，哈哈。由于实习工作所需接触了一些前端的知识。下面是平时工作时无聊学习的css。做一个简单的导航栏。

body部分

<!-- 灰色渐变条，借助hover弄出导航栏 导航栏默认不可见 --> <div class="up"> <!-- 每个颜色 --> <div class="a-1"> <a href="https://mp.csdn.net/mdeditor/102861665"> red</a> <div class="innerdiv"> <div class="inner-1">1</div> <div class="inner-2">2</div> <div class="inner-3">3</div> <div class="inner-4">4</div> </div> </div> <div class="a-2"> <a href="https://www.baidu.com"> blue </a> <div class="innerdiv"> <div class="inner-1">1</div> <div class="inner-2">2</div> <div class="inner-3">3</div> <div class="inner-4">4</div> </div> </div> <div class="a-3"> <a href="https://www.baidu.com"> green </a> <div class="innerdiv"> <div class="inner-1">1</div> <div class="inner-2">2</div> <div class="inner-3">3</div> <div class="inner-4">4</div> </div> </div> <div class="a-4"> <a href="https://www.baidu.com"> yellow </a> <div class="innerdiv"> <div class="inner-1">1</div> <div class="inner-2">2</div> <div class="inner-3">3</div> <div class="inner-4">4</div> </div> </div> <div class="a-5"> <a href="https://www.baidu.com"> pink </a> <div class="innerdiv"> <div class="inner-1">1</div> <div class="inner-2">2</div> <div class="inner-3">3</div> <div class="inner-4">4</div> </div> </div> <div class="a-6"> <a href="https://www.baidu.com"> Orange </a> <div class="innerdiv"> <div class="inner-1">1</div> <div class="inner-2">2</div> <div class="inner-3">3</div> <div class="inner-4">4</div> </div> </div> <div class="a-7"> <a href="https://www.baidu.com"> purple </a> <div class="innerdiv"> <div class="inner-1">1</div> <div class="inner-2">2</div> <div class="inner-3">3</div> <div class="inner-4">4</div> </div> </div> </div>

大概长这样，没错就是这么花里胡哨哈哈哈。 下面是样式 CSS部分

<style> /* 灰色渐变条 */ .up { width: 100%; height: 60px; display: block; animation-name: abc; animation-duration: 0s; background-image: linear-gradient(to bottom, rgba(204, 204, 204, 1), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)); line-height: 10px; display: flex; flex-direction: row; } /* 每个颜色 */ .a-1 { background-color: #B92A46; font-weight: bold; } .a-2 { background-color: skyblue; font-weight: bold; } .a-3 { background-color: #56BA9E; font-weight: bold; } .a-4 { background-color: #F9F0C7; font-weight: bold; } .a-5 { background-color: #C84A81; font-weight: bold; } .a-6 { background-color: #F2AE2F; font-weight: bold; } .a-7 { background-color: #AF60A1; font-weight: bold; } /* 颜色 动画 */ [class*="a-"] { width: 20%; float: left; text-align: center; /* line-height: 100px; */ animation-name: cde; animation-duration: 0.5s; display: none; height: 50px; border-radius: 15px; line-height: 50px; margin-top: 10px; } @keyframes cde { 0% { height: 20%; } 20% { height: 80%; } 40% { height: 40%; } 60% { height: 100%; } } a { text-decoration: none; color: black; } /* 鼠标划过现出导航 */ .up:hover [class*="a-"]{ display: block; } a:hover { color: white; } /* 导航详情框 */ .innerdiv{ /* border: 1px solid #B92A46; */ margin: auto; animation-name: in; animation-duration: 0.8s; max-width: 200px; min-width: 100px; border-radius: 10px; background-color: #CCCCCC; display: none; } /* 详情框的动画 */ @keyframes in{ from{ height: 0px; top: 203px; } to{ height: 203px; top:0px; } } /* 每个颜色对应的详情框 */ .a-1:hover .innerdiv{ display: block; } .a-2:hover .innerdiv{ display: block; } .a-3:hover .innerdiv{ display: block; } .a-4:hover .innerdiv{ display: block; } .a-5:hover .innerdiv{ display: block; } .a-6:hover .innerdiv{ display: block; } .a-7:hover .innerdiv{ display: block; } [class*="inner-"] { border-bottom: 2px solid ; cursor: pointer; max-width: 200px; border-radius: 10px; } .inner-4{ border-bottom: 0px; border-bottom: 2px solid ; } [class*="inner-"]:hover{ background-color: #F1F1F1; color: #C84A81; } </style>

具体效果可以自行测试，小白一个。