粗略的仿京东(部分仿)

 

Document

 


 

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

 

 

 

 

Hi~欢迎来到京东!

登录

注册

 

  • 视频/娱乐

    • 服务类型

    • 充值时长

    • ¥0.00
    • 直充

      卡密

    •  

    • 游戏

    • 面值

    • ¥0.00
    • 直充

      卡密

    • 月卡低至10元

     

    • QQ

    • 面值

       

    • ¥0.99
    • 直充

       

    • 月卡低至10元

  • 点卡
  • QQ

//部分样式代码未上传

 

JS部分;

 

$(function () {

 

// 点Xtop消失逻辑代码

$(".iconfont").on("click", function () {

$(".top").css({

"display": "none"

})

});

// 1鼠标移入

$(".unshow0").css({

"display": "none"

})

$(".hoverchange1").on("mouseover", function () {

$(".unshow0").css({

"display": "block"

})

$(".firbox").css({

"display": "block",

"background-color": "#fff"

})

 

})

// 第一部分隐藏区域鼠标移入显示

$(".firbox").on("mouseover", function () {

$(".unshow0").css({

"display": "block"

})

$(".hoverchange1").css({

"background-color": "#fff"

})

$(".firbox").css({

"display": "block",

"background-color": "#fff"

})

})

// 第一部分隐藏区域鼠标移出显示

$(".firbox").on("mouseout", function () {

 

$(".hoverchange1").css({

"background-color": "#e3e4e5",

})

$(".unshow0").css({

"display": "none"

})

})

 

// 1鼠标移出

$(".hoverchange1").on("mouseout", function () {

 

$(".firbox").css({

"display": "none"

})

$(".unshow0").css({

"display": "none"

})

$(".zero").css({

"display": "block"

})

})

 

// 2鼠标移入

$(".hoverchange2").on("mouseover", function () {

$(".unshow0").css({

"display": "block"

})

$(".secbox").css({

"display": "block",

"background-color": "#fff"

}).siblings().css({

"display": "none"

})

})

// 第二部分隐藏区域鼠标移入显示

$(".secbox").on("mouseover", function () {

$(".unshow0").css({

"display": "block"

})

$(".hoverchange2").css({

"background-color": "#fff"

})

$(".secbox").css({

"display": "block",

"background-color": "#fff"

})

})

// 第二部分隐藏区域鼠标移出显示

$(".secbox").on("mouseout", function () {

 

$(".hoverchange2").css({

"background-color": "#e3e4e5",

})

})

// 2鼠标移出

$(".hoverchange2").on("mouseout", function () {

$(".secbox").css({

"display": "none"

})

$(".unshow0").css({

"display": "none"

})

})


 

// 3鼠标移入

$(".hoverchange3").on("mouseover", function () {

$(".unshow0").css({

"display": "block"

})

$(".thibox").css({

"display": "block",

"background-color": "#fff"

}).siblings().css({

"display": "none",

})

})

// 第三部分隐藏区域鼠标移入显示

$(".thibox").on("mouseover", function () {

$(".unshow0").css({

"display": "block"

})

$(".hoverchange3").css({

"background-color": "#fff"

})

$(".thibox").css({

"display": "block",

"background-color": "#fff"

})

})

// 第三部分隐藏区域鼠标移出显示

$(".thibox").on("mouseout", function () {

 

$(".hoverchange3").css({

"background-color": "#e3e4e5",

})

})

// 3鼠标移出

$(".hoverchange3").on("mouseout", function () {

$(".thibox").css({

"display": "none"

})

 

$(".unshow0").css({

"display": "none"

})

})


 

// 4鼠标移入

$(".hoverchange4").on("mouseover", function () {

$(".unshow0").css({

"display": "block"

})

$(".foubox").css({

"display": "block",

"background-color": "#fff"

}).siblings().css({

"display": "none",

})

})

 

// 第四部分隐藏区域鼠标移入显示

$(".foubox").on("mouseover", function () {

$(".unshow0").css({

"display": "block"

})

$(".hoverchange4").css({

"background-color": "#fff"

})

$(".foubox").css({

"display": "block",

"background-color": "#fff"

})

})

 

// 第四部分隐藏区域鼠标移出显示

$(".foubox").on("mouseout", function () {

 

$(".hoverchange4").css({

"background-color": "#e3e4e5",

})

})

 

// 4鼠标移出

$(".hoverchange4").on("mouseout", function () {

$(".foubox").css({

"display": "none"

})

$(".unshow0").css({

// "display": "none"

})

})

})


 

//asideleft鼠标悬停出现隐藏页

var leftlength = document.getElementsByClassName("li");

 

