利用雪碧图及css自制的动态变色导航栏

最新推荐文章于 2023-05-29 14:30:14 发布

blog_liuliang

最新推荐文章于 2023-05-29 14:30:14 发布

阅读量2w

点赞数 2

文章标签： css 导航 css-sprit

本文链接：https://blog.csdn.net/blog_liuliang/article/details/49389925

版权

学习同时被 2 个专栏收录

29 篇文章 0 订阅

订阅专栏

前端

15 篇文章 0 订阅

订阅专栏

利用雪碧图及css自制的动态变色导航栏

<html>

 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <title>navgation</title>
     <style type="text/css">
      *{margin:0;padding: 0;} 
      ul{list-style: none;}
      li {
          position: relative;
          display: block;
          overflow: hidden;

         }  
     li i{display: inline;
         float: left;
         height: 50px;
         width: 50px;
         } 
     li h3{
           padding-top: 13.5px;
           padding-bottom: 13px;
           padding-left: 60px;
           font-size:20px;
           background-color: #fff;

         }
      .cat{
         margin:50px 500px;
        position: relative;
           width: 200px;
           background: #f8f8f8;
           border: 1px solid #bbb;
         }
      .cat li i{background-image:url(pic.png);}
      .cat-1 i{background-position: 0 0;} 
      .cat-2 i{background-position: 0 -50px;}
      .cat-3 i{background-position: 0 -100px;}
      .cat-4 i{background-position: 0 -150px;}
      .cat-5 i{background-position: 0 -200px;}
      .cat-6 i{background-position: 0 -250px;}
       .yu1:hover{background: #b3c82f;}
       .yu2:hover{background: #bc5b3a;}
       .yu3:hover{background: #f88623;}
       .yu4:hover{background: #1ea0dc;}
       .yu5:hover{background: #5e5e9e;}
       .yu6:hover{background: #658093;}


     </style>
 </head>
 <body>
     <div class="cat">
       <ul>
        <li class="cat-1"><i></i><h3 class="yu1">Store</h3></li>
        <li class="cat-2"><i></i><h3 class="yu2">Music</h3></li>
        <li class="cat-3"><i></i><h3 class="yu3">Books</h3></li>
      <li class="cat-4"><i></i><h3 class="yu4">Magazines</h3></li>
        <li class="cat-5"><i></i><h3 class="yu5">Devices</h3></li>
        <li class="cat-6"><i></i><h3 class="yu6">Devices</h3></li>
       </ul>
     </div>
 </body>
</html>

blog_liuliang

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
利用雪碧图及css自制的动态变色导航栏

利用雪碧图及css自制的动态变色导航栏<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>navgation</title> <style type="text/css"> *{margin:0;padding: 0;} u
复制链接

扫一扫

专栏目录