zoukankan      html  css  js  c++  java

  • 购物车css样式效果

     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>
  • 相关阅读:
    MYsql 之单标查询.
    MYSQL社区版安装手册
    爬虫框架学习
    celery_消息队列
    rabbitMQ消息队列
    Django分页设置
    Mysql-基础+安装指南
    super函数的用法
    hashlib 和loggin模块
    Python的魔法方法
  • 原文地址：https://www.cnblogs.com/oklfx/p/7499623.html
Copyright © 2011-2022 走看看