几个简单的导航布局

    xiaoxiao2021-03-26  27

    html结构

    <div class="severce-tabs"> <ul class="service-tabs-inner"> <li class="on"> <a href="#">主页</a> </li> <li> <a href="#">推荐</a> </li> <li> <a href="#">导航</a> </li> <li> <a href="#">购物</a> </li> </ul> </div>

    css

    .service-tabs-inner{ width:1200px; margin:0 auto; } .service-tabs-inner:after{ content:""; display: block; clear:both; } .service-tabs-inner li{ float: left; list-style: none; text-align: center; position: relative; } .service-tabs-inner li a{ display: block; width:120px; height:60px; text-decoration: none; line-height: 60px; color:#666; font-size: 20px; }

    效果1,高亮背景

    添加伪类

    .service-tabs-inner li a:hover{ color:#2CC185; } .service-tabs-inner li.on a{ background-color: #2CC185; color:#fff; }

    效果2.高亮下添加三角形

    添加伪元素

    .service-tabs-inner li.on a:after{ content: ""; display: block; position: absolute; left:57.5px; border-top:5px solid #2CC185; border-left:5px solid transparent; border-right:5px solid transparent; }

    效果3。高亮添加下划线

    添加样式,注意高度变化

    .service-tabs-inner li.on a{ border-bottom: 2px solid #2CC185; height:58px; color:#2CC185; }

    转载请注明原文地址: https://ju.6miu.com/read-500183.html

    最新回复(0)