$(".asideleft li").on("mouseover", function () {

$(".mouseoverappera").css("display", "block");

var index = $(this).index();

$(leftlength).eq(index).css({

"display": "block"

}).siblings().css({

"display": "none"

})

 

$(this).on("mouseout", function () {

$(".mouseoverappera").css("display", "none");

$(leftlength).eq(index).css({

"display": "none"

})

 

})

})


 

// aside部分主要为12宫格逻辑部分

 

// redline移动逻辑

$(".moveline1").on("mouseover", function () {

$(".redline").animate({

"margin-left": 12

}, 350);

$(".list2").css("display", "none");

$(".list1").css("display", "block");

})

$(".moveline2").on("mouseover", function () {

$(".redline").animate({

"margin-left": 72

}, 350);

$(".list1").css("display", "none");

$(".list2").css("display", "block");

})

 

//12宫格鼠标悬停变红逻辑

var li1 = document.getElementsByClassName('li1');

var i1 = document.getElementsByClassName("i1");

for (let i = 0; i < li1.length; i++) {

li1[i].onmouseover = function () {

var ind = $(this).data("index");

$(this).children("a").css("color", "#f00");

$(i1).eq(ind).css("color", "#f00");

 

// 离开变回原来的逻辑

$(this).on("mouseout", function () {

var ind1 = $(this).data("index");

$(this).children("a").css("color", "#bea68d");

$(i1).eq(ind).css("color", "#bea68d");

})

}

}


 

// 九宫格前四个鼠标移动向上移动逻辑

var li2 = document.getElementsByClassName("li2");

var redlinex = document.getElementsByClassName("redline5");

// 鼠标悬停在话费机票酒店游戏时切换不同盒子的逻辑

var changeboxx = document.getElementsByClassName("changebox5");

 

for (var i = 0; i < li2.length; i++) {

li2[i].onmouseover = function () {

var ind = $(this).data("index");

$(this).children("a").css("color", "#f00");

$(changeboxx).eq(ind).css("display", "block").siblings(".changebox5").css("display", "none");

$(i1).eq(ind).css("color", "#f00");

$(".right_box2_3").animate({

"top": "235"

}, 100, function () {

for (let i = 0; i < 4; i++) {

i1[i].style.display = "none";

}

})

// 12宫格前四个底部红色线出现

 

$(this).on("mouseover", function () {

$(this).css({

"border-bottom": "2px solid #f00"

}).siblings().css({

"border-bottom": "none"

})

})

$(".close").css("display", "block");

$(".close").animate({

"bottom": "150"

})

// 12宫格前四个底部内容框出现

$(".changebox").animate({

"bottom": "-35"

}, 300)


 

// 离开变回原来的逻辑

$(this).on("mouseout", function () {

var ind1 = $(this).data("index");

$(this).children("a").css("color", "#bea68d");

$(i1).eq(ind).css("color", "#bea68d");

 

})

}

}

 

// 话费充值等鼠标悬停出现不同div盒子逻辑

var huafeiul = document.getElementsByClassName("huafei_00");

var changeboxa = document.getElementsByClassName("changeboxa");

for (let i = 0; i < changeboxa.length; i++) {

changeboxa[i].onmouseover = function () {

var icount = i;

$(huafeiul).eq(icount).css("display", "block").siblings().css("display", "none");

$(".changeboxa1").css("display", "inline-block")

}



 

}



 

// 点击关闭图标,12宫格变回原来的样式逻辑

$(".close").on("click", function () {

$(".close").css("display", "none");

$(changeboxx).css("display", "none");

$(".right_box2_3").animate({

"top": "270"

}, 50, function () {

for (let i = 0; i < 4; i++) {

i1[i].style.display = "block";

}

})

// 12宫格回归原位的时候,1-4宫格的底部的红线消失

$(li2).css("border-bottom", "none");

})

 

lunbo.js部分:

 

var left = document.getElementById("left");

var right = document.getElementById("right");

var img = document.getElementsByClassName("img1");

// console.log(img);

 

var li = document.getElementsByClassName("changecolor1");

// console.log(li);

 

// 默认的索引为0;

var index = 0;

 

// 默认改变的索引也为0;

var changeindex = 0;

var changeindex1 = 0;

 

// 左侧点击事件

left.onclick = function () {

 

// 1.0根据索引获取到当前对象

for (var i = 0; i < 8; i++) {

// 当索引等于遍历的值的时候

if (i == index) {

// 原先的索引加1

changeindex = index - 1;

 

// 这是跟着图片改变下面的圆圈的样式

$(li).eq(changeindex).addClass("changecolor");

$(li).eq(index).removeClass("changecolor");

 

// 当前索引小于0的时候,要进行改变,将当前索引变成最后一个图片的索引

if (changeindex < 0) {

changeindex = 7;

$("img").eq(index).css("display", "none");

$("img").eq(changeindex).css("display", "block");

 

}

// 原先样式隐藏

$("img").eq(index).css("display", "none");

// 加1以之后的索引的样式显示

$("img").eq(changeindex).css("display", "block");

 

}

}

// 将增加后的索引赋值给index,作为后来再次右侧点击事件的时候索引;

index = changeindex;

}

 

