软件工程第二次作业
码云链接：https://gitee.com/moranyang/codes/0seh361gbtqdl52npzum419
原网页效果图：
模仿网页效果图：
实现功能：
1.响应式布局（使用@media 、flex、max-width、width： ?%等）
2.动画效果
轮播
二级导航栏滑出
源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>moran_food</title>
</head>
<style type="text/css">
body{
width: 79%;
overflow:auto;
margin:0 auto;
}
.bg{
width: 100%;
height: 1000px;
background:RGB(246,246,249);
margin:0 auto;
margin-top: 20px;
}
.head{
width: 90%;
height: 156px;
background:RGB(246,246,249);
margin:0 auto;
display:flex;
justify-content: space-between;
align-items:center;
}
.logo{
width:45%;
background:RGB(246,246,249);
}
.lend{
width: 55%;
height: 50px;
background:RGB(246,246,249);
}
.picture{
width: 90%;
height:50%;
background:RGB(246,246,249);
margin:0 auto;
}
@media(max-width:1200px){
.picture{
height:45%;
}
}
@media(max-width:1000px){
.picture{
height:35%;
}
}
@media(max-width:800px){
.picture{
height:25%;
}
}
@media(max-width:500px){
.picture{
height:15%;
}
}
.bottom{
width: 90%;
margin-top: 60px;
background:RGB(246,246,249);
margin:0 auto;
margin-bottom: 60px;
}
*{padding: 0;margin: 0;} /* 先重置一下html，消除HTML标签默认的内外边距 */
.wrap{width: 100%; height:50px;margin: 0 auto;margin-top: 20px;}
/* 对导航的内容设置一个主体为800px的宽并使其居中 */
.clear{clear: both;} /* 清除浮动 */
a{text-decoration-line: none;} /* 去掉默认a标签的下划线 */
ul,li{list-style: none;}/*width: 80px*/
nav .level>li{float: left;text-align: center;background:RGB(246,246,249);padding: 0px 12px 0px 12px;font-size: 13px;transition: .4s;position:f}
nav .level>li a{color: black;}
nav .level>li:hover{background: RGB(246,246,249);} /* 设置鼠标滑过后的样式 */
nav .two{display: none;margin-top: 10px;font-size: 13px;background:RGB(79,130,4);} /* 先使二级菜单的内容隐藏 */
nav .level>li:hover .two{display: block;} /* 鼠标滑过一级菜单后的显示二级菜单 */
nav .level>li a{color: white;}
nav .two li{padding: 5px 0;transition: .4s;cursor: pointer;}
nav .two li:hover{background:RGB(79,130,4);}
.imgbox{
width: 100%;
/*height: 599px;*/
position:relative;
border: 0;
margin:0 auto;
/*border-radius: 15px;*/
}
.imgbox img{
width: 100%;
/*height: 599px;*/
position: absolute;
left: 0;
top: 0;
opacity: 0;
/*border-radius: 15px;*/
}
</style>
<body>
<div class="bg">
<div class="head">
<div class="logo"><img src="img/logo.png" style="max-width: 100%;" ></div>
<div class="lend">
<nav>
<div class="wrap">
<ul class="level">
<li> MAINPAGE </li>
<li> ABOUT US </li>
<li> WORLDWIDE </li>
<li> OUR WORK
<ul class="two">
<li> <a>THE WAY WE WORK</a> </li>
<li> <a>PRIVATE LABEL</a> </li>
<li> <a>OUR OWN BRAND</a> </li>
<li> <a>CUSTOM MADE SOURCING </a></li>
</ul>
</li>
<li> NEWS </li>
<li> CONTACT </li>
</ul>
</div>
</nav>
</div>
</div>
<div class="picture" >
<div class="imgbox" >
<img src="img/w1.png" style="max-width: 100%;height: auto;"/>
<img src="img/w2.jpg" style="max-width: 100%;height: auto;"/>
</div>
<script src="js/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)%2;
img.eq(i).animate({opacity:'1'})
console.log(400);
},2000);
</script>
</div>
<div class="bottom">
<font face="微软雅黑 Light"><h6><em><p align="center">Our strategic alliances across the globe gives inputs to new tastes, products and local specialties. <br>
This has enabled us to achieve a market leading position in both Scandinavia and central Europe.</p></em></h6></font>
<table width=100%;cellspacing="100">
<th>
<font face="微软雅黑 Light"><h5><p align="left">Headquartered in Helsingborg, Sweden with a subsidiary in Barcelona, Spain,<br>
Foodimpex has a strong market position since more than 40 years.</p></h5></font>
</th>
<th>
<font face="微软雅黑 Light"><h5><p align="right">As a global supplier of frozen berries, fruits, and vegetables, we have an extensive<br>
and solid understanding of the global frozen food industry, and our alignment with<br>
strategic partners worldwide has helped us to maintain a robust network.</p></h5></font>
</th>
</table>
<hr style="width:100%;height:3px;" />
<table width=100%;cellspacing="100">
<th>
<font face="微软雅黑 Light">
<h5><p align="left">LATEST NEWS >></p></h5>
<h5><p align="left"><em>We were nomination in the Sial Innovation Award 2018 and proud to show you one of our latest news, passion fruit<br>
cubes.READ MORE >></em></p></h5>
</font>
</th>
<th>
<font face="微软雅黑 Light">
<h5><b><p align="right">FOODIMPEX INTERNATIONAL AB </p></b></h5>
<h6><p align="right"><em>Järnvägsgatan 11, SE 254 24 Helsingborg, Sweden<br>
Tel: +46 42 18 01 00 Fax: +46 42 18 47 35<br>
E-mail: sales@foodimpex.se</em></p></h6>
</th>
</table>
</div>
</div>
</body>
</html>
浙公网安备 33010602011771号