pptv首页导航效果

最新推荐文章于 2022-11-13 09:14:18 发布

u011263845

最新推荐文章于 2022-11-13 09:14:18 发布

阅读量884

点赞数 1

分类专栏： html5&&css3 文章标签：导航 pptv

本文链接：https://blog.csdn.net/u011263845/article/details/47907413

版权

html5&&css3 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

周末闲时打开pptv看直播，然后发现它的导航改版了，还是比较酷的。出于对同行对热爱，自己也试着实现了一下：

demo：http://output.jsbin.com/pomimajidu
pptv效果：www.pptv.com

html：

    <ul class="nav">
        <li><a href="" id="pagenav_tv" channel="2" target="_parent">栏目A<i class=""></i></a>
        </li>
        <li><a href="" id="pagenav_tv" channel="2" target="_parent">栏目B<i class=""></i></a>
        </li>
        <li><a href="" id="pagenav_tv" channel="2" target="_parent">栏目C<i class=""></i></a>
        </li>
        <li><a href="" id="pagenav_tv" channel="2" target="_parent">栏目D<i class=""></i></a>
        </li>
        <li><a href="" id="pagenav_tv" channel="2" target="_parent">栏目E<i class=""></i></a>
        </li>
    </ul>

css

        * {
            padding: 0;
            margin: 0;
        }

        ul {
            margin: 100px 100px;
        }

        ul li {
            float: left;
            list-style: none;
        }

        ul li a {
            position: relative;
            float: left;
            display: inline;
            height: 40px;
            line-height: 40px;
            margin: 0 18px 0 0;
            font-size: 14px;
            font-family: \5FAE\8F6F\96C5\9ED1;
            color: #333;
            background: #fff;
            text-decoration: none;
            outline: none;
            transition: all .5s linear;
        }

        ul li a:hover {
            color: #3194f6;
        }

        ul li a:hover i {
            bottom: -22px;
        }

        ul li a i {
            position: absolute;
            left: 35%;
            bottom: 0;
            width: 10px;
            height: 20px;
            background: url(http://static9.pplive.cn/pub/flagment/v_20150612114125/modules/g-1408-hd/images/icon-drop-tj.png) no-repeat;
            transition: all .5s ease-in;
            z-index: -1;
        }