<!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. 青否云 - 小程序待办事项 jquery开源系统

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

  2. 安装eclipse时跳转到网页提示JRE Missing

    可能的原因:jdk与安装的eclipse不兼容,可能64位机器安装了32位的jdk,导致64位的eclipse不能识别.

  3. IOS学习1——IOS应用程序的生命周期及基本架构

    一.应用程序的状态和多任务 有时系统会从app一种状态切换另一种状态来响应系统发生的事件.例如,当用户按下home键.电话打入.或其他中断发生时,当前运行的应用程序会切换状态来响应.应用程序的状态有以 ...

  4. mac上虚拟机安装旧版本的macosx 10.8

    前言 由于测试的需要,需要10.8的macosx,但又不想降级自己mac版本,所以还是装虚拟机,Parallels Desktop试验了安装不了osx,就换VMware Fusion,发现是可以的. ...

  5. xcode编译报错unknown error -1=ffffffffffffffff Command /bin/sh failed with exit code 1

    升级完xcode9.1之后,编译项目出现如下错误: CI今日构建时报出如下错误: /Users/xxx/Library/Developer/Xcode/DerivedData/Snowball-ebl ...

  6. HttpClient4.5 post请求xml到服务器

    1.加入HttpClient4.5和junit依赖包 <dependencies> <dependency> <groupId>org.apache.httpcom ...

  7. P、NP、NP完全问题

    如果一个算法的最差时间效率属于O(p(n)),则该算法可以在多项式的时间内对问题进行求解,其中p(n)是输入规模n的一个多项式函数. 可以在多项式时间内求解的问题是易解的.不能在多项式时间内求解的问题 ...

  8. 原生JavaScript实现一个简单的todo-list

    直接上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  9. 微信小程序如何开发制作

    微信小程序如何开发制作 微容SMO是一款微信小程序的免费在线制作工具,用户在微容平台上无需编辑代码,可通过拖拽式操作即可完成小程序的制作,真正意义上实现了小程序零代码免费制作! 消除技术门槛:无需代码 ...

  10. 前端开发chrome console的使用 ：评估表达式 – Break易站

    本文内容来自:chrome console的使用 :评估表达式 – Break易站 从 DevTools 控制台使用它的某个评估功能查看页面上任意项目的状态. DevTools 控制台让您可通过特定方 ...