下面為使用 html
css
javascript
html
css
javascript
京東官網建立的檔案夾結構如下：
一個有三個檔案夾和一個index.html檔案。css檔案家裡面存放的是css檔案，img檔案夾裡面存放着網頁所需要的圖檔，js檔案夾裡面放的是所需要的js檔案。最後的index.html是官網的首頁。
html的代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>京東(JD.COM)-正品低價、品質保障、配送及時、輕松購物！</title>
<!--引入字型圖示-->
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.1/css/all.css" rel="stylesheet">
<!--引入重置樣式-->
<link rel="stylesheet" href="./css/reset.css" type="text/css">
<!--引入商城首頁的css-->
<link rel="stylesheet" href="./css/style.css" type="text/css">
<!--引入本頁的css-->
<link rel="stylesheet" href="./css/index.css" type="text/css">
<!--引入網頁圖示-->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<link rel="icon" href="//www.jd.com/favicon.ico" mce_href="//www.jd.com/favicon.ico" type="image/x-icon" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="renderer" content="webkit" />
<!--引入JavaScript-->
<script src="./js/index_del.js" type="text/javascript" charset="utf-8"></script>
<script src="./js/style.js" type="text/javascript" charset="utf-8"></script>
<!-- <script src="./js/index_del.js" type="text/javascript" charset="utf-8"></script> -->
</head>
<body>
<!--頂部廣告-->
<div class="header">
<!-- <div class="top-img-left">
<img src="./img/top-left.webp" alt="">
</div> -->
<div class="top-img" id="top-img">
<img src="./img/top1.webp" alt="">
<div class="del" id="del">
<img src="./img/del.png" alt="">
</div>
</div>
</div>
<!--頂部導航欄-->
<div class="top">
<div class="top-center">
<div class="top-left">
<div class="position">
<a href="#"><i class="fas fa-map-marker-alt "></i> <span id="city">甘肅</span></a>
</div>
<div class="chengshi">
<ul>
<li><a id="bj" href="javascript:;">北京</a></li>
<li><a id="sh" href="javascript:;">上海</a></li>
<li><a id="tj" href="javascript:;">天津</a></li>
<li><a id="cq" href="javascript:;">重慶</a></li>
<li><a id="hb" href="javascript:;">河北</a></li>
<li><a id="sx" href="javascript:;">山西</a></li>
<li><a id="hn" href="javascript:;">河南</a></li>
<li><a id="ln" href="javascript:;">遼甯</a></li>
<li><a id="jl" href="javascript:;">吉林</a></li>
<li><a id="hlj" href="javascript:;">黑龍江</a></li>
<li><a id="zj" href="javascript:;">浙江</a></li>
<li><a id="js" href="javascript:;">江蘇</a></li>
<li><a id="sd" href="javascript:;">山東</a></li>
<li><a id="ah" href="javascript:;">安徽</a></li>
<li><a id="nmg" href="javascript:;">内蒙古</a></li>
<li><a id="fj" href="javascript:;">福建</a></li>
<li><a id="h1" href="javascript:;">湖北</a></li>
<li><a id="h2" href="javascript:;">湖南</a></li>
<li><a id="h3" href="javascript:;">貴州</a></li>
<li><a id="h4" href="javascript:;">雲南</a></li>
<li><a id="h5" href="javascript:;">西藏</a></li>
<li><a id="h6" href="javascript:;">陝西</a></li>
<li><a id="h7" href="javascript:;">甘肅</a></li>
<li><a id="h8" href="javascript:;">青海</a></li>
<li><a id="h9" href="javascript:;">釣魚島</a></li>
<li><a id="s1" href="javascript:;">新疆</a></li>
<li><a id="s2" href="javascript:;">港澳</a></li>
<li><a id="s3" href="javascript:;">台灣</a></li>
<li><a id="s4" href="javascript:;">甯夏</a></li>
<li><a id="s5" href="javascript:;">海外</a></li>
</ul>
<div class="top-middle">
<ul>
<li class="a">地區專享版本</li>
<li><a href="javascript:;">中國港澳</a></li>
<li class="b"><a href="javascript:;">中國台灣</a></li><br>
<li><a href="javascript:;">京東全球</a></li>
</ul>
</div>
<div class="top-left-foot">
<ul>
<li class="c">Available Sites</li>
<li><a href="javascript:;"><i class="fas fa-globe-americas"></i> Global Site</a></li>
<li><a href="javascript:;">Cant Poccnn</a></li>
<li><a href="javascript:;">Situs Indonesia</a></li>
<li><a href="javascript:;">Sition de Espana</a></li>
<li></li>
</ul>
</div>
</div>
</div>
<div class="top-right">
<ul>
<li><a href="#">你好，請登入 <span class="free">免費注冊</span></a></li>
<span class="middle"></span>
<li><a href="#">我的訂單</a></li>
<span class="middle"></span>
<li class="top-right-w">
<div class="w">
<a href="#">我的京東 <i class="fas fa-sort-down"></i></a>
<div class="top-right-my">
<ul class="up">
<li><a href="javascript:;">待處理訂單</a></li>
<li><a href="javascript:;">消息</a></li>
<li><a href="javascript:;">返修退換貨</a></li>
<li><a href="javascript:;">我的問答</a></li>
<li><a href="javascript:;">降價商品</a></li>
<li class="one"><a href="javascript:;">我的關注</a></li>
</ul>
<ul class="un">
<li><a href="javascript:;">我的京豆</a></li>
<li class="two"><a href="javascript:;">我的優惠券</a></li>
<li><a href="javascript:;">我的白條</a></li>
<li class="two"><a href="javascript:;">我的理财</a></li>
</ul>
</div>
</div>
</li>
<span class="middle"></span>
<li><a href="#">京東會員</a></li>
<span class="middle"></span>
<li class="two"><a href="#" class="free">企業采購 <i class="fas fa-sort-down"></i></a>
<div class="two-show">
<ul>
<li><a href="javascript:;">企業購</a></li>
<li><a href="javascript:;">商用場景館</a></li>
<li><a href="javascript:;">工業品</a></li>
<li><a href="javascript:;">豐客多商城</a></li>
<li><a href="javascript:;">禮品卡</a></li>
<li><a href="javascript:;">微信企業購</a></li>
</ul>
</div>
</li>
<span class="middle"></span>
<li class="three">客戶服務 <i class="fas fa-sort-down"></i>
<div class="three-show">
<ul class="s">
<p>商品</p>
<li><a href="javacript:;">幫助中心</a></li>
<li><a href="javacript:;">售後服務</a></li>
<li><a href="javacript:;">線上客服</a></li>
<li><a href="javacript:;">意見建議</a></li>
<li><a href="javacript:;">電話客服</a></li>
<li><a href="javacript:;">客服郵箱</a></li>
<li><a href="javacript:;">金融咨詢</a></li>
<li><a href="javacript:;">全球售客服</a></li>
<li><a href="javacript:;">企業客服</a></li>
</ul>
<ul>
<p>商品</p>
<li><a href="javascript:;">合作招商</a></li>
<li><a href="javascript:;">成長中心</a></li>
<li><a href="javascript:;">商家背景</a></li>
<li><a href="javascript:;">京麥工作台</a></li>
<li><a href="javascript:;">商家幫助</a></li>
<li><a href="javascript:;">規則平台</a></li>
</ul>
</div>
</li>
<span class="middle"></span>
<li class="four">網站導航 <i class="fas fa-sort-down"></i>
<div class="four-show">
<div class="four-show-one">
<ul>
<p>特色主題</p>
<li><a href="javascript:;">新品首發</a></li>
<li><a href="javascript:;">京東金融</a></li>
<li><a href="javascript:;">全球售</a></li>
<li><a href="javascript:;">國際站</a></li>
<li><a href="javascript:;">京東會員</a></li>
<li><a href="javascript:;">京東預售</a></li>
<li><a href="javascript:;">台灣售貨</a></li>
<li><a href="javascript:;">俄語售</a></li>
<li><a href="javascript:;">裝機大視</a></li>
<li><a href="javascript:;">0元評測</a></li>
<li><a href="javascript:;">港澳售</a></li>
<li><a href="javascript:;">優惠券</a></li>
<li><a href="javascript:;">秒殺</a></li>
<li><a href="javascript:;">閃購</a></li>
<li><a href="javascript:;">印尼站</a></li>
<li><a href="javascript:;">陪伴計劃</a></li>
<li><a href="javascript:;">山海招商</a></li>
<li><a href="javascript:;">拍拍二手</a></li>
<li><a href="javascript:;">買什麼</a></li>
</ul>
</div>
<div class="four-show-two">
<ul>
<p>行業頻道</p>
<li><a href="javascript:;">手機</a></li>
<li><a href="javascript:;">智能數位</a></li>
<li><a href="javascript:;">玩3C</a></li>
<li><a href="javascript:;">電腦辦公</a></li>
<li><a href="javascript:;">加用電器</a></li>
<li><a href="javascript:;">圖書</a></li>
<li><a href="javascript:;">京東服飾</a></li>
<li><a href="javascript:;">京東生鮮</a></li>
<li><a href="javascript:;">家裝城</a></li>
<li><a href="javascript:;">母嬰</a></li>
<li><a href="javascript:;">食品</a></li>
<li><a href="javascript:;">農貿頻道</a></li>
<li><a href="javascript:;">整車</a></li>
<li><a href="javascript:;">京東座智能</a></li>
<li><a href="javascript:;">勞動防護</a></li>
</ul>
</div>
<div class="four-show-three">
<ul>
<p><a href="javascript:;">生活服務</a></p>
<li><a href="javascript:;">京東衆籌</a></li>
<li><a href="javascript:;">白條</a></li>
<li><a href="javascript:;">京東金融APP</a></li>
<li><a href="javascript:;">京東小金庫</a></li>
<li><a href="javascript:;">理财</a></li>
<li><a href="javscript:;">話費</a></li>
<li><a href="javscript:;">水電煤</a></li>
<li><a href="javascript:;">彩票</a></li>
<li><a href="javascript:;">旅行</a></li>
<li><a href="javascript:;">機票酒店</a></li>
<li><a href="">電影票</a></li>
<li><a href="javascript:;">京東到家</a></li>
<li><a href="javascript:;">遊戲</a></li>
<li><a href="javascript:;">拍拍回收</a></li>
</ul>
</div>
<div class="four-show-four">
<ul>
<p>更多精選</p>
<li><a href="javascript:;">合作招商</a></li>
<li><a href="javascript:;">京東通信</a></li>
<li><a href="javascript:;">京東E卡</a></li>
<li><a href="javascript:;">企業采購</a></li>
<li><a href="javascript:;">服務市場</a></li>
<li><a href="javascript:;">辦公生活館</a></li>
<li><a href="javascript:;">校園加盟</a></li>
<li><a href="javascript:;">京東社群</a></li>
<li><a href="javascript:;">遊戲社群</a></li>
<li><a href="javascript:;">知識産權維權</a></li>
</ul>
</div>
</div>
</li>
<span class="middle"></span>
<li>手機京東</li>
</ul>
</div>
</div>
</div>
<!--搜尋框一欄-->
<div class="find">
<div class="find-center">
<div class="logo">
<img src="./img/logo.gif" alt="">
</div>
<div class="find-center-middle">
<div class="look">
<input type="text" placeholder="品牌會員低至五折">
<div class="input-box"><i class="fas fa-search"></i></div>
<div class="look-buy">
<i class="fas fa-shopping-cart"></i> 我的購物車
</div>
</div>
<div class="look-up">
<ul>
<li><a href="javascript:;"><span>定金翻百倍</span></a></li>
<li><a href="javascript:;">品質居家</a></li>
<li><a href="javascript:;">二手手機</a></li>
<li><a href="javascript:;">品質男裝</a></li>
<li><a href="javascript:;">價保1111</a></li>
<li><a href="javascript:;">京東超市</a></li>
<li><a href="javascript:;">時尚輕奢</a></li>
<li><a href="javascript:;">美妝預售</a></li>
<li><a href="javascript:;">泸州老窖</a></li>
</ul>
</div>
<div class="look-under">
<ul>
<li><a href="javascript:;"><span>秒殺</span></a></li>
<li><a href="javascript:;"><span>優惠券</sapn></a></li>
<li><a href="javascript:;">PLUS會員</a></li>
<li><a href="javascript:;">品牌閃購</a></li>
<li><a href="javascript:;">拍賣</a></li>
<li><a href="javascript:;">京東家電</a></li>
<li><a href="javascript:;">京東超市</a></li>
<li><a href="javascript:;">京東生鮮</a></li>
<li><a href="javascript:;">京東國際</a></li>
<li><a href="javascript:;">京東金融</a></li>
</ul>
</div>
</div>
<div class="find-right">
<img src="img/find-right.png" alt="">
</div>
</div>
</div>
<!--網頁主體-->
<div class="body">
<!--banner容器區域-->
<div class="body-center">
<!--最左邊的導航欄-->
<div class="body-center-left">
<ul>
<li><a href="javascript:;">家用電器</a></li>
<li><a href="javascript:;">手機</a>/<a href="javascript:;">營運商</a>/<a href="javascript:;">數位</a></li>
<li><a href="javascript:;">電腦</a>/<a href="javascript:;">辦公</a></li>
<li><a href="javascript:;">家居</a>/<a href="javascript:;">家具</a>/<a href="javascript:;">家裝</a>/<a href="javascript:;">廚具</a></li>
<li><a href="javascript:;">男裝</a>/<a href="javascript:;">女裝</a>/<a href="javascript:;">童裝</a>/<a href="javascript:;">内衣</a></li>
<li><a href="javascript:;">美妝</a>/<a href="javascript:;">個護清潔</a>/<a href="javascript:;">寵物</a></li>
<li><a href="javascript:;">女鞋</a>/<a href="javascript:;">箱包</a>/<a href="javascript:;">鐘表</a>/<a href="javascript:;">珠寶</a></li>
<li><a href="javascript:;">男鞋</a>/<a href="javascript:;">運動</a>/<a href="javascript:;">戶外</a></li>
<li><a href="javascript:;">房産</a>/<a href="javascript:;">汽車</a>/<a href="javascript:;">汽車用品</a></li>
<li><a href="javascript:;">母嬰</a>/<a href="javascript:;">玩具樂器</a></li>
<li><a href="javascript:;">食品</a>/<a href="javascript:;">酒類</a>/<a href="javascript:;">生鮮</a>/<a href="javascript:;">特産</a></li>
<li><a href="javascript:;">藝術</a>/<a href="javascript:;">禮品鮮花</a>/<a href="javascript:;">農貿綠植</a></li>
<li><a href="javascript:;">醫藥保健</a>/<a href="javascript:;">計生情趣</a></li>
<li><a href="javascript:;">圖文</a>/<a href="javascript:;">文娛</a>/<a href="javascript:;">教育</a>/<a href="javascript:;">電子書</a></li>
<li><a href="javascript:;">機票</a>/<a href="javascript:;">酒店</a>/<a href="javascript:;">旅遊</a>/<a href="javascript:;">生活</a></li>
<li><a href="javascript:;">理财</a>/<a href="javascript:;">衆籌</a>/<a href="javascript:;">白條</a>/<a href="javascript:;">保險</a></li>
<li><a href="javascript:;">安裝</a>/<a href="javascript:;">維修</a>/<a href="javascript:;">清洗</a>/<a href="javascript:;">二手</a></li>
<li><a href="javascript:;">工業品</a></li>
</ul>
</div>
<!--中間的banner容器 輪播圖-->
<div class="body-center-middle">
<div class="banner" id="banner">
<ul>
<li><a href="javascript:;"><img id="bimg" src="./img/body00.webp" alt=""></a></li>
<!-- <li><a href="javascript:;" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" ><img src="./img/body02.webp" alt=""></a></li>
<li><a href="javascript:;" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" ><img src="./img/body03.webp" alt=""></a></li>
<li><a href="javascript:;" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" ><img src="./img/body04.webp" alt=""></a></li>
<li><a href="javascript:;" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" ><img src="./img/body05.webp" alt=""></a></li>
<li><a href="javascript:;" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" ><img src="./img/body000.webp" alt=""></a></li> -->
</ul>
<div class="pointer">
<a class="bannerA" href="javascript:;" class="active"></a>
<a class="bannerA" class="bannerA" href="javascript:;"></a>
<a class="bannerA" href="javascript:;"></a>
<a class="bannerA" href="javascript:;"></a>
<a class="bannerA" href="javascript:;"></a>
<a class="bannerA" href="javascript:;"></a>
</div>
<div class="banner-last" id="last">
<a href="javascript:;"><i class="fas fa-chevron-left"></i>
</a>
</div>
<div class="banner-next" id="next">
<a href="javascript:;"><i class="fas fa-chevron-right"></i></a>
</div>
</div>
</div>
<!--商品清單-->
<div class="body-center-boxs">
<div class="body-center-box"><img src="./img/body-boxs-01.webp" alt=""></div>
<div class="body-center-box"><img src="./img/body-box-002.webp" alt=""></div>
<div class="body-center-box"><img src="./img/body-box-00.webp" alt=""></div>
</div>
<!--歡迎界面-->
<div class="body-center-right">
<div class="body-center-right-top">
<div class="user">
<img src="./img/user.png" alt="">
</div>
<div class="user-tip">
Hi-歡迎逛京東！
</div>
<div class="user-login"><a href="#">登入</a></div>
<div class="user-span">
|
</div>
<div class="user-reg"><a href="#">注冊</a></div>
<div class="input">
<div class="left">新人福利</div>
<div class="right">PLUS會員</div>
</div>
</div>
<span></span>
<div class="body-center-right-middle">
<div class="news-title">
<h5>京東快報</h5>
<a href="#">
更多 <i class="fas fa-angle-right"></i>
</a>
</div>
<ul class="news-list">
<li><a href="#">
<p>熱門</p>沖奶粉不做這個動作...
</a></li>
<li><a href="#">
<p>推薦</p>2019年度TWS無堅不...
</a></li>
<li><a href="#">
<p>熱門</p>票友圈裝優雅不較真...
</a></li>
<li><a href="#">
<p>推薦</p>這是來自未來的手機...
</a></li>
</ul>
</div>
<span></span>
<div class="body-center-right-bottom">
<div class="box"><i class="fas fa-mobile-alt one"></i>
<p>話費</p>
</div>
<div class="box"><i class="fas fa-plane two"></i>
<p>機票</p>
</div>
<div class="box"><i class="fas fa-building three"></i>
<p>酒店</p>
</div>
<div class="box"><i class="fas fa-gamepad two"></i>
<p>遊戲</p>
</div>
<div class="box"><i class="fas fa-tint three"></i>
<p>加油卡</p>
</div>
<div class="box"><i class="fas fa-train five"></i>
<p>火車票</p>
</div>
<div class="box"><i class="fas fa-users three"></i>
<p>衆籌</p>
</div>
<div class="box"><i class="fas fa-coins one"></i>
<p>理财</p>
</div>
<div class="box"><i class="fas fa-copy five"></i>
<p>白條</p>
</div>
<div class="box"><i class="fas fa-photo-video five"></i>
<p>電影票</p>
</div>
<div class="box"><i class="fas fa-mosque one"></i>
<p>企業購</p>
</div>
<div class="box"><i class="fas fa-credit-card two"></i>
<p>禮品卡</p>
</div>
</div>
</div>
<!--京東秒殺-->
<div class="time">
<div class="time-one">
<div class="time-one-title">
<p>京東秒殺</p>
</div>
<div class="time-one-txt">
<span>20:00</span> 點場 倒計時
</div>
<div class="time-one-times">
<div class="time-one-time" >
10
</div>
<span>:</span>
<div class="time-one-time" id="minute">
05
</div>
<span>:</span>
<div class="time-one-time" id="miao">
00
</div>
</div>
</div>
<div class="time-box">
<div class="time-box-img">
<img src="./img/time-box-01.webp" alt="">
</div>
<div class="money">
<p class="title">花花公子[正品保證]潮牌</p>
<p>￥599.00 <span>￥799.00</span></p>
</div>
</div>
<div class="time-box">
<div class="time-box-img">
<img src="./img/time-box-02.webp" alt="">
</div>
<div class="money">
<p class="title">頂瓜瓜冬季女士韓版潮流</p>
<p>￥1099.00 <span>￥1299.00</span></p>
</div>
</div>
<div class="time-box">
<div class="time-box-img">
<img src="./img/time-box-03.webp" alt="">
</div>
<div class="money">
<p class="title">進階磚石吊墜</p>
<p>￥399.00 <span>￥599.00</span></p>
</div>
</div>
<div class="time-box">
<div class="time-box-img">
<img src="./img/time-box-04.webp" alt="">
</div>
<div class="money">
<p class="title">進階懶人椅，還您一個頭等艙體驗</p>
<p>￥599.00 <span>￥799.00</span></p>
</div>
</div>
<div class="time-box">
<div class="time-box-img">
<img src="./img/time-box-05.webp" alt="">
</div>
<div class="money">
<p class="title">移動王卡，5G流量不限速</p>
<p>￥19.00 <span>￥20.00</span></p>
</div>
</div>
</div>
<!--數位潮電-->
<div class="body-warp">
<div class="boxs">
<div class="box">
<div class="img">
<img src="./img/body-warp-01.webp" alt="">
</div>
<div class="bottom">
<div class="body-warp-title">
<p>每滿200減20</p>
</div>
<p class="center">生活服務</p>
</div>
</div>
<div class="box">
<div class="img">
<img src="./img/body-warp-02.webp" alt="">
</div>
<div class="bottom">
<div class="body-warp-title">
<p>定金翻百倍</p>
</div>
<p class="center">建築預售</p>
</div>
</div>
<div class="box">
<div class="img">
<img src="./img/body-warp-03.webp" alt="">
</div>
<div class="bottom">
<div class="body-warp-title">
<p>果凍橙5斤16.8</p>
</div>
<p class="center">京心助農</p>
</div>
</div>
<div class="box">
<div class="img">
<img src="./img/body-warp-04.webp" alt="">
</div>
<div class="bottom">
<div class="body-warp-title">
<p>領券滿200減20</p>
</div>
<p class="center">京東生鮮</p>
</div>
</div>
<div class="box">
<div class="img">
<img src="./img/body-warp-05.webp" alt="">
</div>
<div class="bottom">
<div class="body-warp-title">
<p>滿269減50</p>
</div>
<p class="center">玩具樂器</p>
</div>
</div>
<div class="box-01">
<div class="box-box1">
<img src="./img/box-box-01.webp" alt="">
</div>
<div class="box-box2">
<img src="./img/box-box-02.webp" alt="">
</div>
</div>
<div class="box">
<div class="img">
<img src="./img/body-warp-06.webp" alt="">
</div>
<div class="bottom">
<div class="body-warp-title">
<p>2件8折3件7折</p>
</div>
<p class="center">食品飲料</p>
</div>
</div>
<div class="box">
<div class="img">
<img src="./img/body-warp-07.webp" alt="">
</div>
<div class="bottom">
<div class="body-warp-title">
<p>五折限量搶</p>
</div>
<p class="center">家裝材料</p>
</div>
</div>
<div class="box">
<div class="img">
<img src="./img/body-warp-08.webp" alt="">
</div>
<div class="bottom">
<div class="body-warp-title">
<p>領券滿199減1000</p>
</div>
<p class="center">家居百貨</p>
</div>
</div>
<div class="box">
<div class="img">
<img src="./img/body-warp-09.webp" alt="">
</div>
<div class="bottom">
<div class="body-warp-title">
<p>每滿300減40元</p>
</div>
<p class="center">服飾紅包</p>
</div>
</div>
<div class="box">
<div class="img">
<img src="./img/body-warp-10.webp" alt="">
</div>
<div class="bottom">
<div class="body-warp-title">
<p>定金10元抵50</p>
</div>
<p class="center">生鮮預售</p>
</div>
</div>
<div class="box-01">
<div class="box-box1">
<img src="./img/box-box-03.webp" alt="">
</div>
<div class="box-box2">
<img src="./img/box-box-03.webp_" alt="">
</div>
</div>
</div>
</div>
<!--每日特價和品牌閃購-->
<div class="body-center-nav">
<!--每日特價-->
<div class="body-center-nav-every">
<div class="body-center-title">
<h1>每日特價 <i class="fas fa-chevron-circle-right"></i></h1>
<div class="title-nav">
<ul>
<li class="active"><a href="javascript:;" class="active">精選</a></li>
<li><a href="javascript:;">美食</a></li>
<li><a href="javascript:;">百貨</a></li>
<li><a href="javascript:;">個護</a></li>
<li><a href="javascript:;">預告</a></li>
</ul>
</div>
</div>
<div class="left">
<div class="t">
199天最低價
</div>
<div class="img">
<img src="./img/everyday.webp" alt="">
</div>
<h2>半球不粘鍋電鍋</h2>
<h3>￥78 <span>￥119</span></h3>
</div>
<div class="right">
<div class="right-01">
<div class="img">
<img src="./img/left-01.webp" alt="">
<p>198天最低價</p>
</div>
<div class="name">
<p>雷士照明（NVC）LED吸頂部</p>
<p class="now">￥39</p>
<p class="log">￥79</p>
</div>
</div>
<div class="right-01">
<div class="img">
<img src="./img/left-02.webp" alt="">
<p>219天最低價</p>
</div>
<div class="name">
<p>電腦音箱多媒體藍牙音箱低</p>
<p class="now">￥39.8</p>
<p class="log">￥66.9</p>
</div>
</div>
<div class="right-01">
<div class="img">
<img src="./img/left-03.webp" alt="">
<p>66天最低價</p>
</div>
<div class="name">
<p>五斤裝大果紅富士蘋果現摘</p>
<p class="now">￥24.8</p>
<p class="log">￥39.9</p>
</div>
</div>
<div class="right-01">
<div class="img">
<img src="./img/left-04.webp" alt="">
<p>205天最低價</p>
</div>
<div class="name">
<p>康佳消毒櫃家用立式大容量</p>
<p class="now">￥299</p>
<p class="log">￥499</p>
</div>
</div>
</div>
</div>
<!--品牌閃購-->
<div class="body-center-nav-brand">
<div class="body-center-title">
<h1>品牌閃購 <i class="fas fa-chevron-circle-right"></i></h1>
</div>
<div class="left">
<div class="img">
<img src="./img/right-01.webp" alt="">
</div>
</div>
<div class="right">
<div class="right-box">
<div class="img">
<img src="./img/right-02.webp" alt="">
</div>
<p>戶外家具專場</p>
</div>
<div class="right-box">
<div class="img">
<img src="./img/right-03.webp" alt="">
</div>
<p>萬代潮玩專場</p>
</div>
<div class="right-box">
<div class="img">
<img src="./img/right-04.webp" alt="">
</div>
<p>GLOBBER大牌閃購</p>
</div>
<div class="right-box">
<div class="img">
<img src="./img/right-05.webp" alt="">
</div>
<p>媽媽裝大促狂歡</p>
</div>
<div class="right-box">
<div class="img">
<img src="./img/right-06.webp" alt="">
</div>
<p>清潔工具雙11瘋搶</p>
</div>
<div class="right-box">
<div class="img">
<img src="./img/right-07.webp" alt="">
</div>
<p>潮流女包閃購</p>
</div>
</div>
</div>
</div>
<!--發現好貨-->
<div class="look">
<div class="left">
<div class="left-text">
<img src="./img/[email protected]~T$(HXSJF0(IS_)6.png" alt="">
</div>
</div>
<div class="right">
<div class="right-box">
<div class="img">
<img src="./img/look-01.webp" alt="">
</div>
<p>稻草人 連帽 衛衣</p>
</div>
<div class="right-boxx">
<p>SWICKY 大容量 雙肩包</p>
<div class="img">
<img src="./img/look-02.webp" alt="">
</div>
</div>
<div class="right-box">
<div class="img">
<img src="./img/llook-03.webp" alt="">
</div>
<p>天逸 防水 騎行包</p>
</div>
<div class="right-boxx">
<p>出差旅行好物 二合一</p>
<div class="img">
<img src="./img/look-04.webp" alt="">
</div>
</div>
<div class="right-box">
<div class="img">
<img src="./img/look-05.webp" alt="">
</div>
<p>麥格霍斯 尼龍直式</p>
</div>
</div>
</div>
<!--新品首發、排行榜、逛好店、領券中心-->
<div class="news">
<!--新品首發-->
<div class="news-one">
<div class="box-hd">
<p>新品首發 <i class="fas fa-chevron-circle-right"></i></p>
</div>
<div class="img">
<img src="./img/news-01.webp" alt="">
</div>
<p class="news-top">華為 HUAWEI P40 麒麟990 5G</p>
<p class="under">來這裡發現更多新品</p>
<p class="foot">￥<span>4188.00</span>起</p>
</div>
<!--排行榜-->
<div class="news-two">
<div class="box-hd">
<p>新品首發 <i class="fas fa-chevron-circle-right"></i></p>
</div>
<div class="box-nav">
<ul>
<li><a href="javascript:;" class="active">手機</a></li>
<li><a href="javascript:;">大家電</a></li>
<li><a href="javascript:;">休閑食品</a></li>
<li><a href="javascript:;">電腦整機</a></li>
</ul>
</div>
<div class="shops">
<div class="top">
<div class="left">
<p>TOP</p>
<h3>01</h3>
</div>
<div class="img">
<img src="./img/shops-01.webp" alt="">
</div>
<div class="title">Apple iPhone 11(2223)128GB 黑色</div>
</div>
<div class="middle">
<div class="left">
<p>TOP</p>
<h3>02</h3>
</div>
<div class="img">
<img src="./img/shops-02.webp" alt="">
</div>
<div class="title">Apple iPhone 11(2223)128GB 黑色</div>
</div>
<div class="foot">
<div class="left">
<p>TOP</p>
<h3>01</h3>
</div>
<div class="img">
<img src="./img/shops-03.webp" alt="">
</div>
<div class="title">Apple iPhone 11(2223)128GB 黑色</div>
</div>
</div>
</div>
<!--逛好店-->
<div class="news-three">
<div class="box-hd">
<p>逛好店 <i class="fas fa-chevron-circle-right"></i></p>
</div>
<div class="box-01">
<div class="left">
<div class="left-top">
<p>嘉寶京東自營旗艦店</p>
</div>
<div class="left-middle">
<p class="a">自營</p>
<p class="b">育兒心經</p>
</div>
<div class="left-foot">
<p>306.5萬人關注</p>
</div>
</div>
<div class="img">
<img src="./img/box-01-01.webp" alt="">
</div>
</div>
<div class="box-02">
<div class="left">
<div class="left-top">
<p>臻火旗艦店</p>
</div>
<div class="left-middle">
<p class="a">潮流3C</p>
</div>
<div class="left-foot">
<p>17.0萬人關注</p>
</div>
</div>
<div class="img">
<img src="./img/box-02-01.webp" alt="">
</div>
</div>
</div>
<!--領券中心-->
<div class="news-four">
<div class="box-hd">
<p>領券中心 <i class="fas fa-chevron-circle-right"></i></p>
</div>
<ul class="gift">
<li>
<div class="img">
<img src="./img/box-four-01.webp" alt="">
</div>
<div class="right">
<p>￥<span>50</span></p>
<p class="a">
滿500元可用 </p>
<p class="b">
僅可購買雅詩蘭黛品牌...
</p>
</div>
<div class="more">
<p>更多好貨</p>
</div>
</li>
<li>
<div class="img">
<img src="./img/gift-01.webp" alt="">
</div>
<div class="right">
<p>￥<span>150</span></p>
<p class="a">
滿699元可用 </p>
<p class="b">
僅可購買OLAY品牌部分...
</p>
</div>
<div class="more">
<p>更多好貨</p>
</div>
</li>
<li>
<div class="img">
<img src="./img/gift-02.webp" alt="">
</div>
<div class="right">
<p>￥<span>50</span></p>
<p class="a">
滿51元可用 </p>
<p class="b">
僅可購買自營水洗部分...
</p>
</div>
<div class="more">
<p>更多好貨</p>
</div>
</li>
</ul>
</div>
<!-- </div> -->
<!--頻道廣場-->
<div class="square">
<div class="square-title">
<p>頻道廣場</p>
</div>
<div class="center">
<div class="square-nav">
<img src="./img/square-01.webp" alt="">
</div>
<div class="square-nav">
<img src="./img/square-02.webp" alt="">
</div>
<div class="square-box">
<div class="square-box-title">
<p>電腦辦公</p>
<span>科技潮物 惠享不停</span>
</div>
<div class="img">
<img src="./img/square-03.webp" alt="">
</div>
<div class="img">
<img src="./img/square-04.webp" alt="">
</div>
</div>
<div class="square-box1">
<div class="square-box-title">
<p>生鮮館</p>
<span>嘗遍天下鮮</span>
</div>
<div class="img">
<img src="./img/square-05.webp" alt="">
</div>
<div class="img">
<img src="./img/square-06.webp" alt="">
</div>
</div>
<div class="square-box">
<div class="square-box-title">
<p>京東國際</p>
<span>一站盡享進口好物</span>
</div>
<div class="img">
<img src="./img/square-07.webp" alt="">
</div>
<div class="img">
<img src="./img/square-08.webp" alt="">
</div>
</div>
<div class="square-box1">
<div class="square-box-title">
<p>智能數位</p>
<span>盡享好物</span>
</div>
<div class="img">
<img src="./img/square-09.webp" alt="">
</div>
<div class="img">
<img src="./img/square-10.webp" alt="">
</div>
</div>
<div class="square-box">
<div class="square-box-title">
<p>企業購</p>
<span>一站式企業采購平台</span>
</div>
<div class="img">
<img src="./img/square-11.webp" alt="">
</div>
<div class="img">
<img src="./img/square-12.webp" alt="">
</div>
</div>
<div class="square-box">
<div class="square-box-title">
<p>京東超市</p>
<span>一站式國際囤好物</span>
</div>
<div class="img">
<img src="./img/square-13.webp" alt="">
</div>
<div class="img">
<img src="./img/square-14.webp" alt="">
</div>
</div>
<div class="square-box">
<div class="square-box-title">
<p>家裝城</p>
<span>用心裝好家一站式購齊</span>
</div>
<div class="img">
<img src="./img/square-15.webp" alt="">
</div>
<div class="img">
<img src="./img/square-16.webp" alt="">
</div>
</div>
<div class="square-box1">
<div class="square-box-title">
<p>汽車生活</p>
<span>放心養車 愛車無憂</span>
</div>
<div class="img">
<img src="./img/square-17.webp" alt="">
</div>
<div class="img">
<img src="./img/square-18.webp" alt="">
</div>
</div>
<div class="square-box">
<div class="square-box-title">
<p>JOY尋寶</p>
<span>懂你的JOY</span>
</div>
<div class="img">
<img src="./img/square-19.webp" alt="">
</div>
<div class="img">
<img src="./img/square-20.webp" alt="">
</div>
</div>
<div class="square-box">
<div class="square-box-title">
<p>食品飲料</p>
<span>吃貨嘉年華</span>
</div>
<div class="img">
<img src="./img/square-21.webp" alt="">
</div>
<div class="img">
<img src="./img/square-22.webp" alt="">
</div>
</div>
<div class="square-box">
<div class="square-box-title">
<p>玩3C</p>
<span>潮流電子 炫酷來襲</span>
</div>
<div class="img">
<img src="./img/square-23.webp" alt="">
</div>
<div class="img">
<img src="./img/square-24.webp" alt="">
</div>
</div>
<div class="square-box1">
<div class="square-box-title">
<p>京東京造</p>
<span>京東自有品牌</span>
</div>
<div class="img">
<img src="./img/square-25.webp" alt="">
</div>
<div class="img">
<img src="./img/square-26.webp" alt="">
</div>
</div>
<div class="square-box">
<div class="square-box-title">
<p>新機首發</p>
<span>有新機更有範</span>
</div>
<div class="img">
<img src="./img/square-27.webp" alt="">
</div>
<div class="img">
<img src="./img/square-28.webp" alt="">
</div>
</div>
<div class="square-box">
<div class="square-box-title">
<p>京東金融</p>
<span>會理财 懂生活</span>
</div>
<div class="img">
<img src="./img/square-29.webp" alt="">
</div>
<div class="img">
<img src="./img/square-30.webp" alt="">
</div>
</div>
<div class="square-box">
<div class="square-box-title">
<p>京東工業品</p>
<span>一站式工業品采購</span>
</div>
<div class="img">
<img src="./img/square-31.webp" alt="">
</div>
<div class="img">
<img src="./img/square-32.webp" alt="">
</div>
</div>
<div class="square-box1">
<div class="square-box-title">
<p>企業好店</p>
<span>企業使用者都在逛</span>
</div>
<div class="img">
<img src="./img/square-33.webp" alt="">
</div>
<div class="img">
<img src="./img/square-34.webp" alt="">
</div>
</div>
</div>
</div>
<!--為你推薦-->
<div class="recommend">
<div class="recommend-title">
<p>為你推薦</p>
</div>
<div class="recommend-nav">
<ul>
<li><a href="#" class="active">精選</a></li>
<span></span>
<li><a href="#">智能先鋒</a></li>
<span></span>
<li><a href="#">居家優品</a></li>
<span></span>
<li><a href="#">超市百貨</a></li>
<span></span>
<li><a href="#">時尚達人</a></li>
<span></span>
<li><a href="#">進口好物</a></li>
</ul>
</div>
<div class="recommend-center">
<div class="recommend-box">
<div class="img">
<img src="./img/recommend-01.webp" alt="">
</div>
<div class="title">
<p>【品牌直營】廚房地墊腳墊防滑防油家用進門防水墊子吸...</p>
</div>
<div class="rmb">
<p>￥<span>98</span>.00</p>
</div>
</div>
<div class="recommend-box">
<div class="img">
<img src="./img/recommend-02.webp" alt="">
</div>
<div class="title">
<p>立久佳X7跑步機家用智能生态款 職位華為運動健康手表...</p>
</div>
<div class="rmb">
<p>￥<span>1899</span>.00</p>
</div>
</div>
<div class="recommend-box">
<div class="img">
<img src="./img/recommend-03.webp" alt="">
</div>
<div class="title">
<p>【品牌直營】餐邊櫃 碗櫃現代簡約靠牆家用廚房儲物櫃...</p>
</div>
<div class="rmb">
<p>￥<span>538</span>.00</p>
</div>
</div>
<div class="recommend-box">
<div class="img">
<img src="./img/recommend-04.webp" alt="">
</div>
<div class="title">
<p>Tata/他她冬專櫃同款牛皮革馬丁靴拉鍊厚底女短靴WGK01...</p>
</div>
<div class="rmb">
<p>￥<span>599</span>.00</p>
</div>
</div>
<div class="recommend-box1">
<div class="img">
<img src="./img/recommend-05.webp" alt="">
</div>
<div class="title">
<p>車載洗車器 12v水泵高壓洗車清潔簡易便攜式自吸電動...</p>
</div>
<div class="rmb">
<p>￥<span>129</span>.00</p>
</div>
</div>
<div class="recommend-box">
<div class="img">
<img src="./img/recommend-06.webp" alt="">
</div>
<div class="title">
<p>皓頓HAUT TON男靴馬丁靴男中高幫時尚休閑皮靴</p>
</div>
<div class="rmb">
<p>￥<span>338</span>.00</p>
</div>
</div>
<div class="recommend-box">
<div class="img">
<img src="./img/recommend-07.webp" alt="">
</div>
<div class="title">
<p>廚房不鏽鋼支架盆水槽雙槽帶水鬥池盆架洗菜洗臉洗碗...</p>
</div>
<div class="rmb">
<p>￥<span>288</span>.00</p>
</div>
</div>
<div class="recommend-box">
<div class="img">
<img src="./img/recommend-08.webp" alt="">
</div>
<div class="title">
<p>香奈兒（Chanel）口紅炫亮魅力絲絨58#啞光女士情人生日...</p>
</div>
<div class="rmb">
<p>￥<span>258</span>.00</p>
</div>
</div>
<div class="recommend-box">
<div class="img">
<img src="./img/recommend-09.webp" alt="">
</div>
<div class="title">
<p>INS北歐風超大原點餅幹地墊兒童遊戲墊帳篷地墊兒童房...</p>
</div>
<div class="rmb">
<p>￥<span>389</span>.00</p>
</div>
</div>
<div class="recommend-box1">
<div class="img">
<img src="./img/recommend-10.webp" alt="">
</div>
<div class="title">
<p>Columbia哥倫比亞戶外20秋冬新品男子650篷熱能熱壓...</p>
</div>
<div class="rmb">
<p>￥<span>799</span>.00</p>
</div>
</div>
<div class="recommend-box">
<div class="img">
<img src="./img/recommend-11.webp" alt="">
</div>
<div class="title">
<p>可加熱泡面碗帶蓋日式大容量易清洗微波爐可用網紅玻璃...</p>
</div>
<div class="rmb">
<p>￥<span>80</span>.00</p>
</div>
</div>
<div class="recommend-box">
<div class="img">
<img src="./img/recommend-12.webp" alt="">
</div>
<div class="title">
<p>九牧（JOMOO）挂件毛巾架浴巾架套太空鋁五金挂件...</p>
</div>
<div class="rmb">
<p>￥<span>459</span>.00</p>
</div>
</div>
<div class="recommend-box">
<div class="img">
<img src="./img/recommend-13.webp" alt="">
</div>
<div class="title">
<p>惜惜緣軟門簾夏季防蚊空調透明PVC塑膠防風擋風隔斷簾...</p>
</div>
<div class="rmb">
<p>￥<span>89</span>.00</p>
</div>
</div>
<div class="recommend-box">
<div class="img">
<img src="./img/recommend-14.webp" alt="">
</div>
<div class="title">
<p>vvs【包安裝】網紅款現代簡約燈具套餐led客廳燈吸頂燈...</p>
</div>
<div class="rmb">
<p>￥<span>4288</span>.00</p>
</div>
</div>
<div class="recommend-box1">
<div class="img">
<img src="./img/recommend-15.webp" alt="">
</div>
<div class="title">
<p>石茶盤 石頭茶盤 天然黑金石功夫石茶台茶具托茶海排...</p>
</div>
<div class="rmb">
<p>￥<span>729</span>.00</p>
</div>
</div>
</div>
</div>
<!--多快好省-->
<div class="good">
<ul>
<li>
<div class="div">
多
</div>
<span>品類齊全，輕松購物</span>
</li>
<li>
<div class="div">
快
</div>
<span>多倉直發，急速配送</span>
</li>
<li>
<div class="div">
好
</div>
<span>正品行貨，精緻服務</span>
</li>
<li class="a">
<div class="div">
省
</div>
<span>天天低價，暢選無憂</span>
</li>
</ul>
</div>
<!--body-center的另一半-->
</div>
</div>
<!--結尾部分-->
<div class="footer"></div>
<!--body的另一半-->
</div>
<!--網頁結尾-->
<div class="footer">
<div class="footer-center">
<div class="left">
<ul>
<li class="a"><p>購物資訊</p>
<ul>
<li><a href="#">購物流程</a></li>
<li><a href="#">會員介紹</a></li>
<li><a href="#">生活旅行</a></li>
<li><a href="#">常見問題</a></li>
<li><a href="#">大家電</a></li>
<li><a href="#">聯系客服</a></li>
</ul>
</li>
<li class="a"><p>配送方式</p>
<ul>
<li><a href="#">上門自提</a></li>
<li><a href="#">211限時達</a></li>
<li><a href="#">配送服務查詢</a></li>
<li><a href="#">配送費收取标準</a></li>
<li><a href="#">海外配送</a></li>
</ul>
</li>
<li class="a"><p>支付方式</p>
<ul>
<li><a href="#">貨到付款</a></li>
<li><a href="#">線上支付</a></li>
<li><a href="#">分期付款</a></li>
<li><a href="#">公司轉賬</a></li>
</ul>
</li>
<li class="a"><p>售後服務</p>
<ul>
<li><a href="#">售後政策</a></li>
<li><a href="#">價格保護</a></li>
<li><a href="#">退款說明</a></li>
<li><a href="#">返修/退換貨</a></li>
<li><a href="#">取消訂單</a></li>
</ul>
</li>
<li class="a"><p>特色服務</p>
<ul>
<li><a href="#">奪寶島</a></li>
<li><a href="#">DIY裝機</a></li>
<li><a href="#">延保服務</a></li>
<li><a href="#">京東E卡</a></li>
<li><a href="#">京東通信</a></li>
<li><a href="#">京魚座智能</a></li>
</ul>
</li>
</ul>
</div>
<div class="right">
<p>京東自營覆寫區縣</p>
<p class="txt">
京東已向全國2661個區縣提供自營配送服務，支援貨到付款、POS機刷卡和售後上門服務。
</p>
<p class="details">
<a href="#">檢視詳情 ></a>
</p>
</div>
</div>
</div>
<!--版權資訊-->
<div class="footing">
<div class="footing-center">
<ul class="nav">
<li><a href="">關于我們</a></li>
<span></span>
<li><a href="">聯系我們</a></li>
<span></span>
<li><a href="">聯系客服</a></li>
<span></span>
<li><a href="">合作招商</a></li>
<span></span>
<li><a href="">商家幫助</a></li>
<span></span>
<li><a href="">營銷中心</a></li>
<span></span>
<li><a href="">手機京東</a></li>
<span></span>
<li><a href="">友情連結</a></li>
<span></span>
<li><a href="">銷售聯盟</a></li>
<span></span>
<li><a href="">京東社群</a></li>
<span></span>
<li><a href="">風險監測</a></li>
<span></span>
<li><a href="">隐私政策</a></li>
<span></span>
<li><a href="">京東公益</a></li>
<span></span>
<li><a href="">English Site</a></li>
<span></span>
<li><a href="">Media & IR</a></li>
</ul>
<div class="copyright">
<a href="#">京公網安備 1100000000200088号</a>
<a href="#">京ICP證070359号</a>
<a href="#">網際網路藥品資訊服務資格證編号(京)-經營性-2014-0008</a>
<a href="#">新出發京零 字第大120007号</a>
<br>
<a href="#">網際網路出版許可證編号新出網證(京)字150号</a>
<a href="#">出版物經營許可證</a>
<a href="#">網絡文化經營許可證京網文[2014]2148-348号</a>
<a href="#">違法和不良資訊舉報電話：4006561155</a>
<br>
<a href="#">Copyright © 2004 - </a>
<a href="#">消費者維權熱線：4006067733</a>
<a href="#">(京)網械平台備字(2018)第00003号</a>
<a href="#">營業執照</a><br>
<a href="#">京東旗下網站：京東錢包</a>
<a href="#">京東智聯雲</a>
</div>
</div>
</div>
</body>
</html>
css檔案夾的結構如下所示：
index.css代碼如下：
.top-img{
position: relative;
}
.top-img .del{
position: absolute;
top: 10px;
right: -130px;/* 随分辨率改變 */
width: 20px;
height: 20px;
}
.top-img .del img{
width: 20px;
height: 20px;
cursor: pointer;
}
style.css代碼如下：
body {
font: 12px/1.5 Microsoft YaHei, tahoma, arial, Hiragino Sans GB, \\5b8b\4f53, sans-serif;
}
.header {
background-color: #b3003d;
cursor: pointer;
}
/* .top-img-left img{
width: 190px;
height: 80px;
float: left;
} */
.top-img {
/* float: left; */
width: 1190px;
height: 80px;
margin: 0 auto;
}
.top {
width: 100%;
height: 31px;
background-color: #e3e4e5;
color: #999999;
}
.top-left{
position: relative;
}
.top-left .position {
float: left;
position: relative;
width: 58px;
height: 30px;
z-index: 9999;
border-bottom: none;
text-align: center;
border: 1px solid transparent;
/* background-color: white; */
}
.top-right {
float: right;
}
.top i {
font-size: 14px;
color: #F10215;
}
.top .top-center {
width: 1190px;
height: 100%;
line-height: 30px;
margin: 0 auto;
}
.top-right li {
float: left;
}
.top-right i.fa-sort-down {
color: #999999;
font-size: 12px;
}
.top-right .middle {
width: 1px;
height: 10px;
background-color: #cfd0d0;
float: left;
margin-top: 12px;
margin: 10px 15px;
}
.top-right .free {
color: #F10215;
}
.top-right a {
text-decoration: none;
color: #999999;
}
.top-right a:hover {
color: #F10215;
}
.top-left a {
text-decoration: none;
color: #F10215;
}
.top-left .chengshi {
width: 260px;
height: 470px;
position: absolute;
border: #999999 1px solid;
background-color: white;
box-shadow: 1px 1px 3px #999999;
margin-left: -8px;
/*随着電腦分辨率而改變*/
z-index: 999;
top: 30px;/**/
left: 8px;
padding: 10px;
padding-top: 15px;
padding-left: 13px;
display: none;
}
.top-left .chengshi li {
float: left;
margin-right: 15px;
margin-bottom: 10px;
}
.top-left .chengshi a {
color: #999999;
display: block;
padding: 0px 5px;
}
.top-left .chengshi {
color: #999999;
}
.top-left .chengshi .top-middle {
width: 240px;
/* height: 100px; */
margin: 0 auto;
border-top: 1px solid #dedede;
border-bottom: 1px solid #dedede;
float: left;
}
.top-left .top-middle li.a {
margin-right: 100px;
color: #999999;
margin-top: 3px;
margin-left: 6px;
/*地區專享位置*/
}
.top-left .top-middle a:hover {
color: #F10215;
background-color: white;
}
.top-left .top-middle li.b {
margin-right: 60px;
}
.top-left .chengshi a:hover {
background-color: #CFD0D0;
color: #F10215;
}
.top-left:hover .position {
background-color: white;
border: #999999 1px solid;
border-bottom: none;
}
.top-left:hover .chengshi {
display: block;
}
.top-left .top-left-foot .c {
margin-left: 3px;
margin-right: 100px;
}
.top-right .top-right-w {
position: relative;
border: 1px solid transparent;
border-bottom: none;
height: 31px;
z-index: 9999;
}
.top-right .top-right-w:hover {
background-color: white;
border: 1px solid #999999;
border-bottom: none;
}
.top-right .top-right-w:hover .top-right-my {
display: block;
border: 1px solid #999999;
box-shadow: 1px 3px 3px #999999;
border-top: none;
}
.top-right .top-right-my {
width: 270px;
position: absolute;
height: 160px;
padding: 10px;
left: -1px;
background-color: white;
display: none;
z-index: 999;
}
.top-right .top-right-my li {
margin-right: 30px;
margin-left: 30px;
}
.top-right .top-right-my .up {
width: 100%;
height: 100px;
border-bottom: 1px #DEDEDE solid;
}
.top-right .top-right-my ul li.one {
float: left;
margin-left: 41px;
}
.top-right .top-right-my ul li.two {
float: left;
margin-left: 41px;
}
.top-right .two {
position: relative;
border: 1px solid transparent;
z-index: 9999;
}
.top-right .two:hover {
background-color: white;
border: 1px solid #999999;
border-bottom: none;
}
.top-right .two .two-show {
width: 120px;
height: 90px;
position: absolute;
background-color: white;
padding: 10px;
border: 1px solid #999999;
box-shadow: 1px 3px 3px #999999;
left: -1px;
display: none;
border-top: none;
z-index: 999;
}
.top-right .two:hover .two-show {
display: block;
box-shadow: 1px 3px 3px #999999;
}
.top-right .two .two-show li {
float: left;
margin-right: 10px;
}
.top-right .three {
position: relative;
border: 1px solid transparent;
height: 31px;
z-index: 9999;
border-bottom: none;
}
.top-right .three:hover {
background-color: white;
border: 1px solid #999999;
border-bottom: none;
}
.top-right .three:hover .three-show {
box-shadow: 1px 3px 3px #999999;
display: block;
border: 1px solid #999999;
border-top: none;
}
.top-right .three-show {
padding-top: 10px;
z-index: 999;
display: none;
position: absolute;
width: 160px;
height: 310px;
left: -102px;
background-color: white;
border: 1px solid transparent;
border-top: none;
}
.top-right .three-show p {
color: black;
font-size: 13px;
margin-left: 10px;
}
.top-right .three-show .s {
border-bottom: 1px solid #CFD0D0;
height: 190px;
}
.top-right .three-show li {
margin-left: 10px;
margin-right: 10px;
}
.top-right .four{
position: relative;
}
.top-right .four .four-show {
z-index: 9999;
width: 1190px;
height: 180px;
margin: 0 auto;
position: absolute;
top: 30px; /**/
left: -1050px; /*174*/
/*因為分辨率不同進行調整改變*/
border: 1px solid #999999;
border-top: none;
padding-top: 10px;
padding-bottom: 10px;
box-shadow: 1px 3px 3px #999999;
background-color: white;
}
.top-right .four-show-one {
padding-left: 30px;
width: 330px;
height: 170px;
border-right: 1px #CFD0D0 solid;
float: left;
}
.top-right .four-show li {
margin-right: 30px;
}
.top-right .four-show p {
font-size: 13px;
color: #000000;
}
.top-right .four-show-two {
padding-left: 20px;
width: 230px;
height: 170px;
float: left;
border-right: 1px #CFD0D0 solid;
}
.top-right .four-show-three {
padding-left: 20px;
width: 230px;
height: 170px;
float: left;
border-right: 1px #CFD0D0 solid;
background-color: white;
}
.top-right .four-show-four {
padding-left: 20px;
width: 300px;
height: 170px;
float: left;
}
.top-right .four {
height: 31px;
}
.top-right .four:hover {
background-color: white;
}
.top-right .four:hover .four-show {
background-color: white;
display: block;
}
.top-right .four-show {
display: none;
}
.find {
/* margin-top: 1px; */
width: 100%;
height: 141px;
/* background-color: #999999; */
box-shadow: 0px 3px 3px #CFD0D0;
border-bottom: 1px solid #e7e7e7;
}
.find .find-center {
width: 1190px;
height: 141px;
margin: 0 auto;
/* background-color: #F10215; */
}
.find .find-center .logo {
clear: both;
position: relative;
/* margin-left: -60px; */
width: 190px;
height: 131px;
float: left;
/* background-color: greenyellow; */
padding-top: 10px;
}
.find .find-center .logo img {
width: 100%
}
.find .find-center .find-center-middle {
width: 790px;
height: 141px;
/* background-color: #ffff00; */
float: left;
margin-left: -20px;
}
.find .find-center-middle .look {
width: 740px;
height: 40px;
margin: 20px auto;
margin-left: 30px;
/**/
}
.find-center-middle input {
/* margin-top: 25px; */
/* margin-left: 70px; */
width: 500px;
height: 36px;
float: left;
text-indent: 1em;
margin-left: 25px;
}
.input-box {
width: 50px;
height: 40px;
border: 1px solid #000000;
float: left;
text-align: center;
line-height: 40px;
font-size: 18px;
color: white;
background-color: #E12518;
cursor: pointer;
/* margin-left: 25px; */
}
.input-box:hover {
background-color: #b91b13;
}
.find-center-middle .look-up {
width: 560px;
height: 30px;
/*随電腦分辨率而改變*/
margin: 0 auto;
margin-left: 60px;
margin-top: -20px;
line-height: 30px;
font-size: 12px;
}
.find-center-middle .look-up li {
float: left;
margin-right: 10px;
}
.find-center-middle .look-up span {
color: #B91B13;
}
.find-center-middle .look-up a {
text-decoration: none;
color: #999999;
}
.find-center-middle .look-up a:hover {
color: #B91B13;
}
.find-center-middle .look-under {
width: 700px;
height: 40px;
position: relative;
margin: 0 auto;
margin-top: 10px;
/*因電腦分辨率而改變*/
line-height: 40px;
}
.find .look-under li {
float: left;
margin-right: 15px;
}
.find .look-under a {
text-decoration: none;
color: #333333;
font-size: 15px;
}
.find .look-under a:hover {
color: #B91B13;
}
.find .look-under span {
color: #E1252B;
font-weight: bolder;
}
.find .find-center-middle .look-buy {
width: 150px;
height: 40px;
border: 1px #DEDEDE solid;
float: right;
margin-right: -15px;
text-align: center;
line-height: 40px;
}
.find .find-center-middle .look-buy i {
color: orangered;
}
.find .find-center-middle .look-buy:hover {
border: 1px solid red;
}
.find .find-center .find-right {
width: 210px;
height: 30px;
float: left;
margin-left: 0px;
cursor: pointer;
}
.find .find-center .find-right img {
width: 100%;
}
.body {
background: url(../img/body1.webp) 50% 0px no-repeat;
width: 100%;
height: 4750px;
/*内容高度，可改變,随分辨率變化*/
background-color: #f4f4f4;
padding-top: 10px;
}
.body .body-center {
width: 1190px;
height: 100%;
/* background-color: #E1252B; */
margin: 0 auto;
}
.body .body-center .body-center-left {
width: 190px;
height: 450px;
background-color: white;
float: left;
padding: 10px 0;
color: #636363;
overflow: hidden;
}
.body .body-center .body-center-left li {
width: 100%;
transition: all 0.2s;
text-indent: 2em;
padding: 2.1px 0;
}
.body .body-center .body-center-left li:hover {
background-color: #d9d9d9;
}
.body .body-center .body-center-left a {
font: Microsoft YaHei, tahoma, arial, Hiragino Sans GB, \\5b8b\4f53, sans-serif;
font-size: 14px;
color: #333333;
text-decoration: none;
}
.body .body-center .body-center-left a:hover {
color: #B91B13;
}
.body .body-center .body-center-middle {
float: left;
width: 590px;
height: 470px;
margin-left: 10px;
margin-right: 10px;
position: relative;
}
/*設定輪播圖的樣式*/
.body .body-center .body-center-middle ul {
width: 590px;
height: 470px;
}
.body .body-center .body-center-middle img {
width: 590px;
height: 470px;
}
.body .body-center .body-center-middle li {
position: absolute;
}
/*設定導航點的樣式*/
.body .body-center .body-center-middle .pointer {
z-index: 9999;
position: absolute;
bottom: 20px;
left: 10px;
}
.body .body-center .body-center-middle .pointer a {
width: 10px;
height: 10px;
background-color: rgba(255, 255, 255, .5);
margin-left: 4px;
border-radius: 50%;
float: left;
/*将背景顔色值設定到内容區*/
background-clip: content-box;
border: transparent 2px solid;
}
.body .body-center .body-center-middle .pointer .active,
.body .body-center .body-center-middle .pointer a:hover {
background-color: white;
border: 2px solid rgba(255, 255, 255, .5);
}
.body .body-center .body-center-middle .banner-last {
left: 0px;
background-color: #c5c5c5;
opacity: 0.6;
width: 25px;
height: 45px;
line-height: 45px;
top: 200px;
bottom: 0px;
color: whitesmoke;
text-align: center;
font-size: 20px;
position: absolute;
cursor: pointer;
}
.body .body-center .body-center-middle .banner-last:hover {
background-color: #999999;
}
.body .body-center .body-center-middle .banner-next:hover {
background-color: #999999;
}
.body .body-center .body-center-middle .banner-next {
right: 0px;
background-color: #c5c5c5;
opacity: 0.6;
width: 25px;
height: 45px;
line-height: 45px;
top: 200px;
bottom: 0px;
color: whitesmoke;
text-align: center;
font-size: 20px;
position: absolute;
cursor: pointer;
}
.banner-last i,
.banner-next i {
color: whitesmoke;
}
.body .body-center .body-center-boxs {
float: left;
margin-right: 10px;
width: 190px;
height: 470px;
/* background-color: white; */
}
.body .body-center .body-center-boxs .body-center-box {
display: block;
cursor: pointer;
width: 190px;
height: 150px;
margin-bottom: 10px;
overflow: hidden;
position: relative;
transition: all 0.6s;
}
.body .body-center .body-center-boxs .body-center-box:hover {
transform: scale(1.1);
}
.body .body-center .body-center-boxs .body-center-box img {
/* transition: all 1s; */
width: 190px;
height: 150px;
}
.body .body-center .body-center-right {
float: left;
width: 190px;
height: 470px;
background-color: white;
}
.body .body-center .body-center-right .body-center-right-top {
width: 190px;
height: 100px;
float: left;
}
.body-center-right .body-center-right-top .user {
width: 44px;
height: 44px;
border-radius: 50%;
overflow: hidden;
margin-top: 10px;
margin-left: 20px;
float: left;
cursor: pointer;
}
.body-center-right .body-center-right-top .user-tip {
color: #666666;
font-size: 12px;
line-height: 50px;
float: left;
margin-left: 16px;
}
.body-center-right .body-center-right-top .user-login a {
text-decoration: none;
color: #333333;
font-size: 12px;
float: left;
margin-top: -10px;
/*因電腦分辨率不同進行改變*/
margin-left: 16px;
}
.body-center-right .body-center-right-top .user-login a:hover,
.body-center-right .body-center-right-top .user-reg a:hover {
color: #c81623;
}
.body-center-right .body-center-right-top .user-reg a {
text-decoration: none;
color: #333333;
font-size: 12px;
float: left;
margin-top: -10px;
}
.body-center-right .body-center-right-top .user-span {
float: left;
margin: 0 5px;
margin-top: -10px;
}
.body-center-right .body-center-right-top .user img {
width: 44px;
height: 44px;
}
.body-center-right .body-center-right-top .input {
width: 190px;
height: 30px;
float: left;
padding: 10px 0;
}
.body-center-right .body-center-right-top .input .left {
width: 70px;
height: 25px;
background-color: #e1251b;
float: left;
margin-left: 20px;
border-radius: 20px;
color: white;
text-align: center;
line-height: 25px;
cursor: pointer;
}
.body-center-right .body-center-right-top .input .left:hover {
background-color: #c81623;
color: white;
}
.body-center-right .body-center-right-top .input .right {
width: 70px;
height: 25px;
background-color: #363634;
margin-left: 10px;
color: #e5d790;
float: left;
border-radius: 20px;
text-align: center;
line-height: 25px;
cursor: pointer;
}
.body-center-right .body-center-right-top .input .right:hover {
background-color: #c81623;
color: white;
}
.body .body-center .body-center-right .body-center-right-middle {
padding: 0 10px;
width: 170px;
height: 130px;
float: left;
margin: 4px 0;
}
.body-center-right .body-center-right-middle .news-title {
width: 190px;
height: 30px;
}
.body-center-right .body-center-right-middle .news-title h5 {
font-size: 14px;
color: #333333;
float: left;
font-weight: bolder;
}
.body-center-right .body-center-right-middle .news-title a {
text-decoration: none;
color: #999999;
float: left;
margin-top: 3px;
margin-left: 70px;
/*因分辨率不用而改變*/
}
.body-center-right .body-center-right-middle .news-title a:hover {
color: #c81623;
}
.body-center-right .body-center-right-middle .news-list {
width: 170px;
height: 88px;
/* background-color: lightblue; */
}
.body-center-right .body-center-right-middle .news-list li {
margin-bottom: 5px;
/* float: left; */
}
.body-center-right .body-center-right-middle .news-list p {
width: 35px;
height: 16px;
background-color: rgba(225, 37, 27, .08);
text-align: center;
float: left;
margin-right: 12px;
color: #e1251b;
}
.body-center-right .body-center-right-middle .news-list a {
text-decoration: none;
color: #666666;
}
.body-center-right .body-center-right-middle .news-list a:hover {
color: #E1251B;
}
.body .body-center .body-center-right .body-center-right-bottom {
width: 190px;
height: 230px;
/* background-color: #00ff7f; */
float: left;
}
.body-center-right .body-center-right-bottom .box {
width: 62px;
height: 49px;
float: left;
padding-top: 7px;
margin-right: 1px;
margin-bottom: 1px;
text-align: center;
font-size: 12px;
color: #333333;
cursor: pointer;
}
.body-center-right .body-center-right-bottom .box i.one {
font-size: 27px;
color: cornflowerblue;
margin-bottom: 5px;
}
.body-center-right .body-center-right-bottom .box i.two {
font-size: 27px;
color: #f2a234;
margin-bottom: 5px;
}
.body-center-right .body-center-right-bottom .box i.three {
font-size: 27px;
color: #46d8c8;
margin-bottom: 5px;
}
.body-center-right .body-center-right-bottom .box i.five {
font-size: 27px;
color: #ea665d;
margin-bottom: 5px;
}
.body-center-right .body-center-right-bottom .box i:hover,
.body-center-right .body-center-right-bottom .box {
color: #B91B13;
}
.body .body-center .body-center-right span {
width: 130px;
height: 1px;
background-color: #999999;
margin: auto;
margin-left: 25px;
float: left;
display: block;
}
.body .time {
width: 100%;
height: 260px;
background-color: azure;
float: left;
margin-top: 20px;
position: relative;
}
.time .time-one {
width: 190px;
height: 260px;
background-color: red;
float: left;
background-image: url(../img/time.png);
background-size: cover;
text-align: center;
}
.time .time-one-title {
font-size: 30px;
color: #fff;
margin-top: 30px;
font-weight: bolder;
}
.time .time-one-txt span {
color: white;
font-weight: bolder;
font-size: 18px;
}
.time .time-one-times {
width: 130px;
height: 30px;
/* background-color: #00FFFF; */
margin: 10px auto;
}
.time .time-one-time {
width: 30px;
height: 30px;
background-color: black;
float: left;
color: white;
text-align: center;
line-height: 30px;
font-size: 20px;
font-weight: bolder;
}
.time .time-one-times span {
float: left;
font-size: 30px;
line-height: 25px;
color: #fff;
margin: 0 6px;
}
.time .time-one-txt {
font-size: 16px;
color: #fff;
margin-top: 90px;
}
.time .time-box {
width: 199px;
height: 230px;
float: left;
padding-top: 30px;
text-align: center;
background-color: white;
border-right: 1px dashed #999999;
}
.time .time-box .time-box-img {
width: 140px;
height: 140px;
margin-left: 30px;
margin-bottom: 30px;
}
.time .time-box .time-box-img img {
width: 140px;
height: 140px;
}
.time .time-box .money {
font-size: 16px;
color: red;
}
.time .time-box .money span {
color: #999999;
}
.time .time-box .money .title {
font-size: 12px;
color: #333333;
margin-top: -3px;
margin-bottom: 5px;
}
.body .body-warp {
float: left;
margin: 0 auto;
width: 1270px;
margin-left: -35px;
/*随分辨率而改變*/
height: 590px;
margin-top: 30px;
background-image: url(../img/center.webp);
background-size: cover;
/* cursor: pointer; */
}
.body .body-center .body-warp .boxs {
padding-top: 150px;
margin-left: 40px;
}
.body .body-center .body-warp .box {
width: 190px;
height: 210px;
background-color: white;
float: left;
margin-right: 10px;
margin-bottom: 10px;
cursor: pointer;
}
.body .body-center .body-warp .box-01 {
width: 190px;
height: 210px;
background-color: #cd0053;
float: left;
margin-right: 10px;
margin-bottom: 10px;
cursor: pointer;
}
.body .body-center .body-warp .box .img {
width: 130px;
height: 130px;
margin: 0 auto;
}
.body .body-center .body-warp .box .img img {
width: 130px;
height: 130px;
}
.body .body-center .body-warp .box .body-warp-title {
width: 174px;
height: 30px;
margin: 0 auto;
margin-top: 10px;
background: url(../img/body-warp-title.webp);
background-size: cover;
line-height: 30px;
text-align: center;
font-size: 17px;
color: #FFFFFF;
font-weight: 600;
}
.body .body-center .body-warp .bottom {
width: 190px;
height: 70px;
background-color: #ffe485;
}
.body .body-center .body-warp .box .body-warp-title img {
width: 174px;
height: 30px;
}
.body .body-center .body-warp .box p.center {
line-height: 20px;
font-size: 16px;
color: #DE452b;
text-align: center;
margin-top: 6px;
}
.body .body-center .body-warp .box-01 .box-box1 {
width: 190px;
height: 100px;
margin-bottom: 10px;
}
.body .body-center .body-warp .box-01 .box-box1 img {
width: 190px;
height: 100px;
}
.body .body-center .body-warp .box-01 .box-box2 {
width: 190px;
height: 100px;
}
.body .body-center .body-warp .box-01 .box-box2 img {
width: 190px;
height: 100px;
}
.body .body-center .body-center-nav {
width: 100%;
height: 360px;
/* background-color: #46D8C8; */
float: left;
margin-top: 30px;
}
.body-center .body-center-nav .body-center-nav-every {
width: 590px;
height: 360px;
background-color: white;
float: left;
margin-right: 10px;
text-align: center;
}
.body-center .body-center-nav .body-center-nav-brand {
width: 590px;
height: 360px;
background-color: white;
float: left;
}
.body-center .body-center-nav .body-center-title {
width: 550px;
height: 60px;
/* background-color: aquamarine; */
padding: 0 20px;
line-height: 60px;
font-size: 24px;
font-weight: bolder;
color: #333333;
}
.body-center .body-center-nav .body-center-title h1 {
width: 150px;
float: left;
}
.body-center .body-center-nav .body-center-title h1 i {
font-size: 13px;
color: #E12518;
}
.body-center .body-center-nav .title-nav {
float: right;
color: #000000;
font-size: 14px;
}
.body-center .body-center-nav .title-nav li {
float: left;
margin-left: 20px;
}
.body-center .body-center-nav .title-nav li.active {
border-bottom: red;
}
.body-center .body-center-nav .title-nav a {
text-decoration: none;
color: #999999;
}
.body-center .body-center-nav .title-nav a:hover,
.body-center .body-center-nav .title-nav a.active {
color: #E12518;
}
.body-center .body-center-nav .body-center-nav-every .left {
width: 170px;
height: 250px;
float: left;
background-color: #f8f8f9;
margin-top: 20px;
margin-left: 20px;
cursor: pointer;
}
.body-center .body-center-nav .body-center-nav-every .right {
width: 380px;
/*可改變*/
height: 250px;
float: right;
margin-top: 20px;
}
.body-center .body-center-nav .body-center-nav-every .right .right-01 {
width: 180px;
height: 84px;
/* background-color: red; */
float: left;
margin-right: 10px;
margin-bottom: 60px;
margin-top: 10px;
}
.body-center .body-center-nav .body-center-nav-every .right .right-01 .img {
width: 84px;
height: 84px;
float: left;
z-index: 99;
cursor: pointer;
}
.body-center .body-center-nav .body-center-nav-every .right .right-01 .img p {
width: 84px;
height: 16px;
z-index: 999;
color: #FFFFFF;
background-color: #000000;
font-size: 12px;
text-align: center;
line-height: 16px;
margin-top: -20px;
/*因分辨率不同而改變*/
position: absolute;
}
.body-center .body-center-nav .body-center-nav-every .right .right-01 .name p {
width: 75px;
height: 32px;
float: left;
color: #333333;
font-size: 12px;
cursor: pointer;
}
.body-center .body-center-nav .body-center-nav-every .right .right-01 .name p.now {
font-size: 14px;
color: #E12518;
margin-top: 17px;
margin-bottom: -16px;
}
.body-center .body-center-nav .body-center-nav-every .right .right-01 .name p.log {
color: #999999;
font-size: 12px;
text-decoration: line-through;
}
.body-center .body-center-nav .body-center-nav-every .right .right-01 .name p:hover {
color: #B91B13;
}
.body-center .body-center-nav .body-center-nav-every .right .right-01 .img img {
width: 84px;
height: 84px;
}
.t {
width: 90px;
height: 24px;
font-size: 12px;
color: white;
font-weight: bold;
background-color: #f7a400;
text-align: center;
line-height: 24px;
}
.body-center .body-center-nav .body-center-nav-every .left .img {
width: 120px;
height: 120px;
margin: 20px auto;
}
.body-center .body-center-nav .body-center-nav-every .left .img img {
width: 120px;
height: 120px;
}
.body-center .body-center-nav .body-center-nav-every h2 {
font-size: 14px;
color: #333333;
}
.body-center .body-center-nav .body-center-nav-every h3 {
font-size: 18px;
color: #e1251b;
}
.body-center .body-center-nav .body-center-nav-every h2:hover {
color: #E12518;
}
.body-center .body-center-nav .body-center-nav-every h3 span {
font-size: 12px;
color: #999999;
text-decoration: line-through;
}
.body-center .body-center-nav .body-center-nav-brand .left .img {
width: 270px;
height: 265px;
float: left;
margin-left: 20px;
margin-top: 20px;
}
.body-center .body-center-nav .body-center-nav-brand .left .img img {
width: 270px;
height: 265px;
float: left;
}
.body-center .body-center-nav .body-center-nav-brand .right {
width: 272px;
height: 312px;
float: right;
margin-top: -20px;
/*随電腦分辨率而改變*/
margin-right: 10px;
/*随電腦分辨率而改變*/
}
.body-center .body-center-nav .body-center-nav-brand .right .right-box {
width: 135px;
height: 100px;
background-color: white;
float: left;
margin-right: 1px;
margin-bottom: 5px;
text-align: center;
}
.body-center .body-center-nav .body-center-nav-brand .right .right-box .img {
width: 100px;
height: 50px;
margin: 0 auto;
margin-top: 20px;
cursor: pointer;
}
.body-center .body-center-nav .body-center-nav-brand .right .right-box p {
color: #666666;
font-size: 12px;
margin-top: 3px;
cursor: pointer;
}
.body-center .body-center-nav .body-center-nav-brand .right .right-box p:hover {
color: #b5b5b5;
font-size: 12px;
margin-top: 3px;
cursor: pointer;
}
.body-center .body-center-nav .body-center-nav-brand .right .right-box .img img {
width: 100px;
height: 50px;
}
.body .body-center .look {
width: 100%;
height: 260px;
float: left;
margin-top: 20px;
}
.body .body-center .look .left {
width: 190px;
height: 260px;
background: url(../img/look.png) no-repeat;
background-size: cover;
overflow: hidden;
cursor: pointer;
float: left;
}
.body .body-center .look .left .left-text {
width: 160px;
height: 90px;
background-color: black;
margin: 20px auto;
}
.body .body-center .look .left .left-text img {
width: 160px;
height: 90px;
}
.body .body-center .look .right {
width: 990px;
height: 100%;
float: right;
background-color: white;
}
.body .body-center .look .right .right-box {
width: 190px;
height: 100%;
background-color: white;
float: left;
margin-left: 8px;
cursor: pointer;
text-align: center;
}
.body .body-center .look .right .right-box p {
font-size: 14px;
color: #333333;
}
.body .body-center .look .right .right-box .img {
width: 150px;
height: 150px;
margin: 20px auto;
}
.body .body-center .look .right .right-box .img img {
width: 150px;
height: 150px;
}
.body .body-center .look .right .right-boxx {
width: 190px;
height: 100%;
background-color: white;
float: left;
margin-left: 8px;
cursor: pointer;
text-align: center;
}
.body .body-center .look .right .right-boxx p {
margin-top: 40px;
font-size: 14px;
color: #333333;
}
.body .body-center .look .right .right-boxx .img {
width: 150px;
height: 150px;
margin: 30px auto;
}
.body .body-center .look .right .right-boxx .img img {
width: 150px;
height: 150px;
}
.body .body-center .news {
width: 1190px;
height: 340px;
float: left;
margin-top: 20px;
}
.body .body-center .news .news-one {
float: left;
width: 290px;
height: 340px;
margin-right: 10px;
background-color: white;
text-align: center;
}
.body .body-center .news .news-one .news-top {
margin: 10px 0;
margin-top: 20px;
color: #333333;
font-size: 14px;
}
.body .body-center .news .news-one .under {
font-size: 12px;
color: #999999;
}
.body .body-center .news .news-one .foot {
margin-top: 20px;
font-size: 14px;
color: #E12518;
}
.body .body-center .news .news-one .foot span {
font-size: 20px;
}
.body .body-center .news .news-two {
float: left;
width: 290px;
height: 340px;
margin-right: 10px;
background-color: white;
}
.body .body-center .news .news-three {
float: left;
width: 290px;
height: 340px;
margin-right: 10px;
background-color: white;
}
.body .body-center .news .news-four {
background: url(//misc.360buyimg.com/mtd/pc/index_2019/1.0.0/assets/img/ab4b10750f3da259165a76e30074f504.png) no-repeat bottom;
float: left;
width: 290px;
height: 340px;
/* margin-right: 10px; */
background-color: white;
}
.body .body-center .news .news-one .box-hd {
width: 270px;
padding-left: 20px;
margin-left: -70px;
font-size: 24px;
color: #333333;
line-height: 60px;
height: 60px;
font-weight: bolder;
}
.body .body-center .news .news-one .box-hd i {
width: 16px;
height: 16px;
font-size: 16px;
color: #F10215;
}
.body .body-center .news .news-one .img {
width: 130px;
height: 130px;
margin: 0 auto;
/* margin-top: 20px; */
}
.body .body-center .news .news-one .img img {
width: 130px;
height: 130px;
}
.body .body-center .news .news-two .box-hd {
width: 270px;
padding-left: 20px;
font-size: 24px;
color: #333333;
line-height: 60px;
height: 60px;
font-weight: bolder;
}
.body .body-center .news .news-two .box-hd i {
width: 16px;
height: 16px;
font-size: 16px;
color: #F10215;
}
.body .body-center .news .news-two .box-nav a {
float: left;
width: 62px;
height: 20px;
border-radius: 20px;
text-align: center;
text-decoration: none;
color: #999999;
background-color: #F6F6F6;
}
.body .body-center .news .news-two .box-nav a.active,
.body .body-center .news .news-two .box-nav a:hover {
color: white;
background-color: #E1251B;
}
.body .body-center .news .news-two .box-nav li {
float: left;
margin-left: 8px;
}
.body .body-center .news .news-two .shops {
width: 275px;
height: 230px;
/* background-color: aqua; */
float: left;
margin-top: 20px;
}
.body .body-center .news .news-two .shops .top {
background-color: white;
width: 275px;
height: 70px;
overflow: hidden;
float: left;
/* line-height: 70px; */
}
.body .body-center .news .news-two .shops .top .left {
width: 28.8px;
height: 40.8px;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAiCAMAAABySOkBAAAAaVBMVEVHcEzytDjztTj1uDz0uTr1uDn0tz350H7ztjf0uDbztTn4ujfytDn/sjPytDT1u0L50X761Yj5yGn61Inztjn60X760X30tjr71orysy/71YXysSzytDP704H4yWf1u0T2wFD6znT3xFzUfyWDAAAAFHRSTlMA+NdQMJwZ8vJxrSmMCue95vLm8RaVWo4AAAC4SURBVHjabdHpEoMgDATgeBfPHoiIUtu+/0NWxrFbIPv3m0k2E7pWXG53GpkooyaqGLBmu7CgPwsHSr/XlQFl7DZLAKJfi2RA6ecsAV5TFqwbxIEbBPCbMqCs2ZsCvJMlIGgKQNNxigBNAeEgAE5ePcBzMAiApgCcHACeEwCeEwCaRuCaMoCTI8AgD9A0gPM5SZHnRfIHx8mpKGlPKdITHm5BndEvWX3AKPu2IS9N20tJg+goSieGL1haOxWou0aaAAAAAElFTkSuQmCC);
background-size: cover;
margin-top: 15px;
/*随着分辨率進行改變*/
margin-left: 10px;
text-align: center;
float: left;
cursor: pointer;
}
.body-center .news .shops .top .left p {
color: #E6aC36;
}
.body-center .news .shops .top .left h3 {
margin-top: -5px;
font-size: 18px;
color: white;
font-weight: bolder;
}
.body-center .news .shops .top .img {
width: 70px;
height: 70px;
float: left;
margin-left: 20px;
cursor: pointer;
}
.body-center .news .shops .top .img img {
width: 70px;
height: 70px;
}
.body-center .news .shops .top .title {
width: 140px;
height: 36.4px;
float: left;
color: #333333;
font-size: 14px;
margin-top: 10px;
margin-left: 1px;
cursor: pointer;
}
.body-center .news .shops .top .title:hover {
color: #e1251b;
}
.body .body-center .news .news-two .shops .middle {
background-color: white;
width: 275px;
height: 70px;
overflow: hidden;
float: left;
/* line-height: 70px; */
}
.body .body-center .news .news-two .shops .middle .left {
width: 28.8px;
height: 40.8px;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAiCAMAAABySOkBAAAAY1BMVEVHcEy/ubC/urHAvbS+uq6/urHHx7zV0cq+uq7CvLK/ua7Tz8bBv7TZ1c7EwLa9uK2/qqrBu7W6tqm/uq/W0sra1s+/uq68t6y+uK27tqrZ1c3X08vIw7nV0MjMx77DvrPRzcQ1PpfRAAAAE3RSTlMAcdVS9Z0X8vIwseaJ8r7kBmvygFfM5AAAAMBJREFUeNpt0esKgzAMBeB6m6t3F9vGZk7f/ynnCFpGcqC/PginHNPWWvrWLFri5k29yFDcXyq4z/rUwB2IGhBBAA3cewUN3BFQA1oAQQGK5yEG0RQ1iBsiKEC0ryCBm0rgpgrwlxUgPiQh8qEEaRwEBShy0wTpyyCBxxGQmkrgphL4yxJ4HAk8jgQeR8I1jvf8buBx0JeVtVXp8QZummcPc+aR5Rf0RwjYFOZO0Xj8AcHYWfMX242IZpgnIzLNwxdqBDiOHID/LwAAAABJRU5ErkJggg==);
background-size: cover;
margin-top: 15px;
/*随着分辨率進行改變*/
margin-left: 10px;
text-align: center;
float: left;
cursor: pointer;
}
.body-center .news .shops .middle .left p {
color: #B3aea4;
}
.body-center .news .shops .middle .left h3 {
margin-top: -5px;
font-size: 18px;
color: white;
font-weight: bolder;
}
.body-center .news .shops .middle .img {
width: 70px;
height: 70px;
float: left;
margin-left: 20px;
cursor: pointer;
}
.body-center .news .shops .middle .img img {
width: 70px;
height: 70px;
}
.body-center .news .shops .middle .title {
width: 140px;
height: 36.4px;
float: left;
color: #333333;
font-size: 14px;
margin-top: 10px;
margin-left: 1px;
cursor: pointer;
}
.body-center .news .shops .middle .title:hover {
color: #e1251b;
}
.body .body-center .news .news-two .shops .foot {
background-color: white;
width: 275px;
height: 70px;
overflow: hidden;
float: left;
/* line-height: 70px; */
}
.body .body-center .news .news-two .shops .foot .left {
width: 28.8px;
height: 40.8px;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAiCAMAAABySOkBAAAAdVBMVEVHcEzbg0bgg0nhgkrggEbhhEngg0nwqoHggUfefEHoiU7egUjigknfgkjzsYvfgEXakUjmh0vyrofvqoHwqoDsnm/lhUznkFrggknwq4Lwq4HefULfgEbeez/zsYr0s43yr4fihk7olWPupHjrnm/ljlnxrYUIIWs0AAAAGHRSTlMAHXbV7zSf8vL/Tq8tifLlB2ry5vLmu7tMl0GPAAAAvklEQVR42m3R2wqDMBAE0Kio9a70tsbEqLX+/yfWsDS0zO7rYWGGUddcuFt7V6NwetZG5QIc8/sigtusBHp+TUYAvRxrQdLHvFkSQLu9MALoZVwnQvBJLUngdksIPqkxEhzLagmAK5MA2p2VEUJS/HA+KQBXBuBxJkLgygicFIHHEYDHQeBxEDgpQKiMwEkReBwEHkeAME6WptkvcOUkjtR5UZx8ofWVq1KFKyuGkbqmVn9XN50x6jn0Cq4fHh9pGEWRDn2aWAAAAABJRU5ErkJggg==);
background-size: cover;
margin-top: 15px;
/*随着分辨率進行改變*/
margin-left: 10px;
text-align: center;
float: left;
cursor: pointer;
}
.body-center .news .shops .foot .left p {
color: #D47b45;
}
.body-center .news .shops .foot .left h3 {
margin-top: -5px;
font-size: 18px;
color: white;
font-weight: bolder;
}
.body-center .news .shops .foot .img {
width: 70px;
height: 70px;
float: left;
margin-left: 20px;
cursor: pointer;
cursor: pointer;
}
.body-center .news .shops .foot .img img {
width: 70px;
height: 70px;
}
.body-center .news .shops .foot .title {
width: 140px;
height: 36.4px;
float: left;
color: #333333;
font-size: 14px;
margin-top: 10px;
margin-left: 1px;
cursor: pointer;
}
.body-center .news .shops .foot .title:hover {
color: #e1541b;
}
.body .body-center .news .news-three .box-hd {
width: 270px;
padding-left: 20px;
font-size: 24px;
color: #333333;
line-height: 60px;
height: 60px;
font-weight: bolder;
}
.body .body-center .news .news-three .box-hd i {
width: 16px;
height: 16px;
font-size: 16px;
color: #F10215;
}
.body .body-center .news .news-four .box-hd {
width: 270px;
padding-left: 20px;
font-size: 24px;
color: #333333;
line-height: 60px;
height: 60px;
font-weight: bolder;
}
.body .body-center .news .news-four .box-hd i {
width: 16px;
height: 16px;
font-size: 16px;
color: #F10215;
}
.body .body-center .news .news-three .box-01 {
cursor: pointer;
margin-left: 15px;
width: 260px;
height: 128px;
float: left;
margin-top: 5px;
margin-bottom: 5px;
background-color: #ebf2ea;
}
.body .body-center .news .news-three .box-02 {
cursor: pointer;
margin-left: 15px;
width: 260px;
height: 128px;
float: left;
margin-top: 5px;
background-color: #f1f5f9;
}
.body-center .news .news-three .box-01 .left {
width: 100px;
height: 108px;
float: left;
padding: 10px;
}
.body .body-center .news .news-three .box-01:hover .left-top p {
transition: all 0.3s;
color: #E2231a;
}
.body .body-center .news .news-three .box-02:hover .left-top p {
transition: all 0.3s;
color: #E2231a;
}
.body-center .news .news-three .box-01 .left .left-top p {
color: #333333;
font-size: 14px;
}
.body-center .news .news-three .box-01 .left .left-middle p {
float: left;
margin-right: 5px;
margin-top: 4px;
}
.body-center .news .news-three .box-01 .left .left-middle p.a {
padding: 3px;
border: #E2231a 1px solid;
color: #E2231a;
}
.body-center .news .news-three .box-01 .left .left-middle p.b {
padding: 3px;
border: #596fab 1px solid;
color: #596fab;
}
.body-center .news .news-three .box-01 .left .left-foot {
color: #999999;
font-size: 12px;
float: left;
margin-top: 20px;
}
.body-center .news .news-three .box-01 .img {
float: right;
width: 90px;
height: 90px;
margin-right: 15px;
margin-top: 15px;
}
.body-center .news .news-three .box-01 .img img {
width: 90px;
height: 90px;
}
.body-center .news .news-three .box-02 .left {
width: 100px;
height: 108px;
float: left;
padding: 10px;
}
.body-center .news .news-three .box-02 .left .left-top p {
color: #333333;
font-size: 14px;
}
.body-center .news .news-three .box-02 .left .left-middle p {
float: left;
margin-right: 5px;
margin-top: 4px;
}
.body-center .news .news-three .box-02 .left .left-middle p.a {
padding: 3px;
border: #E2231a 1px solid;
color: #E2231a;
}
.body-center .news .news-three .box-02 .left .left-foot {
color: #999999;
font-size: 12px;
float: left;
margin-top: 20px;
}
.body-center .news .news-three .box-02 .img {
float: right;
width: 90px;
height: 90px;
margin-right: 15px;
margin-top: 15px;
}
.body-center .news .news-three .box-02 .img img {
width: 90px;
height: 90px;
}
.body-center .news .news-four .gift li {
cursor: pointer;
margin-left: 30px;
width: 244px;
height: 82px;
margin-bottom: 4px;
/* background-color: #D9D9D9; */
overflow: hidden;
}
.body-center .news .news-four .gift li:hover .more {
color: #E12518;
}
.body-center .news .news-four .gift .img {
margin-right: 5px;
width: 70px;
height: 70px;
border-radius: 50%;
overflow: hidden;
margin-top: 5px;
float: left;
}
.body-center .news .news-four .gift .img img {
width: 70px;
height: 70px;
}
.body-center .news .news-four .gift .right {
/* width: 200px; */
/* height: 30px; */
color: #e33333;
font-size: 14px;
margin-top: 10px;
/* float: left; */
}
.body-center .news .news-four .gift .right span {
font-size: 28px;
font-weight: bolder;
}
.body-center .news .news-four .gift .right .a {
float: left;
margin-top: -5px;
font-size: 12px;
color: #999999;
}
.body-center .news .news-four .gift .right .b {
margin-top: 0px;
float: left;
color: #333333;
font-size: 12px;
}
.body-center .news .news-four .gift .more {
float: left;
width: 1px;
height: 30px;
margin-top: -55px;
margin-left: 15px;
}
.body .body-center .square {
width: 100%;
/* height: 45px; */
/* background-color: #46D8C8; */
float: left;
margin: 30px 0;
text-align: center;
line-height: 45px;
font-size: 28px;
color: #333333;
font-weight: bold;
}
.body .body-center .square-title::after {
content: "";
position: absolute;
background: url(//misc.360buyimg.com/mtd/pc/index_2019/1.0.0/assets/sprite/floor_hd/sprite.png) no-repeat;
width: 25px;
height: 25px;
margin-left: -100px;
/*随分辨率改變*/
margin-top: -30px;
}
.body .body-center .square-title::before {
content: "";
position: absolute;
width: 25px;
height: 25px;
margin: 70px;
margin-top: 15px;
background: url(//misc.360buyimg.com/mtd/pc/index_2019/1.0.0/assets/sprite/floor_hd/sprite.png) no-repeat;
}
.body .body-center .square .center {
width: 1190px;
height: 950px;
/* background-color: #46D8C8; */
float: left;
margin-top: 20px;
}
.body .body-center .square .square-nav {
width: 290px;
height: 370px;
margin-bottom: 10px;
margin-right: 10px;
float: left;
cursor: pointer;
}
.body .body-center .square .square-nav:hover {
transition: all 0.3s;
opacity: 0.9;
}
.body .body-center .square .square-nav img {
width: 290px;
height: 370px;
}
.body .body-center .square .center .square-box {
width: 290px;
height: 180px;
background-color: white;
float: left;
margin-right: 10px;
margin-bottom: 10px;
}
.body .body-center .square .center .square-box1 {
width: 290px;
height: 180px;
background-color: white;
float: left;
margin-bottom: 10px;
}
.body .body-center .square .center .square-box .square-box-title {
text-align: left;
padding-left: 30px;
width: 260px;
height: 60px;
float: left;
line-height: 60px;
}
.body .body-center .square .center .square-box .square-box-title p {
color: #333333;
font-size: 22px;
float: left;
}
.body .body-center .square .center .square-box .square-box-title span {
float: left;
font-size: 14px;
color: #999999;
margin-top: 5px;
/*随分辨率改變*/
font-weight: 400;
margin-left: 8px;
}
.body .body-center .square .center .square-box .img {
width: 100px;
height: 100px;
float: left;
margin-left: 30px;
}
.body .body-center .square .center .square-box .img img {
width: 100px;
height: 100px;
}
.body .body-center .square .center .square-box1 .square-box-title {
text-align: left;
padding-left: 30px;
width: 260px;
height: 60px;
float: left;
line-height: 60px;
}
.body .body-center .square .center .square-box1 .square-box-title p {
color: #333333;
font-size: 22px;
float: left;
}
.body .body-center .square .center .square-box1 .square-box-title span {
font-weight: 400;
float: left;
font-size: 14px;
color: #999999;
margin-top: 5px;
/*随分辨率改變*/
margin-left: 8px;
}
.body .body-center .square .center .square-box1 .img {
width: 100px;
height: 100px;
float: left;
margin-left: 30px;
}
.body .body-center .square .center .square-box1 .img img {
width: 100px;
height: 100px;
}
.body .body-center .recommend {
width: 100%;
/* height: 45px; */
float: left;
/* margin-top: 300px; */
margin: 0 0;
text-align: center;
line-height: 45px;
font-size: 28px;
color: #333333;
font-weight: bold;
}
.body .body-center .recommend-title::after {
content: "";
position: absolute;
background: url(//misc.360buyimg.com/mtd/pc/index_2019/1.0.0/assets/sprite/floor_hd/sprite.png) no-repeat;
width: 25px;
height: 25px;
margin-left: -100px;
/*随分辨率改變*/
margin-top: -30px;
}
.body .body-center .recommend-title::before {
content: "";
position: absolute;
width: 25px;
height: 25px;
margin: 70px;
margin-top: 15px;
background: url(//misc.360buyimg.com/mtd/pc/index_2019/1.0.0/assets/sprite/floor_hd/sprite.png) no-repeat;
}
.body-center .recommend .recommend-nav {
margin-top: 30px;
float: left;
width: 1160px;
height: 60px;
background-color: white;
line-height: 60px;
padding-left: 30px;
}
.body-center .recommend .recommend-nav li {
float: left;
}
.body-center .recommend .recommend-nav a {
color: #333333;
font-size: 16px;
width: 180px;
float: left;
text-decoration: none;
}
.body-center .recommend .recommend-nav a.active,
.body-center .recommend .recommend-nav a:hover {
background-color: #E12518;
color: aliceblue;
}
.body-center .recommend .recommend-nav a::after {
content: "";
}
.body-center .recommend .recommend-nav a::before {
content: "";
}
.body-center .recommend .recommend-nav span {
width: 1px;
height: 30px;
background-color: #D9D9D9;
float: left;
margin-top: 13px;
}
.body-center .recommend .recommend-center {
margin-top: 10px;
width: 1190px;
height: 1000px;
/* background-color: #46D8C8; */
float: left;
}
.body .body-center .recommend .recommend-center .recommend-box {
width: 230px;
height: 322px;
float: left;
background-color: white;
margin-right: 10px;
margin-bottom: 10px;
cursor: pointer;
}
.body .body-center .recommend .recommend-center .recommend-box:hover .title p {
color: #B91B13;
}
.body .body-center .recommend .recommend-center .recommend-box1:hover .title p {
color: #B91B13;
}
.body .body-center .recommend .recommend-center .recommend-box1 {
cursor: pointer;
width: 230px;
height: 322px;
float: left;
background-color: white;
margin-bottom: 10px;
}
.body .body-center .recommend .recommend-center .recommend-box .img {
width: 150px;
height: 150px;
background-color: aqua;
margin: 30px auto;
margin-bottom: 40px;
}
.body .body-center .recommend .recommend-center .recommend-box .img img {
width: 150px;
height: 150px;
}
.body .body-center .recommend .recommend-center .recommend-box .title {
margin: 10px auto;
width: 190px;
height: 48px;
font-size: 14px;
color: #666666;
line-height: 1.7em;
font-weight: 500;
font: Microsoft YaHei, tahoma, arial, Hiragino Sans GB, \\5b8b\4f53, sans-serif;
}
.body .body-center .recommend .recommend-center .recommend-box .rmb {
margin-top: -5px;
font-size: 13px;
color: #E12518;
text-align: left;
margin-left: 25px;
}
.body .body-center .recommend .recommend-center .recommend-box .rmb span {
font-size: 18px;
}
.body .body-center .recommend .recommend-center .recommend-box1 .img {
width: 150px;
height: 150px;
background-color: aqua;
margin: 30px auto;
margin-bottom: 40px;
}
.body .body-center .recommend .recommend-center .recommend-box1 .img img {
width: 150px;
height: 150px;
}
.body .body-center .recommend .recommend-center .recommend-box1 .title {
margin: 10px auto;
width: 190px;
height: 48px;
font-size: 14px;
color: #666666;
line-height: 1.7em;
font-weight: 500;
font: Microsoft YaHei, tahoma, arial, Hiragino Sans GB, \\5b8b\4f53, sans-serif;
}
.body .body-center .recommend .recommend-center .recommend-box1 .rmb {
margin-top: -5px;
font-size: 13px;
color: #E12518;
text-align: left;
margin-left: 25px;
}
.body .body-center .recommend .recommend-center .recommend-box1 .rmb span {
font-size: 18px;
}
.body .body-center .good {
margin-top: 50px;
height: 42px;
float: left;
width: 1190px;
margin-left: 30px;/*随着分辨率而改變*/
}
.body-center .good li .div{
float: left;
}
.body-center .good li{
width: 290px;
cursor: pointer;
float: left;
margin-right: 10px;
line-height: 42px;
}
.body-center .good li span{
float: left;
margin-left: 20px;
font-size: 18px;
color: #444444;
font-weight: bold;
}
.body-center .good li.a{
float: left;
margin-right: 0px;
}
.body .body-center .good .div {
position: relative;
width: 23.8px;
height: 42px;
/* margin: 50px auto; */
background-color: red;
text-align: center;
line-height: 42px;
font-size: 24px;
color: white;
font-weight: bold;
}
.div:before {
content: '';
display: block;
position: absolute;
width: 0;
height: 0;
right: 24px;
border-width: 20.3px 13px;
border-style: solid;
border-color: transparent red transparent transparent;
}
.div:after {
content: '';
display: block;
position: absolute;
width: 0;
height: 0;
left: 24px;
border-width: 20.3px 13px;
border-style: solid;
border-color: transparent transparent transparent red;
top: 0;
}
.footer{
width: 100%;
height: 200px;
background-color: #f4f4f4;
border-top: 1px solid #cecece;
}
.footer .footer-center{
width: 1190px;
height: 100%;
margin: 0 auto;
/* background-color: #6495ED; */
border-bottom: 1px solid #cecece;
}
.footer .footer-center .left{
float: left;
}
.footer .footer-center .right{
float: right;
width: 200px;
height: 150px;
margin-top: 30px;
text-align: center;
}
.footer .footer-center .left li.a{
margin-top:30px;
width: 198px;
height: 160px;
float: left;
/* background-color: red; */
}
.footer .footer-center .left li.a p{
color: #666666;
font-size: 15px;
font-weight: bold;
margin-bottom: 6px;
}
.footer .footer-center .left li.a li{
margin-bottom: 3px;
}
.footer .footer-center .left li.a li a{
text-decoration: none;
color: #666666;
font-size: 12px;
}
.footer .footer-center .left li.a li a:hover{
color: #c81623;
}
.footer .footer-center .right p{
color: #666666;
font-size: 14px;
font-weight: bold;
}
.footer .footer-center .right .txt{
text-align: left;
margin: 0 auto;
margin-top: 10px;
width: 180px;
height: 52.8px;
font-size: 12px;
font-weight: 400;
color: #666666;
}
.footer .footer-center .right .details{
text-align: right;
margin-right: 20px;
}
.footer .footer-center .right .details a{
font-weight: 400;
color: #666666;
font-size: 12px;
text-decoration: none;
}
.footer .footer-center .right .details a:hover{
color: #c81623;
}
.footing{
background-color: #f4f4f4;
width: 100%;
height: 300px;
float: left;
}
.footing .footing-center{
width: 1190px;
height: 100%;
margin: 0 auto;
border-top: 1px solid #CECECE;
/* text-align: center; */
}
.footing .footing-center span{
width: 1px;
height: 13px;
background-color: #969696;
float: left;
margin: 23px 10px;
}
.footing .footing-center li{
float: left;
margin-top: 20px;
}
.footing .footing-center .nav{
margin-left: 50px;
float: left;
}
.footing .footing-center a{
text-decoration: none;
color: #666666;
font-size: 12px;
}
.footing .footing-center a:hover{
color: #C81623;
}
.footing .footing-center .copyright{
float: left;
text-align: center;
width: 1190px;
height: 200px;
}
.footing .footing-center .copyright a{
clear: both;
}
reset.css代碼如下：
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
style.js代碼如下：
window.onload = function(){
//擷取函數，并綁定單擊響應函數
var city = document.getElementById("city");
var bj = document.getElementById("bj");
bj.onclick = function(){
city.innerHTML = "北京";
}
var sh = document.getElementById("sh");
sh.onclick = function(){
city.innerHTML = "上海";
}
var tj = document.getElementById("tj");
tj.onclick = function(){
city.innerHTML = "天津";
}
var ln = document.getElementById("ln");
ln.onclick = function(){
city.innerHTML = "遼甯";
}
var cq = document.getElementById("cq");
cq.onclick = function(){
city.innerHTML = "重慶";
}
var hb = document.getElementById("hb");
hb.onclick = function(){
city.innerHTML = "河北";
}
var sx = document.getElementById("sx");
sx.onclick = function(){
city.innerHTML = "山西";
}
var hn = document.getElementById("hn");
hn.onclick = function(){
city.innerHTML = "河南";
}
var jl = document.getElementById("jl");
jl.onclick = function(){
city.innerHTML = "吉林";
}
var hlj = document.getElementById("hlj");
hlj.onclick = function(){
city.innerHTML = "黑龍江";
}
var zj = document.getElementById("zj");
zj.onclick = function(){
city.innerHTML = "浙江";
}
var js = document.getElementById("js");
js.onclick = function(){
city.innerHTML = "江蘇";
}
var sd = document.getElementById("sd");
sd.onclick = function(){
city.innerHTML = "山東";
}
var nmg = document.getElementById("nmg");
nmg.onclick = function(){
city.innerHTML = "内蒙古";
}
var fj = document.getElementById("fj");
fj.onclick = function(){
city.innerHTML = "福建";
}
var h1 = document.getElementById("h1");
h1.onclick = function(){
city.innerHTML = "湖北";
}
var h2 = document.getElementById("h2");
h2.onclick = function(){
city.innerHTML = "湖南";
}
var h3 = document.getElementById("h3");
h3.onclick = function(){
city.innerHTML = "貴州";
}
var h4 = document.getElementById("h4");
h4.onclick = function(){
city.innerHTML = "雲南";
}
var h5 = document.getElementById("h5");
h5.onclick = function(){
city.innerHTML = "西藏";
}
var h6 = document.getElementById("h6");
h6.onclick = function(){
city.innerHTML = "陝西";
}
var h7 = document.getElementById("h7");
h7.onclick = function(){
city.innerHTML = "甘肅";
}
var h8 = document.getElementById("h8");
h8.onclick = function(){
city.innerHTML = "青海";
}
var h9 = document.getElementById("h9");
h9.onclick = function(){
city.innerHTML = "釣魚島";
}
var s1 = document.getElementById("s1");
s1.onclick = function(){
city.innerHTML = "新疆";
}
var s2 = document.getElementById("s2");
s2.onclick = function(){
city.innerHTML = "港澳";
}
var s3 = document.getElementById("s3");
s3.onclick = function(){
city.innerHTML = "台灣";
}
var s4 = document.getElementById("s4");
s4.onclick = function(){
city.innerHTML = "甯夏";
}
var s5 = document.getElementById("s5");
s5.onclick = function(){
city.innerHTML = "海外";
}
var img = document.getElementById("top-img");
var del = document.getElementById("del");
del.onclick = function(){
img.style.display = "none";
};
let imgArr = ["./img/body00.webp","./img/body01.webp","./img/body02.webp","./img/body03.webp","./img/body04.webp","./img/body05.webp"];
const bimg = document.getElementById("bimg");
const last = document.getElementById("last");
const next = document.getElementById("next");
let index = 0;
last.onclick = function(){
index--;
if(index<0)
{
index = imgArr.length-1;
}
bimg.src = imgArr[index];
};
next.onclick = function(){
index++;
if(index>imgArr.length-1)
{
index = 0;
}
bimg.src = imgArr[index];
};
const bannerA = document.getElementsByClassName("bannerA");
for(let i = 0;i < bannerA.length ; i++)
{
bannerA[i].index = i;
bannerA[i].onmouseover = function(){
imgArr[i].index = i;
bimg.src = imgArr[this.index];
};
}
const minute = document.getElementById("minute");
const miao = document.getElementById("miao");
let s = 0;
setInterval(function(){
s++;
if(s<10)
{
miao.innerHTML = "0" + s;
}
else if(s<60)
{
miao.innerHTML = s;
}
else if(s == 60)
{
s=0;
}
},1000);
let fen = 0;
setInterval(function(){
fen++;
if(fen<10)
{
minute.innerHTML = "0" + fen;
}
else if(fen<60)
{
minute.innerHTML = fen;
}
else if(fen == 60)
{
fen = 0;
}
},60000)
};
需要所有代碼以及圖檔檔案夾的小夥伴可以私信我