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 ...
随机推荐
- 洛谷 P2325 [SCOI2005]王室联邦
简化版题意: 一个国家由\(n\)个城市组成一颗树,要将其划分为\(n\)个省 每个城市大小为\([B,3B]\),每个省有一个省会(不一定要在省内),使得每个省的所有城市到省会的路径上不能经过其他省 ...
- 最近公共祖先（LCT）
来一发\(LCT\)求\(LCA\) \(LCT\)在时间上不占据优势,码量似乎还比树剖,倍增,\(Tarjan\)大一点 但是却是一道\(LCT\)的练手题 对于每一个询问,我们只需要把其中一个点( ...
- dgraph解决社交关系中的正反向查找
dgraph解决社交关系中的正反向查找 本篇介绍的是, 社交关系中的关注者与被关注者在dgraph中如何实现查找. 对dgraph的基本操作不太清楚的可以看看我之前写的博客 dgraph实现基本操作 ...
- 为什么天线的回波损耗以-10dB大小来衡量？
传送门:http://www.eeworld.com.cn/Test_and_measurement/2014/0610/article_9152.html i:对于2端口无损耗网络,可以根据S11的 ...
- 观察者模式 vs 发布-订阅模式
我曾经在面试中被问道,_“观察者模式和发布订阅模式的有什么区别?” _我迅速回忆起“Head First设计模式”那本书: 发布 + 订阅 = 观察者模式 “我知道了,我知道了,别想骗我” 我微笑着回 ...
- 安卓上用Termux终端模拟器安装MC Forge 1.12.2服务器！
本教程重度新手向,大神勿喷(因为楼主本人就是Linux小白)! 为了让教程合乎简约至上的原则,将不在基本操作上赘述 测试环境:酷派大神Note3 Android5.0 2GBRAM 未root 截图是 ...
- Python爬虫之三
1)使用Scrapy,什么叫做Scrapy Scrapy,Python开发的一个快速.高层次的屏幕抓取和web抓取框架,用于抓取web站点并从页面中提取结构化的数据.Scrapy用途广泛,可以用于数据 ...
- enumerate() 函数
enumerate() 函数用于将一个可遍历的数据对象(如列表.元组或字符串)组合为一个索引序列,同时列出数据和数据下标,一般用在 for 循环当中. 具体参考博客http://www.runoob. ...
- PLSQL 报错弹框乱码
PLSQL Developer下报错信息显示乱码问题 连接环境:win 7 数据库版本:oracle 11g 模拟一个错误,查看错误提示显示"????"乱码问题,如下: 检查: 1 ...
- makefile 转载
http://blog.csdn.net/hongfuhaocomon/article/details/51523394 http://blog.csdn.net/lanmanck/article/d ...