foot
码云链接：https://gitee.com/zyyyyyyyyyyy/codes/rcfdzmin4a82v975pl1ko47
效果图：
原网站截图：
源代码：
<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();
})
<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>
foot的更多相关文章
- URAL 1205 By the Underground or by Foot?（SPFA）
By the Underground or by Foot? Time limit: 1.0 secondMemory limit: 64 MB Imagine yourself in a big c ...
- 网页中的foot底部定位问题
有时候,我们会碰到这样一个问题. 网页底部一般有个foot对吧,放置一些友情链接版权声明什么的,这个模块是如何定位的? 要是直接放内容区域的下面的话,假如是内容区域的高度不够的话,那么foot下面是会 ...
- ListView-添加head跟foot item 问题
今天在使用ListView 的 addFooterView 的方法时候,遇到了一个问题.当我代码中执行了如下的操作 ListView listView = new ListView(this); li ...
- ThinkPHP5——引入公共部分head和foot(多种方法)
在项目中,header和footer重复使用的次数高,于是我们把header和footer作为公共部分,其他模板需要的话就引用.下面我教大家引用公共模板 1.使用include 首先在view下面新建 ...
- Crow’s Foot Notation
http://www2.cs.uregina.ca/~bernatja/crowsfoot.html Crow’s Foot Notation A number of data modeling te ...
- Unity-Animator深入系列---Foot IK
回到 Animator深入系列总目录 最近在做一个demo,遇到了角色跑动不自然的问题(注意双腿): 后来得知勾选FootIK之后Unity会智能修复这类问题: 好像这个功能还能做到斜面地形匹配,不过 ...
- 1205. By the Underground or by Foot?(ｓｐｆａ）
1205 简单题 有一些小细节 两个站可能不相连 但是可以走过去 #include <iostream> #include<cstdio> #include<cstrin ...
- JS 脚本应该放在页面哪个位置 head body foot
我们平时在页面上写JS 是放在头部<head>中呢 还是放到body 最下面 能更优化? 查了一番资料,推荐 放在页面底部如: <html> <head> < ...
- 如何高度自定义CollectionView的header和foot
最近在研究CollectionView,突然发现觉得他的HeaderSection和FootSection也可以高度自定义. 国外有详细的教程:http://www.appcoda.com/ios-c ...
随机推荐
- C语言博客作业05--指针
1.本章学习总结 1.1 思维导图 1.2 本章学习体会及代码量学习体会 1.2.1 学习体会 1.2.2 代码累计 2.PTA总分 2.1截图PTA中函数题目集的排名得分 2.2 我的总分: 3.P ...
- [ffmpeg] 滤波
ffmpeg中有很多已经实现好的滤波器,这些滤波器的实现位于libavfilter目录之下,用户需要进行滤波时,就是是调用这些滤波器来实现的.ffmpeg对于调用滤波器有一整套的调用机制. 基本结构 ...
- JS前端无侵入实现防止重复提交请求技术
JS前端无侵入实现防止重复提交请求技术 最近在代码发布测试的过程中,我发现有些请求非常的消耗服务器资源,而系统测试人员因为响应太慢而不停的点击请求.我是很看不惯系统存在不顺眼的问题,做事喜欢精益求精, ...
- vue+typescript基础练习
环境 win10 node -v 8.9.3 vue-cli 3.4 typescript 3.1.5 编辑器 vscode 目标 使用vuecli工具,建立一个项目,使用typescript.并实现 ...
- Java 8 特性 —— 方法引用
方法引用通过方法的名字来指向一个方法.方法引用可以使语言的构造更紧凑简洁,减少冗余代码.方法引用使用一对冒号 :: .下面,我们在 Car 类中定义了 4 个方法作为例子来区分 Java 中 4 种不 ...
- echarts 折线图自定义颜色与修改legend颜色
option4 = { title : { text: '', subtext: '' }, color:['#2db7f5','#ff6600','#808bc6'], //关键加上这句话 ...
- 081、Weave Scope 多主机监控（2019-04-29 周一）
参考https://www.cnblogs.com/CloudMan6/p/7674011.html Weave Scope 除了监控容器,还可以监控Docker Host. 点击顶部 HOS ...
- [Android] Android 手机下 仿 今日头条 新闻客户端
利用一个月的时间,自学了 Android 开发 ,为了检验学习成果,特意 开发了这个 仿 今日头条 新闻客户端 AppNews 包括图文新闻+视频新闻+图片新闻 预览演示如下: 功能说明: 1)底部 ...
- 解决SkyP2M工程常见问题所参考的博客汇总
工程是基于64位的 1 Error 26 error C2491: 'HUDManager::_viewport' : definition of dllimport static data memb ...
- centos6 升级pip后导致pip不可用
问题:公司内部一台服务器在用pip安装python某个模块的时候提示pip需要升级,然后我就手贱升级了一下,结果悲催了,再次执行pip命令时报错如下: Google了下错误,说是: CENTOS/RH ...