Skip to content

梁建民 / liebaochHtml

Go to a project
Commit b1edb42e by LJM
Options

add

parent 4c23fd8c
Expand all
Inline Side-by-side
Showing with 120 additions and 16 deletions
css/style.less
...@@ -111,22 +111,35 @@ ...@@ -111,22 +111,35 @@
position: relative; position: relative;
width: 100%; width: 100%;
height: 720px; height: 720px;
box-sizing: border-box;
overflow: hidden; overflow: hidden;
background: #365C89; background: #365C89;
.bd { .bd {
width: 100%; width: 100%;
height: 720px; height: 100%;
box-sizing: border-box;
li { ul {
width: 100%; width: 100%;
height: 720px; height: 100%;
img { li {
display: block;
width: 100%; width: 100%;
height: 720px; height: 100%;
object-fit: cover; overflow: hidden;
box-sizing: border-box;
img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
&.scaleClass {
animation: scaleAnimation 10s linear infinite;
}
}
} }
} }
} }
...@@ -205,7 +218,35 @@ ...@@ -205,7 +218,35 @@
} }
.slide-text-other { .slide-text-other {
position: absolute;
left: 50%;
bottom: 58px;
margin-left: -640px;
width: 1280px;
.t1 {
font-size: 70px;
color: #ffffff;
font-weight: bold;
line-height: 98px;
margin-bottom: 13px;
}
.t2 {
width: 1064px;
font-size: 18px;
color: #FFFFFF;
line-height: 25px;
margin-bottom: 44px;
}
}
}
&.head-wrap-pic {
height: 880px;
.slideBox {
height: 880px;
} }
} }
} }
...@@ -707,4 +748,16 @@ ...@@ -707,4 +748,16 @@
-webkit-transform: translateZ(0); -webkit-transform: translateZ(0);
transform: translateZ(0) transform: translateZ(0)
} }
}
@keyframes scaleAnimation {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
} }
\ No newline at end of file
css/style.min.css
...@@ -278,23 +278,34 @@ body { ...@@ -278,23 +278,34 @@ body {
position: relative; position: relative;
width: 100%; width: 100%;
height: 720px; height: 720px;
box-sizing: border-box;
overflow: hidden; overflow: hidden;
background: #365C89; background: #365C89;
} }
.head-wrap .slideBox .bd { .head-wrap .slideBox .bd {
width: 100%; width: 100%;
height: 720px; height: 100%;
box-sizing: border-box;
} }
.head-wrap .slideBox .bd li { .head-wrap .slideBox .bd ul {
width: 100%; width: 100%;
height: 720px; height: 100%;
} }
.head-wrap .slideBox .bd li img { .head-wrap .slideBox .bd ul li {
width: 100%;
height: 100%;
overflow: hidden;
box-sizing: border-box;
}
.head-wrap .slideBox .bd ul li img {
display: block; display: block;
width: 100%; width: 100%;
height: 720px; height: 100%;
object-fit: cover; object-fit: cover;
} }
.head-wrap .slideBox .bd ul li img.scaleClass {
animation: scaleAnimation 10s linear infinite;
}
.head-wrap .slideBox .hd { .head-wrap .slideBox .hd {
position: absolute; position: absolute;
bottom: 30px; bottom: 30px;
...@@ -355,6 +366,33 @@ body { ...@@ -355,6 +366,33 @@ body {
color: #ffffff; color: #ffffff;
font-weight: bold; font-weight: bold;
} }
.head-wrap .slideBox .slide-text-other {
position: absolute;
left: 50%;
bottom: 58px;
margin-left: -640px;
width: 1280px;
}
.head-wrap .slideBox .slide-text-other .t1 {
font-size: 70px;
color: #ffffff;
font-weight: bold;
line-height: 98px;
margin-bottom: 13px;
}
.head-wrap .slideBox .slide-text-other .t2 {
width: 1064px;
font-size: 18px;
color: #FFFFFF;
line-height: 25px;
margin-bottom: 44px;
}
.head-wrap.head-wrap-pic {
height: 880px;
}
.head-wrap.head-wrap-pic .slideBox {
height: 880px;
}
.service { .service {
padding: 70px 0 80px 0; padding: 70px 0 80px 0;
} }
...@@ -757,4 +795,15 @@ body { ...@@ -757,4 +795,15 @@ body {
transform: translateZ(0); transform: translateZ(0);
} }
} }
@keyframes scaleAnimation {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
/*# sourceMappingURL=style.min.css.map */ /*# sourceMappingURL=style.min.css.map */
\ No newline at end of file
internationalShipping.html
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
</head> </head>
<body> <body>
<!--head--> <!--head-->
<div class="head-wrap"> <div class="head-wrap head-wrap-pic">
<div class="head"> <div class="head">
<div class="main row bothSide verCenter"> <div class="main row bothSide verCenter">
<a href="/" class="logo row verCenter"> <a href="/" class="logo row verCenter">
...@@ -51,15 +51,15 @@ ...@@ -51,15 +51,15 @@
<div class="bd"> <div class="bd">
<ul> <ul>
<li> <li>
<img src="./images/s1.png" alt=""> <img src="./images/s2.png" alt="" class="scaleClass">
</li> </li>
</ul> </ul>
</div> </div>
<div class="slide-text-other"> <div class="slide-text-other">
<ul> <ul>
<li class="wow" style="display: block"> <li class="wow" style="display: block">
<p class="t1">猎豹出海</p> <p class="t1">国际海运</p>
<p class="t2">一站式、全链路国际物流服务，高标准服务、高效率履约、超高性价比</p> <p class="t2">国际海运是国际贸易中最主要的运输方式，价格实惠、载运量大、安全可靠。我国大部分进出口货物，都是通过海洋运输的方式。我司与各大主流船司建立了稳定的合作关系，合作伙伴遍布全球，可以为客户提供安全、高效的清关、配送服务。</p>
</li> </li>
</ul> </ul>
</div> </div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment