做这个东西的出发点很简单,就是把做过的东西

这件事的出发点很简单。就是把做过的事情封装起来易语言组件代码编辑框指示器易语言组件代码编辑框指示器,写博客,记录下来。项目需要使用后,直接使用即可。方法很简单。如果你不喜欢它,不要喷它。拿去试试。

直接编码

html部分:

CSS样式部分:

.ul{
            width: 700px;
            height: 80px;
            margin:20px auto;
            border-top:1px solid red;
            border-bottom:1px solid red;
        }
        .ul ul{
            width: 100%;
            height: 100%;
        }
        .ul ul li{
            width: 18%;
            height: 80px;
            float: left;
            list-style: none;
            padding: 0 1%;
        }
        .ul ul li a{
            display: block;
            height: 100%;
            color: #333;
            text-align: center;
            line-height: 80px;
            text-decoration: none;
            position: relative;
        }
        .ul ul li a:before{
            content: "";
            width: 0;
            height: 0;
            border-right: 40px solid transparent;
            border-left: 40px solid transparent;
            border-bottom: 12px solid red;
            position: absolute;
            left: 18%;
            bottom: 0;
            opacity: 0;
        }
        .ul ul li a:after{
            content: "";
            width: 0;
            height: 0;
            border-right: 40px solid transparent;
            border-left: 40px solid transparent;
            border-top: 12px solid red;
            position: absolute;
            left: 18%;
            top: 0;
            opacity: 0;
        }
        .ul ul li:hover a:before{
            opacity: 1;
        }
        .ul ul li:hover a:after{
            opacity: 1;
        }

图片[1]-做这个东西的出发点很简单,就是把做过的东西-老王博客

效果图:

默认状态:

选定状态:

到此结束,简单粗暴,通俗易懂!

© 版权声明
THE END
喜欢就支持一下吧
点赞0
分享
评论 抢沙发

请登录后发表评论