java京东左侧固定层_京东首页右侧固定层

需求说明

制作京东首页右侧的固定层,6个图标:京东会员、购物车、我的关注、我的足迹、我的消息和咨询JIMI

默认状态下仅显示图标,背景颜色为深灰色;当鼠标移至图标上时,背景颜色为深红色,并且显示文本

css

*{margin: 0; padding:0; font-size: 12px;}

ul,ol,li{list-style: none;}

#nav{width: 100px; margin: 0 auto;}

#nav li{height:36px;}

#nav li span{

display: block;

float: right;

width: 35px;

height: 35px;

border-bottom-left-radius: 5px;

border-top-left-radius: 5px;

background: #7a6e6e url("../images/toolbars.png") no-repeat;

}

#nav li span:hover{ background-color: red;}

#nav li:nth-of-type(1) span{background-position: 0px -15px;}

#nav li:nth-of-type(2) span{background-position: 0px -57px;}

#nav li:nth-of-type(3) span{background-position: 1px -106px;}

#nav li:nth-of-type(4) span{background-position: 0px -156px;}

#nav li:nth-of-type(5) span{background-position: 0px -200px;}

#nav li:nth-of-type(6) span{background-position: 2px -265px;}

#nav li p{

height: 35px;

text-align: left;

background: red;

color: #ffffff;

border-bottom-left-radius: 5px;

border-top-left-radius: 5px;

line-height: 35px;

padding-left: 10px;

display: none;

}

js(jquery-1.12.4.js")

$(document).ready(function () {

var index=-1;

$("#nav li>span").mouseover(function () {

index=$("#nav li>span").index($(this));

$("#nav li:eq("+index+") span~p").show();

}).mouseout(function () {

$("#nav li:eq("+index+") span~p").hide();

});

})

html

京东首页右侧固定层

就东会员

购物车

我的关注

我的足迹

我的消息

咨询JIMI

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/271151.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

云开发技术应用python_云开发技术应用(Python)

本书共14章,从Python语言的语法特性开始,介绍了Python的安装和配置、数据类型及表达式、流程控制、序列和字典、文件处理、函数等,由浅入深,循序渐进,逐步引入高级话题,包括面向对象编程、模块和包、异常处…

记录下Linux难记实用的命令

1 看文件大小:du -sm * | sort -n 2 合并多个文件,可以跨文件夹合并:cat *_.txt >> news.txt 3 给文件改编码:iconv -f GBK -t UTF-8 原文件名 -o 新文件名 4 查找文件内容:grep "thermcontact" */*.i…

系统设计基础:系统设计基本任务相关知识

1、系统设计的目的提前为系统指定蓝图,在各种技术和实施方法中进行权衡,精心设计,合理利用各种资源、最终确定新系统的详细设计方案。2、系统设计的内容系统设计的内容主要包括系统总体结构设计、代码设计、输出设计、输入设计、处理过程设计…

java7 3dm下载_3DM游戏运行库合集安装包v2.8

游戏运行库大全 游戏运行环境 所有游戏组件 32位 64位系统常用运行库合集 3DM游戏常用运行库安装包 下载 幸姨作品本安装包集成32位和64位运行库,是目前互联网上最新最全的常用运行库合集,能自动识别系统版本以提供适合您的组件,无人值守自动…

uci数据集_干货收藏!三大领域常用十大开源数据集

全文共1144字,预计学习时长2分钟机器学习的研究与实现离不开大数据。知晓通用的开源数据集,一方面可以验证自己算法,另一方面也可以与其他算法进行比较。本文介绍了计算机视觉、自然语言处理和语音识别三大领域的十个开源数据集以供你参考&am…

系统设计知识:系统设计的基本原理介绍

1、抽象抽象主要用来将复杂的现象简化到可以分析、实验或者可以理解的程度。抽象的最低层就是实现该软件的源程序代码。在进行模块化设计也可以有多个抽象层次,最高抽象层次的模块用概括的方式描述问题的解决方案。较低层次的模块是对更高抽象层次模块对问题描述的细…

Wpf Binding.Path设置

Binding.Path 获取或设置绑定源属性的路径。 每个绑定通常都具有四个组件:绑定目标对象、目标属性、绑定源,以及要使用的绑定源值的路径。有关这些数据绑定概念的更多信息,请参见数据绑定概述。 使用 Path 属性可以指定您要绑定到的源值&…

java内存溢出怎样查找代码_JVM - 内存溢出,问题查找

当内存溢出会抛出 java.lang.OutOfMemoryError: Java heap space 的异常,那这个时候怎样去分析到底哪里导致内存溢出呢?我们可以通过在vm的参数, -XX:HeapDumpOnOutOfMemoryError 记住这个理是大写XX。当内存溢出后,显示java.lang…

系统设计知识:系统模块结构设计知识笔记

1、什么是模块?模块可以认为是组成系统的基本单位,它具有可组合、分解、更换的特点。系统中任何一个处理功能都能看成是一个模块。模块根据具体化的程度可划分为逻辑模块和物理模块。模块的要素:输入输出:模块的输入来源和去向都是…

安卓扫一扫自动跳转软件_ipad软件使用技巧

适用于三款ipadipad pro 1ipad pro2ipad 2018三个ipad软件分别是notability、goodnotes、和MarginNote,这三个软件各有特点。其中notability、goodnotes是笔记软件,同样都可以自己创立笔记本配合苹果笔像手写一样做笔记,也可以导入pdf作为阅读…

第12章 使用Samba或NFS实现文件共享

章节简述: 本章节为读者讲述文件共享系统的作用,了解Samba与NFS服务程序的开发背景以及用法。 详细逐条讲解Samba服务配置参数,演示安全共享文件的配置策方法,并使用autofs服务程序自动挂载设备, 学会后即可实现Linux…

ExtClassLoader和AppClassLoader是Launcher类的两个内部类

sun.misc.Launcher他是一个java虚拟机的入口应用 看下Launcher类 ExtClassLoader和AppClassLoader是Launcher类的两个内部类

Java后端带参跨域访问_java后端解决请求跨域

跨域跨域:指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对javascript施加的安全限制。例如:a页面想获取b页面资源,如果a、b页面的协议、域名、端口、子域名不同,所进行的访问行动都是跨…

系统输入输入出设计相关知识介绍

1、输出设计输出设计主要包括:确定输出内容、选择输出设备与介质、确定输出格式三个方面的内容。确定输出内容:输出内容的设计首先要确定用户在使用信息方面的需求,然后设计输出信息的内容,包信息形式(括文字、图形、表…

计算机知识:电脑系统盘文件夹详解

今天给大家介绍一下电脑系统盘(C盘)的相关知识。C盘变红,是存储空间告急。C盘里通常都是安装的系统文件,一般情况下不放其他文件,如果放了可以转移到其他盘里去。还有一个就是电脑桌面,通常也是属于C盘空间…

python json dumps utf8_Python2操作JSON出现乱码的解决方案

其实刚刚写过一整篇Python编码问题的解决方案,由于JSON又是一种特殊案例(与库相关,与语言本身无关)所以就单独提出来说。我们来看一个从网上获取json并又存到本地文件的例子import requests,jsonr requests.get(https://api.github.com/repos/solomonxi…

【代码笔记】iOS-字体抖动动画

一,效果图。 二,代码。 ViewController.m #import "ViewController.h"interface ViewController ()endimplementation ViewController- (void)viewDidLoad {[super viewDidLoad];// Do any additional setup after loading the view, typicall…