// 右侧点击事件

right.onclick = function () {

 

// 调用右侧点击事件

move();

}

 

// 鼠标点击圆圈引发的图片改变逻辑,点击那张图片就到那张图片的

// for (let i = 0; i < li.length; i++) {

// li[i].onclick = function () {

// // 点击当前索引变成i

// index = i;

// // 当前索引对应的图片显示,其他隐藏

// $("img").eq(i).css("display", "block").siblings("img").css("display", "none");

// // 将所有圆圈的样式移除

// $("#ul3 li").removeClass("changecolor");

// // 让点击的圆圈样式显示

// $("#ul3 li").eq(index).addClass("changecolor");

 

// }

// }





 

// ie8时点击圆点出现相对的页面则使用这个这段代码

 

function b(i) {

return function c() {

// 点击当前索引变成i

index = i;

// 当前索引对应的图片显示,其他隐藏

$("img").eq(i).css("display", "block").siblings("img").css("display", "none");

// 将所有圆圈的样式移除

$(li).removeClass("changecolor");

// 让点击的圆圈样式显示

$(li).eq(index).addClass("changecolor");

 

}

}

 

for (var i = 0; i < li.length; i++) {

li[i].onclick = b(i);


 

}

 

// 封装右侧点击事件

 

function move() {

 

// 1.0根据索引获取到当前对象

for (var i = 0; i < 8; i++) {

// 当索引等于遍历的值的时候

if (i == index) {

// 原先的索引加1

changeindex1 = index + 1;

// 原先样式隐藏

 

// 这是跟着图片改变下面的圆圈的样式

$(li).eq(changeindex1).addClass("changecolor");

$(li).eq(index).removeClass("changecolor");

 

$("img").eq(index).css("display", "none");

 

// 加1以之后的索引的样式显示

$("img").eq(changeindex1).css("display", "block");

// 进行判断,如果index超过4的时候,索引要变成0;重新开始

if (changeindex1 > 7) {

$("img").eq(index).css("display", "none");

$("img").eq(changeindex1).css("display", "block");

changeindex1 = 0;

$(li).eq(changeindex1).addClass("changecolor");

}

}

}

// 将增加后的索引赋值给index,作为后来再次右侧点击事件的时候索引;

index = changeindex1;

}

 

// 定时器,隔几秒就图片变化一次(调用move())


 

setInterval(function () {

move();

}, 2000);

// IE浏览器上要使用上面这种格式,我去

 

// setInterval(()=>{

// move();

// },2000);

 


CSS样式:

第一部分:

#box {

width: 600px;

height: 480px;

/* border: 1px solid #f00; */

text-align: center;

margin: 0 auto;

float: left;

overflow: hidden;

position: relative;

}

 

/* 图片 */

 

.lunbo #box ul li img {

float: left;

/* width: 100%; */

/* display: none; */

width: 590px;

height: 480px;

/* padding: 10px 10px 0 10px!important; */

z-index:4;

}

 

#box ul li img:first-child {

display: block;

}

 

#littlecircle {

width: 150px;

height: 30px;

line-height: 30px;

/* border: 1px solid #f00; */

position: absolute;

bottom: 10px;

left: 16%;

margin-left: -50px;

}

 

#littlecircle #ul3 {

overflow: hidden;

width: 150px;

height: 30px;

line-height: 30px;

/* z-index:4; */

}

 

.ul3 li {

/*这里记住设置的时候不要前面使用id,不然会在修改样式的时候要用到important,不好修改,而且这里在IE8兼容的时候就是因为(#littlecircle #ul li)这样使用的导致在IE8浏览器的时候,后来添加的样式addClass(changecolor)添加样式border-radius添加失效 */

width: 12px;

height: 12px;

cursor: pointer;

border-radius: 50%;

behavior: url(./PIE.htc);

position: relative;

/*支持IE8圆角 不行就加 position:relative;再不行就加z-index: 10 */

/* background: #f00; */

float: left;

border-radius: 50%;

margin-left: 4px;

margin-top: 5px;

overflow: hidden;

border: 3px solid #AEA8B2;

opacity: 1;

text-shadow: 1px 1px #fff;

}

 

/* 默认的样式 */

 

.changecolor {

width: 15px !important;

height: 15px !important;

cursor: pointer;

background: #fff;

float: left;

margin-left: 4px;

margin-top: 4px!important;

z-index: 4;

border: 3px solid #E2B5E6 !important;

}

 

#left {

width: 40px;

height: 70px;

