CSS3仿GooglePlay菜单.hmtl

最新推荐文章于 2024-10-20 22:38:54 发布

转载最新推荐文章于 2024-10-20 22:38:54 发布 · 103 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/mawenbing/p/4913476.html

本文展示了一个使用CSS3实现的GooglePlay风格的菜单样式，包括不同类别的图标和导航功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
<head>
<!--gbk,gb2312 中文编码-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--页面三要素-->
<title>CSS3仿GooglePlay菜单</title>
<meta name="keywords" content="关键字,关键字" />
<meta name="description" content="描述" />
<!--js css-->
<style type="text/css">
body{background:#E5E5E5;}
ul,li{margin:0;padding:0;}
nav{width:200px;height:300px;background:rgba(245,245,245,0.95);box-shadow:0px 1px 6px #bebebe;margin:30px 0 0 200px;}
nav ul li{list-style:none;height:50px; position:relative;}
nav ul li a{color:#666;text-decoration:none;font-size:14px; position:absolute;left:60px;top:18px;width:140px; display:block;}
nav ul li a:hover{color:#fff;}
nav ul li:hover{width:200px;
/*transition-property:all;
transition-duration:0.4s;
transition-timing-function:ease;
transition-delay:0s;*/
transition:all ease 0.4s 0s;
}
.store{width:50px;height:50px;background:#B3C833;}
.movies{width:50px;height:50px;background:#CE5043;}
.music{width:50px;height:50px;background:#FB8521;}
.books{width:50px;height:50px;background:#1AA1E1;}
.magazines{width:50px;height:50px;background:#5E5CA6;}
.devices{width:50px;height:50px;background:#658092;}
nav ul li span.store_icon{position:absolute;left:10px;top:12px;width:26px;height:26px;background:url(images/icoa1.png) no-repeat;}
nav ul li span.movies_icon{position:absolute;left:10px;top:12px;width:26px;height:26px;background:url(images/icoa2.png) no-repeat;}
nav ul li span.music_icon{position:absolute;left:10px;top:12px;width:26px;height:26px;background:url(images/icoa3.png) no-repeat;}
nav ul li span.books_icon{position:absolute;left:10px;top:12px;width:26px;height:26px;background:url(images/icoa4.png) no-repeat;}
nav ul li span.magazines_icon{position:absolute;left:10px;top:12px;width:26px;height:26px;background:url(images/icoa5.png) no-repeat;}
nav ul li span.devices_icon{position:absolute;left:10px;top:12px;width:26px;height:26px;background:url(images/icoa6.png) no-repeat;}
</style>
</head>
<body>
<nav>
    <ul>
        <Li class="store"><span class="store_icon"></span><a href="#">首页</a></Li>
        <Li class="movies"><span class="movies_icon"></span><a href="#">影视</a></Li>
        <Li class="music"><span class="music_icon"></span><a href="#">音乐</a></Li>
        <Li class="books"><span class="books_icon"></span><a href="#">图书</a></Li>
        <Li class="magazines"><span class="magazines_icon"></span><a href="#">记事</a></Li>
        <Li class="devices"><span class="devices_icon"></span><a href="#">设备</a></Li>
    </ul>
</nav>
</body>
</html>

效果有木有，这插件&-7

分享：青海网 http://www.qhbang.com/

转载于:https://www.cnblogs.com/mawenbing/p/4913476.html