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>
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
