码云链接：https://gitee.com/zyyyyyyyyyyy/codes/rcfdzmin4a82v975pl1ko47
效果图：
原网站截图：
源代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
@media only screen and (min-width:900px ) {
.above{width:80%; height:1030px;background:rgb(242,246,249);margin-top:30px;margin-bottom: 20px;margin:0 auto;position: relative;}
.div1{
width: 50%;
margin-left: 90px;
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
@media only screen and (min-width:900px ) {
.above{width:80%; height:1030px;background:rgb(242,246,249);margin-top:30px;margin-bottom: 20px;margin:0 auto;position: relative;}
.div1{
width: 50%;
margin-left: 90px;
}
.nav{
height: 80%;
}
.div1 span{
display: none;
}
.imgbox{
width: 35%;
position: absolute;
left: 60%;
top:20%;
margin-top: 10px;
margin-right: 50px;
}
.sz{
width: 50%;
}
.line{background-color: black;height:3px;width: 100%;}
.left{float:left;width: 20%;}
.right{float:right;width: 20%;}
.logo{margin-top:20px;margin-bottom: 20px;margin:0 auto;margin-left:60px;position: absolute;float:left;width: 30%;height: 20%;}
.footer{margin-left: 60px;right: 10%;}
}
@media only screen and (max-width: 900px) {
.above{width:80%; height:1490px;background:rgb(242,246,249);margin-top:30px;margin-bottom: 20px;margin:0 auto;position: relative;}
.div1{
width: 90%;
margin-left:10% ;
position: relative;
}
.nav{
height: 80%;
}
.nav a{
display: none;
}
.div1 span{
position: absolute;
right: 15%;
top:5%;
display: block;
font-size: 40px;
font-weight: 200;
cursor: pointer;
}
.imgbox{
width: 80%;
position: absolute;
left: 10%;
bottom:10%;
}
.sz{
width: 85%;
}
.left{float:left;width: 80%;margin-top:70% ;}
/*.line{background-color: black;height:5px;width: 100%;margin-top: -10%;}*/
.right{float:right;width: 80%;margin-top: 10%;}
.footer{margin-left: 10%;margin-right: 10%;}
.logo{margin-top:20px;margin-bottom: 20px;margin:0 auto;margin-left:60px;position: absolute;float:left;width: 30%;height: 20%;}
}
.imgbox img{
width:100%;
position: absolute;
left: 0;
top: 0;
opacity: 0;
}
.nav2{
display: none;
width:55%;
position: absolute;
left:40%;
top: 80px;
font-size: 14px;
font-weight: 200;
border:1px #000 solid;
}
h6{margin: 5px 0 5px 0;}
.right1{float: right;}
div{ word-wrap: break-word; word-break: normal;}
.d{margin:0;padding:0;weight:10%;height:5%;}
.d8{margin-left: 400px;text-align:center;}
.c{color: white;}
.w{margin-right: 100px;}
</style>
</head>
<body>
<div class="above">
<div>
<div class="logo">
<br>
<img src="img/logo.png">
</div>
<div style="width:80%;margin: 0;text-align:center;margin-top: 50px;font-family:Comic Sans MS;" class="right1">
<p class="nav">
<a>MAINPAGE</a>
<a>ABOUT US</a>
<a>WORLDWIDE</a>
<a>OUR WORK</a>
<a>NEWS</a>
<a>CONTECT</a>
</p>
</div>
</div>
<div style="position: relative;">
<div class="imgbox">
<div style="width: 100%;height: 100%;"></div>
<img src="img/ls.jpg"/>
<img src="img/s1.jpg"/>
<img src="img/s2.jpg"/>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
var img=$('.imgbox img');
var i=0;
img.eq(0).animate({opacity:'1'});
setInterval(function(){
img.eq(i).animate({opacity:'0'})
i=(i+1)%3;
img.eq(i).animate({opacity:'1'})
},1500);
</script>
<div>
<div class="div1">
<span>≡</span>
<div class="nav2">MAINPAGE
ABOUT US
WORLDWIDE
OUR WORK
NEWS
CONTECT
</div>
<script>
var ospan=$('.div1 span');
var nav=$('.div1 .nav2');
ospan.mouseover(function(){
nav.show();
})
ospan.mouseout(function(){
nav.hide();
})
.nav{
height: 80%;
}
.div1 span{
display: none;
}
.imgbox{
width: 35%;
position: absolute;
left: 60%;
top:20%;
margin-top: 10px;
margin-right: 50px;
}
.sz{
width: 50%;
}
.line{background-color: black;height:3px;width: 100%;}
.left{float:left;width: 20%;}
.right{float:right;width: 20%;}
.logo{margin-top:20px;margin-bottom: 20px;margin:0 auto;margin-left:60px;position: absolute;float:left;width: 30%;height: 20%;}
.footer{margin-left: 60px;right: 10%;}
}
@media only screen and (max-width: 900px) {
.above{width:80%; height:1490px;background:rgb(242,246,249);margin-top:30px;margin-bottom: 20px;margin:0 auto;position: relative;}
.div1{
width: 90%;
margin-left:10% ;
position: relative;
}
.nav{
height: 80%;
}
.nav a{
display: none;
}
.div1 span{
position: absolute;
right: 15%;
top:5%;
display: block;
font-size: 40px;
font-weight: 200;
cursor: pointer;
}
.imgbox{
width: 80%;
position: absolute;
left: 10%;
bottom:10%;
}
.sz{
width: 85%;
}
.left{float:left;width: 80%;margin-top:70% ;}
/*.line{background-color: black;height:5px;width: 100%;margin-top: -10%;}*/
.right{float:right;width: 80%;margin-top: 10%;}
.footer{margin-left: 10%;margin-right: 10%;}
.logo{margin-top:20px;margin-bottom: 20px;margin:0 auto;margin-left:60px;position: absolute;float:left;width: 30%;height: 20%;}
}
.imgbox img{
width:100%;
position: absolute;
left: 0;
top: 0;
opacity: 0;
}
.nav2{
display: none;
width:55%;
position: absolute;
left:40%;
top: 80px;
font-size: 14px;
font-weight: 200;
border:1px #000 solid;
}
h6{margin: 5px 0 5px 0;}
.right1{float: right;}
div{ word-wrap: break-word; word-break: normal;}
.d{margin:0;padding:0;weight:10%;height:5%;}
.d8{margin-left: 400px;text-align:center;}
.c{color: white;}
.w{margin-right: 100px;}
</style>
</head>
<body>
<div class="above">
<div>
<div class="logo">
<br>
<img src="img/logo.png">
</div>
<div style="width:80%;margin: 0;text-align:center;margin-top: 50px;font-family:Comic Sans MS;" class="right1">
<p class="nav">
<a>MAINPAGE</a>
<a>ABOUT US</a>
<a>WORLDWIDE</a>
<a>OUR WORK</a>
<a>NEWS</a>
<a>CONTECT</a>
</p>
</div>
</div>
<div style="position: relative;">
<div class="imgbox">
<div style="width: 100%;height: 100%;"></div>
<img src="img/ls.jpg"/>
<img src="img/s1.jpg"/>
<img src="img/s2.jpg"/>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
var img=$('.imgbox img');
var i=0;
img.eq(0).animate({opacity:'1'});
setInterval(function(){
img.eq(i).animate({opacity:'0'})
i=(i+1)%3;
img.eq(i).animate({opacity:'1'})
},1500);
</script>
<div>
<div class="div1">
<span>≡</span>
<div class="nav2">MAINPAGE
ABOUT US
WORLDWIDE
OUR WORK
NEWS
CONTECT
</div>
<script>
var ospan=$('.div1 span');
var nav=$('.div1 .nav2');
ospan.mouseover(function(){
nav.show();
})
ospan.mouseout(function(){
nav.hide();
})
</script>
<br><br><br><br><br><br>
<br><br>
<h3 style="font-family:Comic Sans MS;">Who we are</h3>
<p style="margin-right: 50px;font-family:Comic Sans MS;">
Founded by Helge Andersson in 1973, Foodimpex started its activities based on the contacts he established during his job as purchasing manager within the Food industry, in which he was active his whole life.
</p>
<p style="margin-right: 50px;font-family:Comic Sans MS;">
Thus, from the beginning, the business focus was in East-European countries. Gradually, the market increased and business was developed all over Europe. In 1980, a subsidiary was formed in Madrid, Spain. Today, Spain is a substantial market. Our business has grown in many markets, most recently including Central and South America.
</p>
<p style="margin-right: 50px;font-family:Comic Sans MS;">
Our companys main product line is deep-frozen fruits, berries and vegetables. Our main focus is private label packing along with direct supplies to the food industry.
</p>
</div>
<br>
<div style="margin-left: 8%;width: 100%;">
<img src="img/sz.jpg" class="sz" >
</div>
</div>
<div>
<br>
<br>
<br>
<br>
<br>
<p class="line" >
</div>
<div>
<div class="left footer" style="font-family:Comic Sans MS;">
<br>
<h5>
LATEST NEWS >>
</h5>
<h6>
We were nomination in the Sial Innovation Award 2018 and proud to show you one of our latest news, passion fruit cubes.
</h6>
<h5>
READ MORE >>
</h5>
</div>
<br>
<div class="right footer" style="font-family:Comic Sans MS;">
<h6 style="white-space:pre-wrap;">INTERNATIONAL AB</h6>
<h6>
Järnvägsgatan 11, SE 254 24 Helsingborg, Sweden
</h6>
</div>
</div>
</div>
</div>
</body>
</html>
<br><br><br><br><br><br>
<br><br>
<h3 style="font-family:Comic Sans MS;">Who we are</h3>
<p style="margin-right: 50px;font-family:Comic Sans MS;">
Founded by Helge Andersson in 1973, Foodimpex started its activities based on the contacts he established during his job as purchasing manager within the Food industry, in which he was active his whole life.
</p>
<p style="margin-right: 50px;font-family:Comic Sans MS;">
Thus, from the beginning, the business focus was in East-European countries. Gradually, the market increased and business was developed all over Europe. In 1980, a subsidiary was formed in Madrid, Spain. Today, Spain is a substantial market. Our business has grown in many markets, most recently including Central and South America.
</p>
<p style="margin-right: 50px;font-family:Comic Sans MS;">
Our companys main product line is deep-frozen fruits, berries and vegetables. Our main focus is private label packing along with direct supplies to the food industry.
</p>
</div>
<br>
<div style="margin-left: 8%;width: 100%;">
<img src="img/sz.jpg" class="sz" >
</div>
</div>
<div>
<br>
<br>
<br>
<br>
<br>
<p class="line" >
</div>
<div>
<div class="left footer" style="font-family:Comic Sans MS;">
<br>
<h5>
LATEST NEWS >>
</h5>
<h6>
We were nomination in the Sial Innovation Award 2018 and proud to show you one of our latest news, passion fruit cubes.
</h6>
<h5>
READ MORE >>
</h5>
</div>
<br>
<div class="right footer" style="font-family:Comic Sans MS;">
<h6 style="white-space:pre-wrap;">INTERNATIONAL AB</h6>
<h6>
Järnvägsgatan 11, SE 254 24 Helsingborg, Sweden
</h6>
</div>
</div>
</div>
</div>
</body>
</html>