background: url("./img/arrow/arr.png") 0px 0px no-repeat;

position: absolute;

left: 15px;

top: 50%;

margin-top: -35px;

}

 

#right {

width: 40px;

height: 70px;

background: url("./img/arrow/arr.png") -44px 0px no-repeat;

position: absolute;

right: 415px;

top: 50%;

margin-top: -35px;

}

 

CSS部分:

第二部分:

@font-face {

font-family: 'iconfont';

src: url('./font/iconfont.eot');

src:

url('./font/iconfont.eot?#iefix') format('embedded-opentype'),

url('./font/iconfont.woff') format('woff'),

url('./font/123456iconfont.ttf') format('truetype'),

url('./font/iconfont.svg#iconfont') format('svg');

 

}

 

.iconfont {

font-family: "iconfont" !important;

font-size: 16px;

font-style: normal;

-webkit-font-smoothing: antialiased;

-webkit-text-stroke-width: 0.2px;

-moz-osx-font-smoothing: grayscale;

}

 

* {

padding: 0;

margin: 0 auto;

list-style: none;

box-sizing: border-box;

}

 

.app {

width: 100%;

background: #e3e4e5;

}

 

.top {

width: 100%;

height: 80px;

background: #000;

z-index: 0;

}

 

.top .top_box {

width: 1190px;

height: 80px;

overflow: hidden;

}

 

.top_box_box1 {

width: 190px;

height: 78px;

float: left;

}

 

.top_box_box2 {

width: 1000px;

height: 78px;

float: left;

position: relative;

}

 

.top_box_box2 i {

position: absolute;

top: 0;

right: 0;

font-size: 20px;

font-weight: 400;

color: #666;

}

 

.nav {

width: 100%;

height: 30px;

background: #e3e4e5;

position: relative;

z-index: 0;

}

 

.nav_box {

width: 1190px;

height: 30px;

position: relative;

overflow: hidden;

 

}

 

.nav_box_box1 {

width: 258px;

height: 30px;

line-height: 30px;

float: left;

overflow: hidden;

position: relative;

}

 

.nav_box_box1 i {

display: block;

float: right;

color: #f00;

position: absolute;

right: 32px;

top: 6px;

}

 

.nav_box_box1 p {

height: 30px;

line-height: 30px;

float: right;

font-size: 12px;

}

 

.nav_box_box2 {

width: 932px;

height: 30px;

float: right;

}

 

.nav_box_box2 ul {

padding-left: 224px;

overflow: hidden;

 

}

 

.nav_box_box2 ul li:first-child {

width: 148px;

height: 30px;

}

 

.nav_box_box2 ul li {

width: 80px;

float: left;

font-size: 14px;

line-height: 30px;

text-align: center;

}

 

.nav_box_box2 ul .sanjiao {

position: relative;

}

 

.nav_box_box2 ul .sanjiao span {

position: absolute;

bottom: 0;

left: 40px;

width: 0;

height: 0;

border: 5px solid transparent;

border-bottom: 5px solid white;

display: inline-block;

}

 

.nav_box_box2 ul li i {

color: #999;

margin-top: 2px;

}

 

.iconfont {

font-size: 14px;

cursor: pointer;

}

 

.line:after {

content: "";

height: 12px;

width: 1px;

background: #ccc;

display: block;

position: absolute;

top: 10px;

 

}

 

.nav_box_box2 ul li a {

 

text-decoration: none;

font-size: 12px;

color: #999;

}

 

.hoverchange a:hover {

color: #f00;

}

 

.nav_box_box2 ul li a:nth-child(2) {

color: #f00;

}

 

.unshow0 {

width: 1190px;

height: 150px;

position: absolute;

margin: 0 auto;

z-index: 4;

}

 

.zero {

width: 190px;

height: 170px;

float: left;

position: absolute;

top: -29px;

left: 0;

z-index: 4;

background: #fff;

}

 

.zero img {

display: block !important;

}

 

/* 第一隐藏部分样式 */

.firbox {

width: 294px;

height: 150px;

border: 1px solid #f00;

margin-left: 672px;

float: left;

z-index: 4;

background: #fff;

display: none;

overflow: hidden;

}

 

.firbox_0 {

width: 100%;

height: 100px;

border-bottom: 1px solid #eee;

}

 

.firbox_1 {

width: 100%;

height: 50px;

 

}

 

.firbox_one,

.firbox_two {

width: 50%;

float: left;

height: 100px;

padding-left: 10px;

padding-top: 15px;

}

 

.firbox_1_box1,

.firbox_1_box2 {

width: 50%;

float: left;

height: 50px;

padding-left: 10px;

}


 

.firbox_one ul li a {

 

font-size: 12px;

text-decoration: none;

color: #999;

}

 

