<!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. 数值函数ROUND(四舍五入)，TRUNC（不四舍五入），MOD

  2. 【python】for循环

    >>> exp='welcom to python'>>> for i in exp: print(i,end=' ') w e l c o m t o p y t ...

  3. iOS 视频开发学习

    原文:浅谈iOS视频开发 这段时间对视频开发进行了一些了解,在这里和大家分享一下我自己觉得学习步骤和资料,希望对那些对视频感兴趣的朋友有些帮助. 一.iOS系统自带播放器 要了解iOS视频开发,首先我 ...

  4. iis 10 ftp 被动模式配置

    第一步: 进入 Server Level 的FTP Firewall Support 第二步: 在 Data Channel Port Range 下配置 Passive mode 的端口号范围,注意 ...

  5. VMware的一些总结

    一.虚拟主机联网的三种方式: 1.仅主机(Host Only),虚拟主机只能与宿主机联网通信,无法访问外网和宿主机所在局域网的其它主机. 2.桥接(Bridge),在桥接模式下,虚拟主机就像是宿主机所 ...

  6. xamarin android如何监听单击事件

    在xamarin android单击事件是最基础的事情,看过菜鸟上的android教程时,java写的都是监听事件,为一个按钮,单选按钮.多选按钮的单击事件有三种,前面两种用的非常普遍,也很简易,我这 ...

  7. ArcGIS API for JavaScript 4.2学习笔记[22] 使用【QueryTask类】进行空间查询 / 弹窗样式

    上一篇写道,使用Query类进行查询featureLayer图层的要素,也简单介绍了QueryTask类的使用. 这一篇博文继续推进,使用Query类和QueryTask类进行空间查询,查询USA的著 ...

  8. NET Framework 版本和依赖关系

    原文:https://docs.microsoft.com/zh-cn/dotnet/framework/migration-guide/versions-and-dependencies 每个版本的 ...

  9. canvas学习api

    1.canvas.getContext():获取渲染上下文和绘画功能: 一.绘制矩形 2.ctx.fillRect(x,y,width,height):绘制矩形: 3.ctx.strokeRect(x ...

  10. 虚拟机下linux系统安装nginx

    近在windows虚机下安装nginx,也遇到部分问题,写篇随笔总结一下 一.安装虚机 windows下安装虚拟机我就不说了,一搜一大把,一直下一步就ok了 二. 打开虚拟安装nginx 1.选择版本 ...