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 ...
随机推荐
- MT【329】二次函数系数的最大最小
已知二次函数$f(x)=ax^2+bx+c$有零点,且$a+b+c=1$ 若$t=\min\{a,b,c\}$求$t$的最大值. 分析:由$a,c$的对称性,不妨$c\ge a$即$2a+b\le1$ ...
- audio与video控件/标签的隐藏，iso/Android下自动全屏播放，短暂黑屏问题
(一)audio音频标签 <audio src="xxx.mp3"></audio> (二)video视频标签 <video src="xx ...
- python 2.x 与3.x 的区别总结
宏观上:2.x 源码不规范,混乱,冗余. 3.x 源码优美清晰,统一标准,去除了冗余. 默认编码方式:2.x ASCII码 3.x UTF-8 用2.x 处理中文时,需要声明编码方式(由于cmd ...
- dedecms安装操作-重安装-开启GD库
wamp5_1.7.4 打开:http://localhost/install/安装 (输入:域名/install,回车跳转到安装界面,勾选“我已经阅读并同意此协议”,然后点击“继续按钮”.) 重安装 ...
- postgresql某个字段值按照指定规则排序
select id,serial_group_id,state from ap_model order by serial_group_id asc, ( case when state=1 then ...
- MySql实现远程访问配置
1.新建用户远程连接mysql数据库grant all on *.* to admin@'%' identified by '123456' with grant option; flush priv ...
- html css笔记zht
第3章 Img标签 路径问题 绝对路径:从盘符(C:\)出发的路径 (C:\Users\......) linux(绝对路径以 / 开头) 相对路径:( ./ 当前文件所在的目录)( ../上一级目录 ...
- kubernetes之监控Prometheus实战--prometheus介绍--获取监控（一）
Prometheus介绍 Prometheus是一个最初在SoundCloud上构建的开源监控系统 .它现在是一个独立的开源项目,为了强调这一点,并说明项目的治理结构,Prometheus 于2016 ...
- Intellij IDEA 4种配置热部署的方法【转】【补】
热加载 热加载可以使代码修改后无须重启服务器,就可以加载更改的代码.(其实分java和非java代码,本处可以让java代码立即生效且不重启服务) 第1种:修改服务器配置,使得IDEA窗口失去焦点时, ...
- OSPFv3实验配置（GNS3)
实验目的 1. 掌握 OSPFv3(v2) 的配置方法 2. 掌握在帧中继环境下 OSPFv3 (v2)的配置方法 3. 掌握 OSPFv3(v2) NSSA 的配置方法 4. 掌握外部路由汇总的配置 ...