.firbox_one ul li a:hover {

color: #f00;

}

 

.firbox_two ul li a {

font-size: 12px;

text-decoration: none;

color: #999;

}

 

.firbox_two ul li a:hover {

color: #f00;

}

 

.firbox_1_box1 ul li a {

font-size: 12px;

text-decoration: none;

color: #999;

}

 

.firbox_1_box1 ul li a:hover {

color: #f00;

}

 

.firbox_1_box2 ul li a {

font-size: 12px;

text-decoration: none;

color: #999;

}

 

.firbox_1_box2 ul li a:hover {

color: #f00;

}

 

/* 第二部分隐藏样式 */

.secbox {

width: 156px;

height: 70px;

border: 1px solid #f00;

float: left;

margin-left: 844px;

z-index: 4;

background: #fff;

display: none;

}

 

.secbox_0 {

width: 100%;

height: 70px;

 

}

 

.secbox_one,

.secbox_two {

width: 50%;

float: left;

height: 70px;

padding-left: 10px;

padding-top: 15px;

}

 

.secbox_one ul li a {

font-size: 12px;

text-decoration: none;

color: #999;

}

 

.secbox_one ul li a:hover {

color: #f00;

}

 

.secbox_two ul li a {

font-size: 12px;

text-decoration: none;

color: #999;

}

 

.secbox_two ul li a:hover {

color: #f00;

}


 

.thibox {

width: 173px;

height: 240px;

border: 1px solid #f00;

float: left;

margin-left: 844px;

z-index: 4;

background: #fff;

display: none;

 

}

 

.thibox .firbox_0 {

height: 130px;

}

 

.thibox .firbox_0 .firbox_one {

padding-top: 0;

height: 72px;

}

 

.thibox .firbox_0 .firbox_two {

padding-top: 0;

height: 72px;

}

 

.thibox .firbox_0 {

padding-top: 15px;

}

 

.thibox .firbox_0 p {

padding-left: 10px;

}

 

.thibox .firbox_1 {

height: 110px;

}

 

.thibox .firbox_1 p {

padding-top: 15px;

padding-left: 10px;

}

 

.foubox {

width: 1190px;

height: 180px;

float: left;

display: none;

z-index: 4;

margin-left: -1px;

background: #fff;

border: 1px solid #f00;

}

 

.foubox .linebox {

width: 340px;

float: left;

border-right: 1px solid #eee;

height: 180px;

overflow: hidden;

}

 

.foubox .linebox1 {

width: 282px;

}

 

.foubox .foubox_box0 {

width: 100%;

height: 180px;

border: none;

padding-top: 0px;

 

}

 

.foubox .foubox_box0 p {

padding-left: 10px;

padding-top: 15px;

}

 

.foubox .foubox_box {

width: 100%;

float: left;

height: 150px;

padding-left: 10px;

padding-top: 15px;

overflow: hidden;

}

 

.foubox .foubox_box ul {

width: 25%;

float: left;

padding-right: 10px;

}

 

.foubox .foubox_box ul li a {

font-size: 12px;

color: #999;

}

 

.foubox .foubox_box ul li a:hover {

color: #f00;

}

 

.linebox1 .foubox_box ul {

width: 33.3%;

}

 

/* 导购部分 */

.content {

width: 1190px;

height: 142px;

z-index: 1;

background: #f0f3ef;

position: relative;

}

 

.content .search {

width: 550px;

height: 35px;

position: absolute;

top: 20px;

left: 316px;

z-index: 3;

border: none;

 

}

 

.content .search input {

width: 500px;

height: 35px;

position: relative;

border: none;

text-indent: 8px;

}

 

.search_box1 {

width: 500px;

height: 35px;

margin: 0;

float: left;

}

 

.search .search_box1 .iconfont {

position: absolute;

top: 7px;

right: 61px;

font-size: 22px;

font-weight: 400;

}

 

.camera:hover {

color: #f00;

}

 

.search_box2 {

width: 50px;

height: 35px;

border: 1px solid #f00;

float: left;

background: #f00;

position: relative;

}

 

.search_box2 i {

color: #fff;

position: absolute;

top: 2px;

left: 12px;

font-size: 28px;

}

 

.content .shopcar {

width: 190px;

height: 35px;

padding-top: 5px;

position: absolute;

top: 20px;

left: 894px;

z-index: 3;

text-align: center;

border: 1px solid #f00;

background: #fff;

}

 

.content .shopcar i {

color: #f00;

font-size: 18px;

}

 

.content .shopcar a {

text-decoration: none;

font-size: 12px;

color: #f00;

cursor: pointer;

}

 

.shopcar .circle {

width: 15px;

height: 15px;

border-radius: 50%;

display: inline-block;

font-size: 12px;

color: #fff;

 

background: #f00;

position: absolute;

top: 4px;

right: 34px;

 

}

 

