粗略的仿京東（部分仿）

<!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部分自行到阿里巴巴矢量圖官網下載素材使用

粗略的仿京東（部分仿）

使用neovim打造go ide(支持代碼跳轉, 代碼補全, 實時語法檢查)

挑戰程序設計競賽 2.3章習題 poj 3046 Ant Counting

Shell/Python中的用戶名獲取

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

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

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

js實現數組亂序的方法

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

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

linux以太網驅動總結