<!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>购物车效果</title>

         <style>

             body {

                 background: black;

             }

             nav {

                 width: 120px;

                 height: 40px;

                 background: #ccc;

                 margin-left: 300px;

                 position: relative;

             }

             nav a {

                 display: block;

                 width: 100%;

                 height: 100%;

                 transition: 0.1s 1s;

                 /*鼠标移开*/

             }

             nav:hover a {

                 transition: 0.1s;

                 /*鼠标越过*/

                 background: white;

                 color: #ff4400;

             }

             .sub {

                 position: absolute;

                 right: 0px;

                 width: 300px;

                 height: 0px;

                 background: white;

                 box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);

                 transition: 1s;

             }

             nav:hover .sub {

                 height: 150px;

             }

         </style>

     </head>

     <body>

         <nav>

             <a href="">购物车</a>

             <div class="sub">

                 子菜单

             </div>

         </nav>

     </body>

 </html>

购物车css样式效果的更多相关文章

  1. 记录几个常用的Css样式效果

    1.更改字体,图标大小小于12px无效的问题 若我们设置font-size:10px是不会有效果的,需要使用 transform: scale(0.68); 更改字体最小大小 2.设置div边框虚化, ...

  2. CSS样式之a标签（原文网址http://www.divcss5.com/shili/s57.shtml）

    这是个人在做网站的时候整理的关于a标签的使用方法,整理一下,方便下次使用. 一.a超链接的代码 <a href="http://www.baidu.com" target=& ...

  3. css样式实现字体删除线效果

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  4. iOS 加载本地 HTML 文件 CSS 样式图片无效果

    在开发的过程中,有时候需要加载一些 HTML 页面,对于不太复杂的界面,基本上都可以放到本地用 UIWebview 来加载,但是在开发过程中会碰到 UIWebview 加载出来的 HTML 页面没有图 ...

  5. 精通CSS+DIV网页样式与布局--CSS段落效果

    在上一篇博文中,小编主要详细的介绍了CSS是如何控制文字的显示效果,随着需求的不断变更,那么我们如何对段落进行相关操作,以达到我们想要的效果呢,接下来,为了需要,小编继续来完善CSS对段落的控制的显示 ...

  6. Github上html页面(包括CSS样式和JS效果)如何显示出来

    在看Github上项目时,发现有的html页面效果能很好的展现出来,而有的则不能.对这个问题很好奇,因此研究了一下,最终做到了将页面展示出来的目的.下面以我的Github的开源项目bootstrap- ...

  7. 后端数据中含有html标签和css样式，前端如何转译展示样式效果。

    后端含有html标签和css样式的数据: domain="<span style='color:red'>www.baidu.com</span>" (vu ...

  8. 修改css样式+jq中的效果+属性操作+元素操作

    :checked    选框选中的 一.修改css样式: 1.参数只写属性名,则返回属性值 $(this).css( ' color ');   //300px 2.参数是属性名,属性值,逗号分隔,是 ...

  9. chrome DevTools 里面 css样式里面 勾上 :hover 会将鼠标移上的效果一直保持，技巧：要在鼠标上的 div上 勾 :hover

    chrome DevTools 里面 css样式里面 勾上 :hover 会将鼠标移上的效果一直保持,技巧:要在鼠标上的 div上 勾 :hover

随机推荐

  1. 自学Python2.4-基本数据类型-字典dict(objct)

    Python dict方法总结 一.字典介绍 1.字典概述 ①字典是python中唯一内建的映射类型.又称关联数组或散列②映射类型对象里哈希值(键,key)和指向的对象(值,value)是一对多的的关 ...

  2. 青否云 - 小程序待办事项 jquery开源系统

    青否云最新开源系统:小程序待办事项 jquery-demo 青否云 Jquery demo 下载地址:https://github.com/qingful/jquery-demo 官网 http:// ...

  3. OC学习14——谓词

    一.谓词的基本概念与使用 1.谓词(NSPredicate)用于定义一个逻辑条件,通过该条件可执行搜索或内存中的过滤操作.上一篇文章中介绍的集合都提供了使用谓词对集合进行过滤的方法.OC中的谓词操作是 ...

  4. Java 银行家算法

    实验存档,代码特别烂.. 测试.java package operating.test; import operating.entity.bank.Bank; import operating.ent ...

  5. [知了堂学习笔记]_用JS制作《飞机大作战》游戏_第2讲（四大界面之间的跳转与玩家飞机的移动）

    一.通过点击按钮事件,实现四大界面之间的跳转: (一)跳转的思路: 1.打开软件,只显示登录界面(隐藏游戏界面.暂停界面.玩家死亡界面) 2.点击微信登录(QQ登录)跳转到游戏界面,隐藏登录界面 3. ...

  6. jmeter通过org.sqlite.JDBC驱动连接db数据库

    最近遇到个项目,默认业务库为内置db数据库,在性能脚本编辑过程中要通过正则表达式提取器(关联)获取对应的id号,通过该id号到db数据库中查找对应的数据源name字段内容,为下一个post请求做par ...

  7. CPP--正码，反码，补码~附整数溢出的探讨

    之前说到了long的争议(http://www.cnblogs.com/dotnetcrazy/p/8059210.html),这边就不用long来举例了,用int吧 可以看一下这篇文章(http:/ ...

  8. Linux中gcc编译器的用法

    在Linux环境下进行开发,gcc是非常重要的编译工具,所以学习gcc的基本常见用法时非常有必要的. 一.首先我们先说明下gcc编译源文件的后缀名类型 .c为后缀的文件,C语言源代码文件:  .a为后 ...

  9. 鸟哥的linux私房菜学习-（五）补充：重点回顾

    为了避免瞬间断电造成的Linux系统危害,建议做为服务器的Linux主机应该加上不断电系统来持续提供稳定的电力: 默认的图形模式登陆中,可以选择语系以及作业阶段.作业阶段为多种窗口管理员软件所提供,如 ...

  10. Ubuntu安装微信

    1.系统是Ubuntu 16.04 64位系统,在网上先去下载electronic-wechat-Linux         https://github.com/geeeeeeeeek/electr ...