.content .ewm {

width: 68px;

height: 68px;

line-height: 68px;

position: absolute;

top: 0px;

left: 1122px;

z-index: 3;

text-align: center;

border: 1px solid #ccc;

background: #f0f3ef;

}

 

.content .ewm img {

width: 60px;

height: 60px;

margin-top: 3px;

display: block !important;

}

 

.content .inpbottext {

position: absolute;

top: 60px;

left: 316px;

}

 

.content .inpbottext1 {

position: absolute;

top: 110px;

left: 204px;

}

 

.content .inpbottext ul {

overflow: hidden;

}

 

.inpbottext ul li {

width: 62px;

height: 20px;

line-height: 20px;

float: left;

text-align: center;

}

 

.inpbottext1 ul li {

width: 77px;

height: 20px;

line-height: 20px;

float: left;

text-align: center;

}

 

.inpbottext ul li:first-child {

width: 68px;

height: 20px;

line-height: 20px;

overflow: hidden;

 

}

 

.inpbottext ul li:first-child a {

color: #f00;

 

}

 

.inpbottext_a1 {

animation: ani 8s infinite;

}

 

.inpbottext ul li a {

font-size: 12px;

color: #999;

text-decoration: none;

}

 

.inpbottext1 ul li a {

font-size: 14px;

color: #333;

text-decoration: none;

}

 

.inpbottext1 ul li .line:after {

top: 7px;

height: 10px;

}

 

.inpbottext ul li a:hover {

color: #f00;

}

 

.inpbottext1 ul li a:hover {

 

color: #f00;

 

}

 

@keyframes ani {

0% {

margin-left: 0px;

}

 

50% {

margin-left: -68px;

}

 

100% {

margin-left: 0px;

}

}

 

/* 正式内容部分 */

.realcontent {

width: 1190px;

height: 480px;

overflow: hidden;

}

 

.realcontent .asideleft {

width: 190px;

height: 480px;

float: left;

background: #fff;

padding-top: 10px;

}

 

.realcontent .asideleft li {

overflow: hidden;

width: 190px;

height: 26px;

line-height: 26px;

padding-left: 10px;

 

}

 

.realcontent .asideleft li:hover {

background: #d9d9d9;

 

}

 

.realcontent .asideleft li a {

color: #626262;

font-size: 14px;

text-decoration: none;

}

 

.asideleft li a:hover {

color: #f00;

}

 

.realcontent .asideleft li span {

line-height: 16px;

font-weight: 300;

font-size: 12px;

}

 

.realcontent .middle {

width: 1000px;

height: 480px;

float: left;

overflow: hidden;

position: relative;

background: #f0f3ef;

}

 

.middle .mouseoverappera {

width: 1000px;

height: 480px;

display: none;

z-index: 4;

}

 

.middle .mouseoverappera ul {

overflow: hidden;

}

 

.middle .mouseoverappera ul li {

width: 1000px;

height: 480px;

float: left;

display: none;

background: #fff;

}

 

/* 轮播图部分 */

.middle .lunbo {

width: 600px;

height: 480px;

float: left;

}

 

.lunbo img {

width: 590px;

height: 480px;

padding: 10px 10px 0 10px;

}

 

.asideright {

width: 400px;

height: 480px;

float: left;

z-index: 0;

background: #f0f3ef;

}

 

/* asideright右边 */

.right_box1 {

width: 190px;

height: 480px;

float: left;

}

 

.right_box1 img {

margin-top: 3px;

}

 

.right_box1 img:first-child {

margin-top: 9px;

 

}

 

.right_box2 {

width: 190px;

height: 480px;

float: left;

margin-left: 18px;

margin-top: 9px;

position: relative;

background: #fff;

}

 

.right_box2_1 {

width: 190px;

height: 150px;

}

 

.right_box2 .inimg {

width: 60px;

height: 60px;

border-radius: 50%;

position: absolute;

top: -10px;

left: 35%;

text-align: center;

background: #e3e1df;

box-shadow: 3px 6px 25px #c3c3c3;

}

 

.right_box2 img {

width: 50px;

height: 50px;

border-radius: 50%;

margin-top: 4px;

}

 

.right_box2_1 {

width: 190px;

height: 90px;

position: absolute;

left: 0;

top: 60px;

text-align: center;

}

 

.right_box2_1 p {

font-size: 12px;

color: #888;

}

 

.right_box2_1 span a {

color: #666;

font-size: 12px;

text-decoration: none;

}

 

.right_box2_1 span a:hover {

color: #f00;

}

 

.right_box2_1_text {

width: 190px;

height: 52px;

}

 

.right_box2_1_text button {

width: 70px;

height: 25px;

border: none;

margin-top: 16px;

border-radius: 13px;

box-shadow: 6px 8px 20px rgba(45, 45, 45, .15)

}

 

