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 ...
随机推荐
- 百度编辑器html网页显示
$(function () { var ue = UE.getEditor('content',{ serverUrl:'{:\\think\\Url::build("Ueditor/ind ...
- C#进行回文检测，判断字符串是否是回文的代码
下面代码内容是关于C#进行回文检测,判断字符串是否是回文的代码,应该是对各位朋友有些好处. Console.WriteLine("算法1:请输入一个字符串!");string st ...
- 关于flex布局【转】
很受用,原文链接:http://blog.csdn.net/magneto7/article/details/70854472
- echarts 折线图自定义颜色与修改legend颜色
option4 = { title : { text: '', subtext: '' }, color:['#2db7f5','#ff6600','#808bc6'], //关键加上这句话 ...
- Haproxy 安装及配置
Haproxy介绍 HAProxy是一个特别适用于高可用性环境的TCP/HTTP开源的反向代理和负载均衡软件.实现了一种事件驱动,单一进程模型,支持非常大的并发连接,是因为事件驱动模型有更好的资源和时 ...
- python入门篇
第一篇:python入门 第二篇:数据类型.字符编码.文件处理 第三篇:函数 第四篇:模块与包 第五篇:常用模块 第六篇:面向对象 第七篇:面向对象高级 第八篇:异常处理 第九篇:网络编程 第十篇:并 ...
- Mongodb复杂查询，总结
内嵌文档复杂查询 数据结构 { "_id":"1412243", "info":{ "data":[ { "b ...
- 最近面试被问到一个问题，AtomicInteger如何保证线程安全？
最近面试被问到一个问题,AtomicInteger如何保证线程安全?我查阅了资料 发现还可以引申到 乐观锁/悲观锁的概念,觉得值得一记. 众所周知,JDK提供了AtomicInteger保证对数字的操 ...
- maven配置及IDEA配置maven环境
一. maven的下载及配置 1. maven下载地址 可以在网址:https://maven.apache.org/download.cgi下载最新版本的maven 2. maven文件解压缩 解压 ...
- linux文件常用命令
文件管理不外乎文件或目录的创建.删除.查询.移动,有mkdir/rm/mv 2.1. 创建和删除 创建:mkdir 删除:rm 删除非空目录:rm -rf file目录 删除日志 rm *log (等 ...