倾斜导航栏效果实现

最新推荐文章于 2022-07-05 01:24:34 发布

如果可以，可以如果

最新推荐文章于 2022-07-05 01:24:34 发布

阅读量433

点赞数 1

文章标签： html css html5 css3

本文链接：https://blog.csdn.net/qq_43687594/article/details/116237291

版权

效果图：
倾斜导航
分析：

导航栏横排显示，需要使用浮动
① float：lefft；实现横排显示
②中间间隔1像素使用margin-right：1px；最后面的 li 没有margin值，可以单独给最后一个 li 添加一个class名字，或者直接在css代码中给li:first-child ，设置右填充值为margin-right：0；
导航栏倾斜显示效果，同时文本正常显示，不发生倾斜
① 添加给 li 倾斜效果 transform: skew(-30deg);效果图中是向右倾斜，故倾斜值为负
②当只给li写倾斜时，导航中的文本也会一起倾斜，这不符合要求，所以需要在a标签中，将文本反向倾斜回来，因为a标签是内联元素，不能使用倾斜属性，所以需要先将a标签转换为块状元素，再添加反向倾斜值transform: skew(30deg);
效果图：
导航栏中间的元素倾斜，但左右两边的 li 正常显示
① 两端的 li 正常显示的同时，也要保证元素本身的大小不改变，所以需要padding填充值,但是填充之后又会超出导航栏的宽度,发生折行,所以同时又需要使用margin负值,将元素拉回来 padding-left: 10px; 和 margin-left: -10px;
②使用超出部分隐藏overflow：hidden；原理是隐藏掉填充多余倾斜的一部分
鼠标滑过实现元素变色效果
①因为元素宽高是写给了 li 所以鼠标滑过写给li：hover

完整代码

CSS部分：

<style>
        *{margin: 0;padding: 0;}
        li{list-style: none;}
        a{text-decoration: none;}
        .nav{
            width: 403px ;
            height: 30px;
            margin: 100px auto;          
            /* 超出元素部分隐藏，这是为了实现导航栏左右两边的li正常显示方正，原理是隐藏掉倾斜的一部分 */
            /* overflow: hidden; */
        }
        .nav li{
            height: 30px ;
            width: 100px;
            float: left;
            margin-right: 1px;
            background-color: rgb(191, 243, 175);
            text-align: center;
            line-height: 30px;
            /* 当只给li写倾斜时，导航中的文本也会一起倾斜，这不符合规范，所以需要再a标签中，将文本反向倾斜回来，同时需要给a标签转换为块状元素 */
            transform: skew(-30deg);
        }
        .nav li:first-child{
            /* 为了裁剪掉倾斜的部分,又不影响元素本身的大小,所以需要padding填充值,但是填充之后又会超出导航栏的宽度,发生折行,所以同时又需要使用margin负值,将元素拉回来 */
            padding-left: 10px;
            margin-left: -10px;
        }
        .nav li:last-child{
            margin-right: 0;
            padding-right: 10px;
            margin-right: -10px;
        }
        
        .nav li a{
            color: #fff;
            display: block;
            /* 将文本反向倾斜为正 */
            transform: skew(30deg);
        }
        .nav li:hover{
            background-color: pink;
        }
    </style>

HTMl代码部分：

<body>
    <ul class="nav">
        <li><a href="#">111</a></li>
        <li><a href="#">2222</a></li>
        <li><a href="#">333</a></li>
        <li><a href="#">666</a></li>
    </ul>
</body>