.right_box2_1_text .btntxt1 {

background: #fff;

color: #f00;

 

}

 

.right_box2_1_text .btntxt1:hover {

color: #fff;

background: #f00;

}

 

.right_box2_1_text .btntxt2 {

background: #363634;

color: #e5d790;

 

}

 

.right_box2_1_text .btntxt2:hover {

color: #fff;

background: #f00;

}

 

.right_box2_2 {

width: 190px;

height: 130px;

margin-top: 149px;

position: absolute;

top: 0;

left: 0;

z-index: 5;

}

 

.rtxt {

width: 190px;

height: 26px;

position: relative;

}

 

.rtxt a {

color: #333;

font-size: 12px;

text-decoration: none;

padding: 0 15px;

 

}

 

.rtxt .more {

text-align: right;

padding-left: 30px;

}

 

.rtxt .line:after {

left: 57px;

top: 7px;

height: 15px;

}

 

.rtxt .more:hover {

color: #f00;

}

 

.redline {

width: 30px;

height: 2px;

margin: 0;

margin-left: 12px;

border: 1px solid #f00;

}

 

.right_box2_2 .list1 {

width: 165px;

height: 96px;

margin-top: 5px;

border-bottom: 1px solid #ccc;

z-index: 5;

}

 

.right_box2_2 .list2 {

width: 165px;

height: 96px;

margin-top: 5px;

display: none;

position: absolute;

top: 28px;

left: 12px;

border-bottom: 1px solid #ccc;

z-index: 5;

}

 

.list2 ul li {

text-overflow: ellipsis;

white-space: nowrap;

overflow: hidden;

}

 

.list1 ul li a {

color: #666;

font-size: 12px;

text-decoration: none;

}

 

.list2 ul li a {

color: #666;

font-size: 12px;

text-decoration: none;

}

 

.list1 ul li a:hover {

color: #f00;

}

 

.list2 ul li a:hover {

color: #f00;

}

 

.right_box2_3 {

width: 190px;

height: 235px;

padding-top: 17px;

position: absolute;

top: 278px;

left: 0;

overflow: hidden;

z-index: 4;

background: #fff;

}

 

.right_box2_3 ul {

overflow: hidden;

padding-left: 11px;

z-index: 5;

 

}

 

.right_box2_3 .right_box2_3_ul li {

width: 42px;

height: 50px;

float: left;

text-align: center;

padding-top: 5px;

position: relative;

margin-bottom: 13px;

}

 

.right_box2_3 .right_box2_3_ul li a {

color: #bea68d;

font-size: 12px;

text-decoration: none;

}

 

.right_box2_3 .right_box2_3_ul li span {

font-size: 12px;

height: 14px;

line-height: 14px;

background: #f00;

color: #fff;

position: absolute;

top: 0;

left: 28px;

text-align: center;

}

 

.icon {

width: 20px;

height: 20px;

}

 

.icon i {

font-size: 19px;

color: #bea68d;

font-weight: 200;

}

 

.icon .icon1 {

font-size: 12px;

}

 

.icon .icon2 {

font-size: 16px;

}

 

.right_box2_3 .close {

position: absolute;

bottom: 0;

right: 4px;

color: #666;

display: none;

}

 

.right_box2_3 .changebox {

display: block;

width: 190px;

height: 190px;

margin-left: 0;

position: absolute;

bottom: -190px;

left: 0;

z-index: 999;

background: #fff;

}

 

.right_box2_3 .changebox1 {

display: none;

}

 

.right_box2_3 .changebox2 {

display: none;

}

 

.right_box2_3 .changebox3 {

display: none;

}

 

.right_box2_3 .changebox1 .changeboxa00 {

width: 65px;

}

 

.right_box2_3 .changebox1 .changeboxa0 {

width: 50px;

}

 

.right_box2_3 .changebox {

overflow: hidden;

}

 

.right_box2_3 .changebox li {

width: 56px;

height: 21px;

float: left;

}

 

.changebox li a {

color: #666;

font-size: 12px;

text-decoration: none;

}

 

.changebox li a:hover {

color: #f00;

}

 

.huafei_1,

.huafei_3,

.huafei_5 {

width: 160px;

height: 133px;

display: none;

}

 

.huafei_1 {

display: block;

}

 

.huafei_1 ul {

width: 160px;

height: 133px;

padding-left: 0;

}

 

.huafei_3 ul {

width: 160px;

height: 133px;

padding-left: 0;

}

 

.huafei_5 ul {

width: 160px;

height: 133px;

padding-left: 0;

}

 

.changebox .huafei_1 ul li {

width: 160px;

height: 25px;

line-height: 25px;

}

 

