购物车css样式效果

最新推荐文章于 2024-04-23 20:18:06 发布

weixin_30394669

最新推荐文章于 2024-04-23 20:18:06 发布

阅读量1.9k

点赞数

文章标签：前端 ViewUI

原文链接：http://www.cnblogs.com/oklfx/p/7499623.html

版权

 1 <!DOCTYPE html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <title>购物车效果</title>
 7 
 8         <style>
 9             body {
10                 background: black;
11             }
12             
13             nav {
14                 width: 120px;
15                 height: 40px;
16                 background: #ccc;
17                 margin-left: 300px;
18                 position: relative;
19             }
20             
21             nav a {
22                 display: block;
23                 width: 100%;
24                 height: 100%;
25                 transition: 0.1s 1s;
26                 /*鼠标移开*/
27             }
28             
29             nav:hover a {
30                 transition: 0.1s;
31                 /*鼠标越过*/
32                 background: white;
33                 color: #ff4400;
34             }
35             
36             .sub {
37                 position: absolute;
38                 right: 0px;
39                 width: 300px;
40                 height: 0px;
41                 background: white;
42                 box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
43                 transition: 1s;
44             }
45             
46             nav:hover .sub {
47                 height: 150px;
48             }
49         </style>
50     </head>
51 
52     <body>
53 
54         <nav>
55             <a href="">购物车</a>
56             <div class="sub">
57                 子菜单
58             </div>
59         </nav>
60     </body>
61 
62 </html>

转载于:https://www.cnblogs.com/oklfx/p/7499623.html

weixin_30394669

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
购物车css样式效果

1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>购物车效果</title> 7 8 <style> 9 ...
复制链接

扫一扫