html——陆海网站练习
2024-05-03 17:05:14
html——陆海网站练习
图片轮播
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title1</title><link rel="stylesheet" href="../css/bootstrap.min.css"><script src="../js/jquery-1.10.2.min.js"></script><script src="../js/bootstrap.min.js"></script>
<script>$(function () {$('.carousel').carousel({interval:1000});$('#myCarousel').on('slide.bs.carousel', function () {
// alert("当调用 slide 实例方法时立即触发该事件。");});$('#myCarousel').on('slid.bs.carousel', function () {
// alert("当轮播完成实例方法时立即触发该事件。");});})
</script></head>
<body><div>
<div id="myCarousel" class="carousel slide"><!-- 轮播（Carousel）指标 --><ol class="carousel-indicators"><li data-target="#myCarousel" data-slide-to="0" class="active"></li><li data-target="#myCarousel" data-slide-to="1"></li><li data-target="#myCarousel" data-slide-to="2"></li></ol><!-- 轮播（Carousel）项目 --><div class="carousel-inner"><div class="item active"><img src="../img/0e1a45f41a054b55a8a6af751c7ada31.jpg" height="349" width="100%"alt="First slide"/><div class="carousel-caption">标题 1</div></div><div class="item"><img src="../img/1a543e1104bc47c1b9443f58439e5b09.jpg" height="413" width="100%"alt="Second slide"/><div class="carousel-caption">标题 2</div></div><div class="item"><img src="../img/3b8ec93770744ff4ad12e25ec4a200b1.jpg" height="387" width="100%"alt="Third slide"/><div class="carousel-caption">标题 3</div></div></div><!-- 轮播（Carousel）导航 --><a class="carousel-control left" href="#myCarousel"data-slide="prev">‹</a><a class="carousel-control right" href="#myCarousel"data-slide="next">›</a>
</div>
</div>
</body>
</html>陆海网站练习效果图
相关代码：
/*id选择器*/
#heard1{display: flex;width: 100%;height: 50px;margin: auto;background: #111111;
}
#heard2{display: flex;width: 100%;height: 4px;margin: auto;background: #1f84e6;
}
#heardTitle1{color: #ffffff;position: absolute;top: 25px;right: 30px;
}
#sectionHeader{display: flex;width: 100%;height: 90px;margin: auto;
}
#img1{display: flex;height: 660px;margin: auto;
}
#sectionHeader ul{display: flex;
width: 100%;
}
#sectionHeader ul li {float:left;position:relative;top: 25px;left: 30px;font-size: 22px;font-weight: bold;width: 12.5%;
}
.clj a:hover{color: #18279b;
}
#img0{position: absolute;top: 670px;left: 38%;
}
#productService{flex-flow: column;display: flex;width: 100%;height: 460px;background-image: url(../img/ab_part01.jpg);
}
#ps{flex-flow: column;width: 100%;margin: 0px;
}
#img4{flex-flow: row;width: 100%;margin: auto;}
#img41{float:left;width: 126px;height: 126px;background:url(../img/ip_ico.png) no-repeat;background-position:0 0 ;
}
#img42{float:left;width: 126px;height: 126px;background:url(../img/ip_ico.png) no-repeat;background-position:-126px 0 ;
}
#img43{float:left;width: 126px;height: 126px;background:url(../img/ip_ico.png) no-repeat;background-position:-252px 0;
}
#img44{float:left;width: 126px;height: 126px;background:url(../img/ip_ico.png) no-repeat;background-position:-378px 0;
}.p1{float:left;display: flex;flex-flow:column;width: 126px;margin-left: 13%;
}
#imgImg{display: flex;height: 560px;width: 100%;margin: auto;
}
#success{display: flex;width: 100%;height: 150px;flex-flow:column;background-color: #2a3136;background-image: url(../img/case_bg.png);background-repeat: no-repeat;background-position: 100% 100%;margin: 0px;
}
#zyf4{display: flex;height: 360px;width: 100%;overflow: hidden;margin: auto;
}
.zyf1{display: flex;width: 25%;height: 100%;flex-flow:column;
}
.zyf11{display: flex;width: 100%;height: 100%;flex-flow:column;text-align: center;background-color: #2a3136;opacity: 0;color: #ffffff;
}
#x1{transition: all 1s ease;
}a:hover .zyf11{opacity: 0.8;transform: translate(0,-360px);
}.i4{text-align: center ;width: 100%;font-weight :bold;font-size: 18px;color: #18279b;margin: 2px
}a:hover .i4{color: #fa2721;}img{/*支持所有类型 时间 差值器*/transition: all 1s ease;
}
.imgfd:hover{transform: scale(1.5,1.5);
}
.zy1{overflow: hidden;
}
div{/*支持所有类型 时间 差值器*/transition: all 1s ease;
}
.divz:hover{transform: rotateY(360deg);
}.imgxs{opacity: 0;/*支持所有类型 时间 差值器*/transition: all 0.00001s ease;
}
.imgxs:hover{opacity: 1;
}#News{display: flex;width: 100%;height: 150px;flex-flow:column;position: relative;margin-top: 0px;
}
#zyf3{display: flex;flex-flow:row;height: 400px;width: 100%;margin: 0px;}
.zyfzyf{flex:1;border: 2px solid #291109;margin: 10px;margin-top: 0px;padding: 10px;flex-flow:column;height: 400px;width: 20%;position: relative;}
a:hover .zy3{margin-left: 25%;border: 2px solid #e6bb26;color: #ffffff;background-color: #e6bb26;width: 100px;position: absolute;bottom: 20px;text-align: center ;font-size: 20px;
}.zy3{margin-left: 25%;border: 2px solid #e6bb26;color: #e6bb26;width: 100px;position: absolute;bottom: 20px;text-align: center ;font-size: 20px;
}
#table{display: flex;width: 100%;height: 340px;margin-top: 60px;background: rgba(17, 17, 17, 0.75);}
#foot{display: flex;width: 100%;height: 50px;margin: auto;background: #111111;
}
.title0{color: white;font-size: 40px;width: 25%;text-align: center;
}
.title1{color: white;
}
.title11{color: white;position: relative;left: 100px;
}.lb{height:51px;width:423px;position: relative;top: -500px;
}<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>辽宁陆海</title><link rel="stylesheet" href="../css/index.css"><link rel="stylesheet" href="../css/bootstrap.min.css"><script src="../js/jquery-1.10.2.min.js"></script><script src="../js/bootstrap.min.js"></script><script>$(function () {
// $('.carousel').carousel({
// interval:1000
// });$('#myCarousel').carousel({interval:3000});$('#myCarouse2').carousel({interval:3000});$('#myCarousel').on('slide.bs.carousel', function () {
// alert("当调用 slide 实例方法时立即触发该事件。");});$('#myCarousel').on('slid.bs.carousel', function () {
// alert("当轮播完成实例方法时立即触发该事件。");});$('#myCarouse2').on('slide.bs.carousel', function () {
// alert("当调用 slide 实例方法时立即触发该事件。");});$('#myCarouse2').on('slid.bs.carousel', function () {
// alert("当轮播完成实例方法时立即触发该事件。");});})</script></head>
<body>
<header><div id="heard1"> <span id="heardTitle1" >English <img src="../img/zoom.png" height="15" width="15"/></span> </div><div id="heard2"> </div>
</header>
<section><div id="sectionHeader"><img src="../img/logo.png" height=80px width=300px style="margin-left:80px"/><ul type="none" ><li class="clj"><a href="http://www.lpei.com.cn" target="_blank" style="color: #111111;text-decoration: none " οnmοusemοve="this.style.color='blue'" οnmοuseοut="this.style.color='black';" >企业介绍</a></li><li class="clj"><a href="http://www.baidu.com" target="_blank" style="color: #111111;text-decoration: none " οnmοusemοve="this.style.color='blue'" οnmοuseοut="this.style.color='black';" >研发设置</a></li><li >产品中心</li><li >工程技术</li><li >咨讯中心</li><li >人力资源</li><li >工程备件</li></ul></div>
</section>
<section><div id="img1"><!--<img src="../img/3881b55723324d90ac840ca7014450eb.jpg" width="100%"/>--><div style="width: 100%;height: 660px" ><div id="myCarousel" class="carousel slide" style="height: 100%;width:100% ;"><!-- 轮播（Carousel）指标 --><ol class="carousel-indicators"><li data-target="#myCarousel" data-slide-to="0" class="active"></li><li data-target="#myCarousel" data-slide-to="1"></li><li data-target="#myCarousel" data-slide-to="2"></li></ol><!-- 轮播（Carousel）项目 --><div class="carousel-inner" style="height: 100%"><div class="item active" style="height: 100%"><img src="../img/3881b55723324d90ac840ca7014450eb.jpg" style="height: 100%;width:100% ;" alt="First slide"/><div class="carousel-caption">标题 1</div></div><div class="item" style="height: 100%;width:100% ;"><img src="../img/8606c1c128fc415ead546738b8b39af1.jpg" style="height: 100%;width:100% ;" alt="Second slide"/><div class="carousel-caption">标题 2</div></div><div class="item" style="height: 100%;width:100% ;"><img src="../img/edd948548a11473c82462133b4e61d9d.jpg" style="height: 100%;width:100% ;" alt="Third slide"/><div class="carousel-caption">标题 3</div></div></div><!-- 轮播（Carousel）导航 --><a class="carousel-control left" href="#myCarousel"data-slide="prev">‹</a><a class="carousel-control right" href="#myCarousel"data-slide="next">›</a></div><div id="img0"><img src="../img/duo.png" height="142" width="306"/><a><img class="imgxs" src="../img/duo1.png"style="position: absolute;height: 120px;width: 105px;margin-left:-305px;top: 24px;" /></a><a><img class="imgxs"src="../img/duo2.png"style="height: 109px;width: 120px;position: absolute;margin-left: 44px;margin-top: -175px"/></a><a><img class="imgxs"src="../img/duo3.png"style="height: 108px;width: 122px;position: absolute;margin-left:158px;margin-top: -175px"/></a><a><img class="imgxs"src="../img/duo4.png"style="height: 114px;width: 95px;position:absolute;margin-left: 226px;top:30px"/></a></div></div></div></section>
<section><div id="productService" ><div id="ps"><h1 style="text-align: center ;width: 100%; font-weight :bold;font-size: 50px;margin: 10px">产品与服务</h1><h2 style="text-align: center ;width: 100%; font-size: 30px;font-weight :bold;color: #1f84e6;margin: 0px" >Product&Service</h2></div><div id="img4"><div class="p1"><a href="#" style="text-decoration: none"><div id="img41" class="divz"> </div><div id="img411" class="i4" >海工产品 </div></a></div><div class="p1"><a href="#" style="text-decoration: none"> <div id="img42" class="divz"> </div><div id="img422" class="i4" >陆地装备 </div></a> </div><div class="p1"><a href="#" style="text-decoration: none"> <div id="img43" class="divz"> </div><div id="img433" class="i4">钻井一体化服务</div></a></div><div class="p1"><a href="#" style="text-decoration: none"> <div id="img44" class="divz"> </div><div id="img444" class="i4" >海洋钻井服务 </div></a> </div></div></div>
</section>
<section><div id="imgImg"><!--<img src="../img/edd948548a11473c82462133b4e61d9d.jpg" width="100%"/>--><div style="width: 100%;height: 560px" ><div id="myCarouse2" class="carousel slide" style="height: 100%;width:100% ;"><!-- 轮播（Carousel）指标 --><ol class="carousel-indicators"><li data-target="#myCarousel" data-slide-to="0" class="active"></li><li data-target="#myCarousel" data-slide-to="1"></li><li data-target="#myCarousel" data-slide-to="2"></li></ol><!-- 轮播（Carousel）项目 --><div class="carousel-inner" style="height: 100%"><div class="item active" style="height: 100%"><img src="../img/3881b55723324d90ac840ca7014450eb.jpg" style="height: 100%;width:100% ;" alt="First slide"/><div class="lb" ><img src="../img/eee41aad791741ceb16bbc409b26845c.png" height="51" width="423"/></div><div class="carousel-caption">图片1</div></div><div class="item" style="height: 100%;width:100% ;"><img src="../img/8606c1c128fc415ead546738b8b39af1.jpg" style="height: 100%;width:100% ;" alt="Second slide"/><div class="carousel-caption">图片2</div></div><div class="item" style="height: 100%;width:100% ;"><img src="../img/edd948548a11473c82462133b4e61d9d.jpg" style="height: 100%;width:100% ;" alt="Third slide"/><div class="carousel-caption">图片3</div></div></div><!-- 轮播（Carousel）导航 --><a class="carousel-control left" href="#myCarousel"data-slide="prev">‹</a><a class="carousel-control right" href="#myCarousel"data-slide="next">›</a></div>
</div></div>
</section>
<section><div id="success"><h1 style="text-align: center ;width: 100%; font-weight :bold;font-size: 50px;color: #ffffff;margin: 10px">成功案例</h1><h2 style="text-align: center ;width: 100%; font-size: 30px;font-weight :bold;color: #1f84e6;margin: 0px" >Case</h2></div>
</section>
<section><div id="zyf4"><div class="zyf1"><a style="width: 100%;height: 100%"><img class="zyfxf" src="../img/5fbcdc997f83429ea0dc6f10a0c3412b.jpg" width="100%" height="100%"/><div id="x1" class="zyf11"><div style="position: relative;margin-top: 40px "><img src="../img/zoom.png" height="100" width="100"/></div><div style="position: relative;margin-top: 100px ">为中国石油设计300尺自升式钻井平台 </div></div></a></div><div class="zyf1"><a style="width: 100%;height: 100%"><img class="zyfxf" src="../img/fd0e5430d25d45d993d664d5ee937ac9.jpg" width="100%" height="100%"/><div class="zyf11"><div style="position: relative;margin-top: 40px "><img src="../img/zoom.png" height="100" width="100"/></div><div style="position: relative;margin-top: 100px ">为中国石油设计辽河一号多功能服务船 </div></div></a></div><div class="zyf1"><a style="width: 100%;height: 100%"><img class="zyfxf" src="../img/0e1a45f41a054b55a8a6af751c7ada31.jpg"width="100%" height="100%"/><div class="zyf11"><div style="position: relative;margin-top: 40px "><img src="../img/zoom.png" height="100" width="100"/></div><div style="position: relative;margin-top: 100px ">为冀东应急中心设计中油202搜救船 </div></div></a></div><div class="zyf1"><a style="width: 100%;height: 100%"><img class="zyfxf" src="../img/04f40ec49eab483285b7230cc60debb4.jpg" width="100%" height="100%"/><div class="zyf11"><div style="position: relative;margin-top: 40px "><img src="../img/zoom.png" height="100" width="100"/></div><div style="position: relative;margin-top: 100px ">为中国石油设计海豹系列震源船 </div></div></a></div></div></section>
<section><div id="News"><h1 style="text-align: center ;width: 100%; font-weight :bold;font-size: 50px;color: #111111;margin: 10px">最新动态</h1><h2 style="text-align: center ;width: 100%; font-size: 30px;font-weight :bold;color: #1f84e6;margin: 0px" >News</h2></div>
</section>
<section><div id="zyf3"><div class="zyfzyf" style="margin-left: 200px"><a href="#"> <div class="zy1"><img class="imgfd" src="../img/c15346ffa57f4c6c84945bedf5fe9fa0.jpg" width="100%"height="200px" /></div><div class="zy2">总工程师张晓军前往天津太重指导检查...<br>近日，我院总工程师张晓军再次前往天津太重项目部看望并慰问坚守工作岗位的现场员工。</div><div class="zy3">Read More</div></a></div><div class="zyfzyf"><a href="#"> <div class="zy1"> <img class="imgfd"src="../img/1a543e1104bc47c1b9443f58439e5b09.jpg" width="100%"height="200px" /></div><div class="zy2">市科协领导来我院调查工作<br>2016年8月30日，盘锦市科学技术协会主席、周部长一行来到我院调研工作，了解跟</div><div class="zy3">Read More</div></a></div><div class="zyfzyf"style="margin-right: 200px"><a href="#"> <div class="zy1"><img class="imgfd"src="../img/3b8ec93770744ff4ad12e25ec4a200b1.jpg" width="100%"height="200px" /></div><div class="zy2">沈阳119厂民品部领导前来商务洽谈<br>2016年8月4日，沈阳199厂民品部领导前来我院进行商务洽谈，院长戴克文</div><div class="zy3">Read More</div></a></div></div>
</section>
<footer>
<div id="table"><table>
<tr><th class="title0">联系我们</th><th class="title0">关于陆海</th><th class="title0">导航</th>
</tr>
<tr><td class="title11">总机:0427-3293318</td><td class="title1" rowspan="4">辽宁陆海石油装备研究院有限公司，面向全球提供一流的石油钻采设备、海洋工程、船舶制造和钻井平台等工程设备的技术研发、技术支持和技术服务等业务，是石油装备研发领域的高新技术企业。</td><td class="title1" rowspan="4" ><table><tr><td class="title1"><ul><li>企业介绍</li><li>产品介绍</li><li>咨询中心</li><li>工程备件</li></ul></td><td class="title1"><ul><li>研发设计</li><li>工程技术服务</li><li>人力资源</li><li>企业邮箱</li></ul></td></tr></table></td>
</tr><tr><td class="title11">传真:0427-3293318</td></tr><tr><td class="title11">售后:0427-3293318</td></tr><tr><td class="title11">邮箱:lpei@lpei.com.cn</td></tr><tr><td class="title11">地址:辽宁省盘锦市兴隆台区高新技术<br>产业园公园街</td><td><img src="../img/f_share.png" height="37" width="111"/></td></tr></table></div><div id="foot"><span style="width: 100%;text-align: center;color: white;margin-top: 15px">@2016辽宁陆海石油装备研究院有限公司All rights ressrved.|辽ICP备13013171号-2 ZYF制作 </span></div>
</footer>
</body>
</html>html——陆海网站练习相关推荐
- 维基解密网站网址是什么
先看一下百度维基解密网站百科的介绍: 维基解密网站网址是一个专为揭露政府.企业腐败行为而成立的网站,成立于2006年,创始人是朱利安·阿桑.他1971年出生于澳大利亚昆士兰.童年时,由于父母开办了一个 ...
- C#毕业设计——基于C#+asp.net+sqlserver的课件发布网站设计与实现（毕业论文+程序源码）——课件发布网站
基于C#+asp.net+sqlserver的课件发布网站设计与实现(毕业论文+程序源码) 大家好,今天给大家介绍基于C#+asp.net+sqlserver的课件发布网站设计与实现,文章末尾附有本毕 ...
- 网站为什么会被劫持，被劫持了怎么办。
在网络上我们经常可以发现一个问题,当我们去点击访问一个网页查看内容时,会被跳转至一个我们完全没有点击的网站.这就是属于网络劫持的一种,一般劫持者会选择流量较高的小网站进行用户劫持,将访问A网页的用户, ...
- Docsify个人网站搭建详细教程
目录 一.什么是 docsify 二.安装 docsify 三.多页文档设置 四.定制化配置 4.1.侧边栏 4.2.导航栏 4.3.封面 4.4.主题 五.部署 5.1.部署到Gitee 5.2.部 ...
- 用gogs搭建属于自己的git网站
如果你对docker的操作不太了解, 建议先阅读 从零搭建docker私有仓库 gogs是一款极易搭建的自助 Git 服务, 掌握了它, 我们就可以搭建自己的git服务站点 gogs官网: https ...
- 网站项目必备——12款白富美型 jQuery 图片轮播插件
转自:http://www.cnblogs.com/lhb25/archive/2013/01/06/jquery-image-carousel-effect.html 图片轮播是网站中的常用功能,用 ...
- .net2.0网站多语言
asp.net 2.0中的App_GlobalResources可以用来解决本地化的问题,程序会根据浏览器的语言首选项自动判断显示出本地化的界面. 首先在App_GlobalResources新建re ...
- 为什么很多网站的验证码都设置得肉眼都很难识别？
欢迎访问网易云社区,了解更多网易技术产品运营经验. 首先来谈谈验证码的机制,验证码作为一种人机识别手段,其终极目的,就是区分正常人和机器的操作.而对于没有验证码的场景,比如用户登陆,则机器可以同时.大 ...
- php防止网站被镜像,网站被等恶意镜像的解决、反制措施详细教程
前天在百度搜索王柏元的博客网站关键词时,猛地在百度结果的第一页中发现了一个标题.简介和我完全一样的网站,不看不知道,这个网站还不是传统意义上的抄袭.盗链,不仅仅把我的网站全部照搬,而且把网页里所有的链 ...
- 视频 网站 页面开关灯实现方法
在甲骨文学习 已经进行了四分之一了, 关于web 的学习基本结束了, 在项目展示的时候遇到了 视频网站开关灯的问题, 其实问题的根本就是 做两个div, 然后开灯的时候隐藏一个 关灯的时候 隐藏另 ...
最新文章
- 哪些人适合学习软件测试
- 在eclipse中使用JDBC连接MySQL5.7.24
- 计算机病毒的八个特征,计算机病毒的五个特征- 1：.单项选择题(8)
- Jzoj3931【NOIP2014day1官方数据】联合权值
- Linuc C 编程实例1
- 今天刚学的idea的debug打断点，Ctrl+u进入Evaluate Expression界面，调试程序事半功倍！
- java lamda循环条件_Java lambda 循环累加求和代码
- 模拟实现ArrayList与 LinkedList
- 边缘计算框架_【北大成果】一种集成多组网协议多边缘计算框架的边缘计算处理平台...
- typo(ruby的开源blog)系统的安装
- .NET与SAP的来往(转)
- 瑞昱Realtek交换机芯片概要
- Vue电商后台管理系统功能展示
- Moos-IvP 实验室7 Helm Autonomy 任务详解
- 写了placement new也要写placement delete——条款52
- SpringBoot + MyBatis + MySQL +IDEA2021 增删改查 2021-06-04
- 《淘宝网开店 拍摄 修图 设计 装修 实战150招》一一1.7 顺光拍摄展示更多细节...
- 搜索引擎检索的一点经验
- mac安装WireShark2.0新手教程
- 人工智能第一课：使用分类算法预测糖尿病