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>

购物车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. Effective Java 第三版——6. 避免创建不必要的对象

    Tips <Effective Java, Third Edition>一书英文版已经出版,这本书的第二版想必很多人都读过,号称Java四大名著之一,不过第二版2009年出版,到现在已经将 ...

  2. python+appium+unittest自动化测试框架环境搭建

    一.基础软件准备 1.python 版本最新版本,python的IDE使用pycharm.具体的下载链接: python https://www.python.org/ pycharm:https:/ ...

  3. 自学Python1.1-简介

    1.python语言介绍 python的创始人:Guido Van Rossum 2.python是一门什么样的语言 2.1  编程语言主要从以下几个角度进行分类:编译型,静态型,动态性,强类型定义语 ...

  4. 数据库、ArcCatalog空间数据源正常访问，数据库设置没问题时，ArcEngine连接SDE时报"ORA-12560: TNS: 协议适配器错误"的解决办法;ArcEngine连接SDE总结

    碰到的问题描述: 通过C# 基于ArcEngine写SDE直连的时候测试项目连接属性设置为如下: tPropSet.SetProperty("User", "GISDAT ...

  5. eclipse 代码 editor 界面出现奇怪符号解决

    Preferences->General->Editors->Text Editors->去掉 Show whitespace characters->apply

  6. Android studio导入eclipse项目（亲测）

    之前上网搜索的时候,网上都说先用eclipse导出gradle,之后再用Android Studio的import project导入,但是这个方法使用的过程中会出现许多错误,解决了一个又一个还是不得 ...

  7. ArcGIS API for JavaScript 4.2学习笔记[16] 弹窗自定义功能按钮及为要素自定义按钮（第五章完结）

    这节对Popups这一章的最后两个例子进行介绍和解析. 第一个[Popup Actions]介绍了弹窗中如何自定义工具按钮(名为actions),以PopupTemplate+FeatureLayer ...

  8. ES6 对象的扩展（下）

    属性的可枚举性 对象的每个属性都有一个描述对象(Descriptor),用来控制该属性的行为.Object.getOwnPropertyDescriptor方法可以获取该属性的描述对象. var ob ...

  9. chattr 命令详解

    chattr   作用: 改变文件属性,这项指令可改变存放在ext2文件系统上的文件或目录属性,这些属性共有一下8种模式 模式: a: 让文件或目录仅供附加用途 b: 不更新文件或目录的最后存取时间 ...

  10. python+selenium自动化测试_1

    前言 回顾一下python+selenium基础,并整理相关知识点,分享给有需要,在前进道路上的朋友. print打印 #打印Hello World print("Hello World&q ...