粗略的仿京东（部分仿）

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</div>

</div>

<ul>

</li>

</li>

</li>

</li>

</li>

</li>

</li>

</li>

</ul>

</div>

</div>

<ul>

<li><a href="javascript:void(0)">待处理订单</a></li>

<li><a href="javascript:void(0)">返修退换货</a></li>

</ul>

</div>

<ul>

</ul>

</div>

<ul>

</ul>

</div>

<ul>

<li><a href="javascript:void(0)">我的优惠券</a></li>

</ul>

</div>

<ul>

</ul>

</div>

<ul>

<li><a href="javascript:void(0)">商用场景馆</a></li>

</ul>

</div>

<ul>

</ul>

</div>

<ul>

<li><a href="javascript:void(0)">全球售客服</a></li>

</ul>

</div>

<ul>

</ul>

</div>

<ul>

<li><a href="javascript:void(0)">京麦工作台</a></li>

</ul>

</div>

<ul>

<li> <a href="javascript:void(0)">京东金融科技</a></li>

</ul>

<ul>

<li><a href="javascript:void(0)">In货推荐</a></li>

</ul>

<ul>

</ul>

<ul>

<li><a href="javascript:void(0)">I出海招商</a></li>

</ul>

</div>

<ul>

</ul>

<ul>

</ul>

<ul>

<li><a href="javascript:void(0)">京东元器件</a></li>

</ul>

</div>

<ul>

<li><a href="javascript:void(0)">京东小金库</a></li>

</ul>

<ul>

</ul>

<ul>

<li><a href="javascript:void(0)">京东金融App</a></li>

</ul>

</div>

<ul>

</ul>

<ul>

</ul>

<ul>

<li><a href="javascript:void(0)">办公生活馆</a></li>

<li><a href="javascript:void(0)">知识产权维护</a></li>

</ul>

</div>

</div>

</div>

<a href="javascript:void(0);">我的购物车</a>

</div>

</div>

<ul>

<li>

<a href="javascript:void(0);" class="inpbottext_a1">三件享七折</a>

<a href="javascript:void(0);" class="inpbottext_a2">低价提前享</a>

</li>

</ul>

</div>

<ul>

<li>

</li>

<li><a href="javascript:void(0);">PLUS会员</a></li>

</ul>

</div>

<ul>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

</ul>

</div>

<ul>

</ul>

</div>

<!-- <ul>

</ul>

</div>

</div>

</div>

</div>

<p>Hi~欢迎来到京东！</p>

<button class="btntxt2">PLUS会员</button>

</div>

</div>

<ul>

<li><a href="javascript:void(0);">极米Play X 陪你随时看电影</a></li>

<li><a href="javascript:void(0);">图书文娱乐每满100减30</a></li>

<li><a href="javascript:void(0);">11.1 联想新品独家首发</a></li>

</ul>

</div>

<ul>

<li><a href="javascript:void(0);">京东图书勋章体系改版公告</a></li>

<li><a href="javascript:void(0);">京东PLUS会员权益更新及会费调整</a></li>

<li><a href="javascript:void(0);">京东启用全新客服电话“950618”</a></li>

<li><a href="javascript:void(0);">关于召回普利司通（天津）轮胎有限公司2个规格乘用车轮胎的公告</a></li>

</ul>

</div>

</div>

</li>

</div>

</li>

</div>

</li>

</div>

</li>

</div>

</li>

</div>

</li>

</div>

</li>

</div>

</li>

</div>

</li>

</div>

</li>

</div>

</li>

</div>

</li>

</ul>

<li>

<li>

</li>

<li>

</select>

</li>

</ul>

</div>

<li>

</li>

<li>

</select>

</select>

</li>

<a href="javascript:void(0);" class="jiantxt">App Store充值卡</a>

</li>

</ul>

</div>

<li>

</li>

<li>

</select>

</li>

</li>

</ul>

</div>

</li>

</ul>

<li>

</li>

</li>

</li>

<li>

</li>

<li>

<a href="javascript:void(0);" class="jiantxt">当季热门特惠机票</a>

</li>

</ul>

</div>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<a href="javascript:void(0);" class="jiantxt">国际机票任性搜</a>

</li>

</ul>

</div>

<li>

</li>

</li>

</ul>

</div>

</li>

</ul>

</li>

</li>

</li>

<li>

</li>

<li>

<a href="javascript:void(0);" class="jiantxt">当季热门特惠机票</a>

</li>

</ul>

</div>

<li>

</li>

</li>

</ul>

</div>

</li>

</ul>

<li>

<li>

</li>

<li>

</select>

</li>

</li>

</ul>

</div>

<li>

</li>

<li>

</select>

</li>

</li>

</li>

</ul>

</div>

<li>

</li>

<li>

</select>

</li>

</li>

</li>

</ul>

</div>

</li>

</ul>

</div>

</body>

</script>

//部分样式代码未上传

</html>

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部分自行到阿里巴巴矢量图官网下载素材使用

粗略的仿京东（部分仿）

杭州的 IT 崩盘了么？

开源高性能结构化日志模块NanoLog

Python 潮流周刊#55：分享 9 个高质量的技术类信息源！

Azure Virtual Network (22) 多订阅使用Azure DNS解析问题 Windows Azure Platform 系列文章目录

【简写Mybatis-02】注册机的实现以及SqlSession处理

手绘二维码

.NET借助虚拟网卡实现一个简单异地组网工具

使用component實現一個頁面間切換

點擊對應欄實現輸出對應欄數字的三種方法

一種斐波那契數列的實現方法

js實現數組亂序的方法

使用JS爲數字添加千位分隔符

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結