效果图：
完整css文件：
ul{
list-style: none;
}
ul li{
float: left;
}
.mainNavigation{
position:absolute;
top:-25px;
left:300px;
}
ul li img{
width: 430px;
height: 230px;
padding: 15px;
}
ul li p{
text-align: center;
}
.mainNavigation li{
/*float:left;*/
padding:30px;
}
#left{
position: relative;
float: left;
width: 300px;
padding:0px;
margin-left:50px;
height: 700px;
background-color: gainsboro;
}
#left p{
width:300px;
color: green;
/*white-space:pre-wrap;/*强制换行*/
height: auto;
word-wrap:break-word;
word-break:break-all;
overflow: hidden;
/*首行缩进*/
text-transform: lowercase;
text-indent: 2em;
}
#ptext{
font-family: 黑体;
font-size:2em;/*字体大小*/
}
#middle{
float:left;
position: relative;
font-size: 12px;
margin:0px 20px 5px 20px;
width:1150px;
/*background-color: lightgray;*/
}
#middle img{
float:left;
padding-left:110px;
padding-top: 20px;
padding-right:80px;
padding-bottom:20px;
}
#middle table{
margin-left:70px;
margin-top: 150px;
width: 1000px;
font:15px 宋体;
border:2px #777 solid;
text-align: center;
background-color: lightgoldenrodyellow;
}
#middle table td{
border: 1px #777 solid;
margin: 0px;
padding: 3px;
}
#middle table thead{
background-color: darkgrey;
color: white;
}
#right{
float:left;
position: relative;
font-size: 12px;
margin:0px 20px 5px 20px;
width:300px;
background-color: gray;
height: 700px;
}
#right img{
padding: 50px;
}
#foot{
clear: both;
width:1900px;
text-align: center;
background-color: gainsboro;
margih:0px;
padding:0px;
color:green;
}
完整html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/Swiper.css" />
<link rel="stylesheet" href="css/swiper.min.css" />
<link rel="stylesheet" href="css/goods2list.css" />
<script src="js/swiper.min.js"></script>
</head>
<body>
<div >
<div>
<a href="http://www.jingyingjidi.com"><img src="images/index_03.png" alt="" /></a>
<span>合垃圾回收一站式方案</span>
</div>
<div >
<ul class="mainNavigation">
<li>
<a href="#" class="blue">首页</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>
</div>
</div>
<div>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="images/2.jpg" alt="" />
</div>
<div class="swiper-slide">
<img src="images/1.jpg" alt="" />
</div>
<div class="swiper-slide">
<img src="images/3.jpg" alt="" />
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</div>
<div>
<ul>
<li>
<a href="#"><img src="images/11.jpg" /></a>
<p>回收奖金一</p>
</li>
<li>
<a href="#"><img src="images/12.jpg" /></a>
<p>回收奖金二</p>
</li>
<li>
<a href="#"><img src="images/13.jpg" /></a>
<p>回收奖金三</p></li>
<li>
<a href="#"><img src="images/14.jpg" /></a>
<p>回收奖金四</p>
</li>
</ul>
</div>
<div id="all">
<div id="left">
<p id="ptext">垃圾分类</p>
<p> 排放分为三次，定义为：居民排放垃圾均为一次排放，经过垃圾处理厂焚烧后为二次排放，二次排放经过过滤分拣再生等工艺后剩余废渣为三次排放。</p>
<p>三次排放中重金属离子超标部分需要无害处理。 [2-3] 在一次排放中大多数工业产品均为可回收垃圾。不可回收垃圾是指无法进入材料再生。</p>
<p>金属以及塑料，电池，废旧电器、电子产品，生物垃圾，剩余垃圾，房屋垃圾(包含废旧家具，涂料等)。</p>
<p> 此基于回收工艺。比如如果纸类制品经过打碎、去色制浆等多种工序为新的纸类产品。</p>
<p> 金属和塑料一般经过焚烧-冷却-磁选-涡流电选等工艺 [5] ，生产电能、再生金属以及废渣。废渣中重金属离子量低的可以直接堆埋或者作为建筑材料使用。</p>
<p>重金属离子含量高的部分必须封闭式堆埋，成本(50-70欧元/m2)。 [1] </p>
<p> 当纸类垃圾和金属以及塑料类垃圾混合时会导致纸类垃圾回收难度增加甚至只能焚烧。 </p>
</div>
<div id="middle">
<div>
<div id="topp">
<img src="images/11.jpg" />
</div>
<div id="mid">
<img src="images/11.jpg" />
</div>
<div id="boto">
<img src="images/11.jpg" />
</div>
</div>
<div>
<table class="table">
<th>
<thead>
<tr>
<td>商品标示ID</td>
<td>生产商名称</td>
<td>生产商ID</td>
<td>商品名称</td>
<td>重量</td>
<td>审核</td>
</tr>
</thead>
</th>
<tbody>
<tr>
<td>1</td>
<td>海尔集团</td>
<td>manid00123</td>
<td>洗衣机</td>
<td>30公斤</td>
<td>通过</td>
</tr>
<tr>
<td>2</td>
<td>格力集团</td>
<td>manid00123</td>
<td>冰箱</td>
<td>90公斤</td>
<td>通过</td>
</tr>
<tr>
<td>1</td>
<td>海尔集团</td>
<td>manid00123</td>
<td>洗衣机</td>
<td>30公斤</td>
<td>通过</td>
</tr>
<tr>
<td>2</td>
<td>格力集团</td>
<td>manid00123</td>
<td>冰箱</td>
<td>90公斤</td>
<td>通过</td>
</tr>
<tr>
<td>1</td>
<td>海尔集团</td>
<td>manid00123</td>
<td>洗衣机</td>
<td>30公斤</td>
<td>通过</td>
</tr>
<tr>
<td>2</td>
<td>格力集团</td>
<td>manid00123</td>
<td>冰箱</td>
<td>90公斤</td>
<td>通过</td>
</tr>
<tr>
<td>1</td>
<td>海尔集团</td>
<td>manid00123</td>
<td>洗衣机</td>
<td>30公斤</td>
<td>通过</td>
</tr>
<tr>
<td>2</td>
<td>格力集团</td>
<td>manid00123</td>
<td>冰箱</td>
<td>90公斤</td>
<td>通过</td>
</tr>
<tr>
<td>1</td>
<td>海尔集团</td>
<td>manid00123</td>
<td>洗衣机</td>
<td>30公斤</td>
<td>通过</td>
</tr>
<tr>
<td>2</td>
<td>格力集团</td>
<td>manid00123</td>
<td>冰箱</td>
<td>90公斤</td>
<td>通过</td>
</tr>
<tr>
<td>1</td>
<td>海尔集团</td>
<td>manid00123</td>
<td>洗衣机</td>
<td>30公斤</td>
<td>通过</td>
</tr>
<tr>
<td>2</td>
<td>格力集团</td>
<td>manid00123</td>
<td>冰箱</td>
<td>90公斤</td>
<td>通过</td>
</tr>
<tr>
<td>1</td>
<td>海尔集团</td>
<td>manid00123</td>
<td>洗衣机</td>
<td>30公斤</td>
<td>通过</td>
</tr>
<tr>
<td>2</td>
<td>格力集团</td>
<td>manid00123</td>
<td>冰箱</td>
<td>90公斤</td>
<td>通过</td>
</tr>
<tr>
<td>1</td>
<td>海尔集团</td>
<td>manid00123</td>
<td>洗衣机</td>
<td>30公斤</td>
<td>通过</td>
</tr>
<tr>
<td>2</td>
<td>格力集团</td>
<td>manid00123</td>
<td>冰箱</td>
<td>90公斤</td>
<td>通过</td>
</tr>
<tr>
<td>1</td>
<td>海尔集团</td>
<td>manid00123</td>
<td>洗衣机</td>
<td>30公斤</td>
<td>通过</td>
</tr>
</tbody>
</table>
</div>
</div >
<div id="right">
<div id="topp">
<img src="images/11.jpg" />
</div>
<div id="mid">
<img src="images/11.jpg" />
</div>
<div id="boto">
<img src="images/11.jpg" />
</div>
</div>
</div>
</div>
<div id="foot">
<hr>
<p>中网汇智（北京）科技有限公司版权所有</p>
<p>欢迎朋友们访问:http://www.jingyingjidi.com</p>
</div>
</body>
<script>
var swiper = new Swiper('.swiper-container', {
slidesPerView: 1,
spaceBetween: 0,
loop: true,
disableOnInteraction:false,
autoplay:true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
</script>
</html>