下面为使用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:;"><img src="./img/body02.webp" alt=""></a></li>
<li><a href="javascript:;"><img src="./img/body03.webp" alt=""></a></li>
<li><a href="javascript:;"><img src="./img/body04.webp" alt=""></a></li>
<li><a href="javascript:;"><img src="./img/body05.webp" alt=""></a></li>
<li><a href="javascript:;"><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/YCU@MMH~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)
};
需要所有代码以及图片文件夹的小伙伴可以私信我
扫一扫
2511
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