.changebox .huafei_3 ul li {

width: 160px;

height: 25px;

line-height: 25px;

}

 

.changebox .huafei_5 ul li {

width: 160px;

height: 25px;

line-height: 25px;

}

 

.huafei_1 ul li span {

font-size: 12px;

margin-right: 5px;

color: #666;

}

 

.huafei_3 ul li span {

font-size: 12px;

margin-right: 5px;

color: #666;

}

 

.huafei_5 ul li span {

font-size: 12px;

margin-right: 5px;

color: #666;

}

 

.changebox .huafei_1 ul li input {

width: 124px;

height: 20px;

text-indent: 10px;

}

 

.changebox1 .huafei_1 .lucheng input {

width: 12px;

height: 20px;

line-height: 20px;

font-size: 12px;

text-align: left;

vertical-align: middle;

}

 

.changebox1 .changeboxa01 {

text-align: center;

}

 

.changebox1 .huafei_6 {

overflow: hidden;

}

 

.changebox1 .huafei_5 .huafei_6 li {

width: 75px;

height: 96px;

float: left;

margin-top: 10px;

border: none;

}

 

.huafei_6 li img {

border-radius: 0;

width: 75px;

height: 96px;

display: block;

margin: 0;

}

 

.changebox1 .huafei_3 .lucheng input {

width: 12px;

height: 20px;

line-height: 20px;

font-size: 12px;

text-align: left;

vertical-align: middle;

}

 

.changebox1 .huafei_1 .lucheng span {

display: inline-block;

height: 20px;

padding-bottom: 2px;

}

 

.changebox1 .huafei_1 .citychange input {

text-indent: 45px;

}

 

.changebox .huafei_3 ul li input {

width: 124px;

height: 20px;

line-height: 20px;

text-indent: 10px;

}

 

.changebox .huafei_5 ul li input {

width: 124px;

height: 20px;

font-size: 12px;

text-indent: 10px;

}

 

.huafei_1 ul li select {

width: 124px;

height: 20px;

line-height: 20px;

 

}

 

.huafei_3 ul li select {

width: 59px;

height: 20px;

line-height: 20px;

font-size: 12px;

}

 

.huafei_5 ul li select {

width: 124px;

height: 20px;

line-height: 20px;

font-size: 12px;

}

 

.huafei_1 li .huafeiprice {

color: #f00 !important;

}

 

.huafei_3 li .huafeiprice {

color: #f00 !important;

}

 

.huafei_5 li .huafeiprice {

color: #f00 !important;

}

 

.huafei_1 button {

width: 59px;

height: 25px;

line-height: 25px;

border: none;

border-radius: 13px;

color: #fff;

background: #f00;

display: inline-block;

vertical-align: middle;

font-size: 12px;

}

 

.huafei_3 button {

width: 57px;

height: 25px;

line-height: 25px;

border: none;

border-radius: 13px;

color: #fff;

font-size: 12px;

background: #f00;

display: inline-block;

vertical-align: middle;

}

 

.huafei_5 button {

width: 60px;

height: 25px;

line-height: 25px;

border: none;

border-radius: 13px;

color: #fff;

background: #f00;

display: inline-block;

font-size: 12px;

vertical-align: middle;

}

 

.huafei_1 button:hover {

cursor: pointer;

}

 

.huafei_3 button:hover {

cursor: pointer;

}

 

.huafei_5 button:hover {

cursor: pointer;

}

 

.huafei_1 ul li a {

color: #5476db;

}

 

.huafei_3 ul li a {

color: #5476db;

}

 

.changeboxa1 {

width: auto;

height: auto;

display: block !important;

}

 

.changebox2 .huafei_1 .luchneg input {

width: 114px;

}

 

.changebox2 .huafei_1 .citychange input {

width: 102px;

}

 

.changebox2 .huafei_6 {

overflow: hidden;

}

 

.changebox2 .huafei_3 .huafei_6 li {

width: 75px;

height: 96px;

float: left;

margin-top: 10px;

border: none;

}

 

.changebox2 .huafei_6 li img {

border-radius: 0;

width: 75px;

height: 96px;

display: block;

margin: 0;

}

 

.changebox3 .huafei_1 ul li {

width: 160px;

}

 

#lucheng input {

width: 12px;

height: 20px;

line-height: 20px;

font-size: 12px;

text-align: left;

vertical-align: middle;

}

 

#lucheng1 input {

width: 12px;

height: 20px;

line-height: 20px;

font-size: 12px;

text-align: left;

vertical-align: middle;

}

 

#lucheng2 input {

width: 12px;

height: 20px;

line-height: 20px;

font-size: 12px;

text-align: left;

vertical-align: middle;

}

//font部分自行到阿里巴巴矢量图官网下载素材使用

 

你可能感兴趣的:(C3,H5)