CSS实战基础项目二：复现京东商城的主页。
细致的解释见我的上一篇文章：CSS项目基础实战：实现小米官网+详细步骤分析+出错问题总结
引入的基本样式表不变，这里只贴出主要代码
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>京东商城title>
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/index2.css">
<link rel="stylesheet" href="./fa/css/all.css">
<link rel="stylesheet" href="./css/base2.css">
head>
<body>
<div class="top-bar-wrapper">
<div class="top-wrapper w ">
<div class="local clearfix">
<a href="javascript:;">
<i class="fas fa-map-marker-alt">i>
福建
a>
<div class="local-list">
<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>
<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>
<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>
<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>
<div class="wrapper-list">
<ul>
<li>
<a href="javascript:;">你好，请登录 a>
li>
<li>
免费注册a>
li>
<span>|span>li>
<li>
<a href="javascript:;">我的订单a>
li>
<span>|span>li>
<li>
<a href="javascript:;">
我的京东
i>
a>
li>
<span>|span>li>
<li>
<a href="javascript:;">京东会员a>
li>
<span>|span>li>
<li>
<a href="javascript:;">
企业采购span>
i>
a>
li>
<span>|span>li>
<li>
<div class="service-list">
客户服务
i>
div>
li>
<span>|span>li>
<li>
<div class="www-list">
网站导航
i>
div>
li>
<span>|span>li>
<li>
<div class="phone-web">
手机京东
<ul class="download">
<li>
<a href="javascript:;">
手机京东span>
a>
li>
<li>
<a href="javascript:;">
手机京东span>
a>
li>
<li>
<a href="javascript:;">
手机京东span>
a>
li>
<li>
<a href="javascript:;">
手机京东span>
a>
li>
ul>
div>
li>
ul>
div>
div>
div>
<div class="mid-bar-wrapper">
<div class="mid-wrapper w clearfix">
<div class="mid-left">
<img src="./img/1.png" alt="">
div>
<div class="mid-search">
<ul>
<li>
<div class="search">
<form action="#">
i>
<button>i>button>
form>
<div class="shop-car">
i>
<a href="javascript:;">我的购物车a>
div>
div>
li>
<li>
<ul class="act-nav">
<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:;">5折家电a>
li>
ul>
li>
<li>
<li>
秒杀a>
li>
<li>
优惠券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>
li>
ul>
div>
<div class="mid-qrcode">
<img src="./img/2.png" alt="">
div>
div>
div>
<div class="pics-bar-wrapper">
<div class="pics-wrapper w clearfix">
<div class="services-list">
<ul>
<li>
<a href="javascript:;">家用电器a>
li>
<li>
<a href="javascript:;">手机a>
/span>
<a href="javascript:;">运营商a>
/span>
<a href="javascript:;">数码a>
li>
<li>
<a href="javascript:;">电脑a>
/span>
<a href="javascript:;">办公a>
li>
<li>
<a href="javascript:;">家居a>
/span>
<a href="javascript:;">家具a>
/