<!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. adb连接手机报错解决方案汇总(win7)

    >>adb devices常见错误:   >>解决方案汇总 检查端口是否占用:netstat -ano | findstr 5037 | findstr LISTENING 检 ...

  2. 转：java单例设计模式

    本文转自:http://www.cnblogs.com/yinxiaoqiexuxing/p/5605338.html 单例设计模式 Singleton是一种创建型模式,指某个类采用Singleton ...

  3. sqlser 2005 使用执行计划来优化你的sql

    一:sqlserver 执行计划介绍    sqlserver 执行计是在sqlser manager studio 工具中打开,是检查一条sql执行效率的工具.建议配合SET STATISTICS ...

  4. mango（mango ORM框架介绍）

    官网地址:http://www.jfaster.org/ mango的中文名是"芒果",它是一个极速分布式ORM框架.目前已有十多个大型线上项目在使用mango,在某一支付系统中, ...

  5. dubbo服务治理中间件,zookeeper注册中心

    对传统项目架构进行拆分: 集群概念: 面向服务分布式架构: 服务层提供被注册的对象需要实现序列化接口Serializable: 配置表现层和服务层: 依赖包: 服务层: <!-- 定义dubbo ...

  6. 【深度学习系列】用PaddlePaddle和Tensorflow实现GoogLeNet InceptionV2/V3/V4

    上一篇文章我们引出了GoogLeNet InceptionV1的网络结构,这篇文章中我们会详细讲到Inception V2/V3/V4的发展历程以及它们的网络结构和亮点. GoogLeNet Ince ...

  7. MySQL数据库 Event 定时执行任务.

    一.背景 由于项目的业务是不断往前跑的,所以难免数据库的表的量会越来越庞大,不断的挤占硬盘空间.即使再大的空间也支撑不起业务的增长,所以定期删除不必要的数据是很有必要的.在我们项目中由于不清理数据,一 ...

  8. Ant学习笔记

    前言:这段时间在学习Ant,发现这是一个很强大的构建工具.你可能使用了很长一段时间,才发现Ant能做数不完的事.总之,个人觉得,Ant学习门槛低,入门简单,能大概看懂程序,写一些简单的脚本即可,剩下在 ...

  9. OpenGL ES学习001---绘制三角形

    PS:OpenGL ES是什么? OpenGL ES (OpenGL for Embedded Systems) 是 OpenGL三维图形 API 的子集,针对手机.PDA和游戏主机等嵌入式设备而设计 ...

  10. PS字体倾斜、变形

    整体效果: 学习地址:http://www.wzsky.net/html/Photo/psjc/psc/125890_1.html 第一步新建画布,这个大家必须会,输入文字"基"基 ...