如果要修改图片上下位置 可以直接修改 其中2n-1是奇数循环 2n是偶数循环就可以啦。
section.services-section4 .services-box4 .services-post4:nth-child(2n-1) {
flex-direction: column-reverse;
}
section.services-section4 .services-box4 .services-post4:nth-child(2n-1) {
flex-direction: column;
}
<section class="services-section4">
<div class="services-box4">
<div class="services-post4">
<img src="/static/upload/image/20240310/1710075246515151.png" alt="service1" />
<div class="serv-content">
<h4>門店三故事</h4>
<p>自定义文字内容自定义文字内容自定义文字内容自定义文字内容自定义文字内容</p>
</div>
</div>
<div class="services-post4">
<img src="/static/upload/image/20240310/1710075286499951.png" alt="service1" />
<div class="serv-content">
<h4>門店二故事</h4>
<p>自定义文字内容自定义文字内容自定义文字内容自定义文字内容自定义文字内容</p>
</div>
</div>
<div class="services-post4">
<img src="/static/upload/image/20240310/1710075306365993.png" alt="service1" />
<div class="serv-content">
<h4>門店一故事</h4>
<p>自定义文字内容自定义文字内容自定义文字内容自定义文字内容自定义文字内容</p>
</div>
</div>
<div class="services-post4">
<img src="/static/upload/image/20240310/1710075329378115.png" alt="service1" />
<div class="serv-content">
<h4>門店一故事</h4>
<p>自定义文字内容自定义文字内容自定义文字内容自定义文字内容自定义文字内容</p>
</div>
</div>
</div>
</section><style type="text/css">
/*-------------------------------------------------- */
/* Services style
/*------------------------------------------------- */
section.services-section {
padding: 130px 0;
}
section.services-section .services-box .services-post {
border: 1px solid #3d3d3d;
text-align: center;
padding: 0 30px;
}
@media (max-width: 1023px) {
section.services-section .services-box .services-post {
margin-bottom: 30px;
}
}
section.services-section .services-box .services-post i {
display: inline-block;
width: 95px;
height: 82px;
background-color: #3d3d3d;
line-height: 82px;
font-size: 39px;
margin-bottom: 25px;
color: #ffffff;
transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
}
section.services-section .services-box .services-post h4 {
font-weight: 600;
margin-bottom: 12px;
font-size: 18px;
text-transform: uppercase;
}
section.services-section .services-box .services-post p {
margin-bottom: 25px;
}
section.services-section .services-box .services-post:hover i {
background-color: #d92828;
font-size: 26px;
}
section.services-section2 {
padding: 90px 0;
background: #c5c4c4 url(../upload/about/service-bg.jpg) center bottom no-repeat;
background-size: cover;
background-image: url(/static/upload/image/20240304/1709505205540942.png);
background-size: cover;
background-position: center center;
}
section.services-section2 .services-box2 .services-post2 {
border: 1px solid #393939;
display: flex;
margin-bottom: 30px;
}
section.services-section2 .services-box2 .services-post2 .icon {
width: 47%;
background-color: #FFFFFF;
justify-content: center;
line-height: 100%;
display: flex;
align-items: center;
transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
}
section.services-section2 .services-box2 .services-post2 .serv-content {
width: 53%;
padding: 35px;
}
section.services-section2 .services-box2 .services-post2 span {
display: inline-block;
width: 124px;
height: 124px;
line-height: 124px;
font-size: 50px;
text-align: center;
color: #3b3b3b;
border: 1px solid #4c4c4c;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
border-radius: 50%;
transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
}
section.services-section2 .services-box2 .services-post2 h4 {
font-weight: 600;
margin-bottom: 12px;
font-size: 18px;
text-transform: uppercase;
}
section.services-section2 .services-box2 .services-post2 p {
margin-bottom: 0;
}
section.services-section2 .services-box2 .services-post2:hover span {
background-color: #d92828;
border-color: transparent;
font-size: 40px; color: #ffffff;
}
section.services-section3 {
padding: 130px 0;
background-color: #242424;
}
section.services-section3 .services-box3 .col-lg-4 {
margin-right: -1px;
}
section.services-section3 .services-box3 .services-post3 {
border: 1px solid #3d3d3d;
text-align: center;
padding: 60px;
}
@media (max-width: 1023px) {
section.services-section3 .services-box3 .services-post3 {
margin-bottom: 30px;
}
}
section.services-section3 .services-box3 .services-post3 i {
display: inline-block;
font-size: 50px;
margin-bottom: 25px;
color: #ffffff;
}
section.services-section3 .services-box3 .services-post3 h4 {
font-weight: 600;
margin-bottom: 12px;
font-size: 18px;
text-transform: uppercase;
}
section.services-section3 .services-box3 .services-post3 p {
margin-bottom: 0;
}
section.services-section4 .services-box4 {
display: flex;
}
@media (max-width: 1023px) {
section.services-section4 .services-box4 {
flex-wrap: wrap;
}
}
section.services-section4 .services-box4 .services-post4 {
width: 33.3333%;
text-align: center;
display: flex;
flex-direction: column;
}
section.services-section4 .services-box4 .services-post4:nth-child(2n) {
flex-direction: column-reverse;
}
@media (max-width: 1023px) {
section.services-section4 .services-box4 .services-post4 {
width: 100%;
}
section.services-section4 .services-box4 .services-post4:nth-child(2n) {
flex-direction: column;
}
}
section.services-section4 .services-box4 .services-post4 img {
width: 100%;
height: 400px;
object-fit: cover;
object-position: center;
}
section.services-section4 .services-box4 .services-post4 .serv-content {
height: 400px;
background-color: #ffffff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0 60px;
}
section.services-section4 .services-box4 .services-post4 span {
display: inline-block;
width: 98px;
height: 98px;
line-height: 98px;
font-size: 40px;
text-align: center;
color: #ffffff;
margin-bottom: 30px;
border: 2px solid #ffffff;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
border-radius: 50%;
transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
}
section.services-section4 .services-box4 .services-post4 h4 {
margin-bottom: 12px;
}
section.services-section4 .services-box4 .services-post4 p {
margin-bottom: 0;
}
section.services-section4 .services-box4 .services-post4:hover span {
background-color: #d92828;
border-color: transparent;
font-size: 30px;
}
section.services-section5 {
padding: 130px 0 100px;
}
section.services-section5 .services-box5 .services-post5 {
margin-bottom: 30px;
display: flex;
align-items: center;
}
section.services-section5 .services-box5 .services-post5 div.icon {
width: 120px;
height: 120px;
border: 1px solid #2e2e2e;
text-align: center;
margin-right: 30px;
position: relative;
}
section.services-section5 .services-box5 .services-post5 div.icon:before, section.services-section5 .services-box5 .services-post5 div.icon:after {
content: "";
position: absolute;
width: 10px;
height: 10px;
transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
}
section.services-section5 .services-box5 .services-post5 div.icon:before {
top: 0;
left: 0;
border-top: 2px solid #6c6c6c;
border-left: 2px solid #6c6c6c;
}
section.services-section5 .services-box5 .services-post5 div.icon:after {
bottom: 0;
right: 0;
border-bottom: 2px solid #6c6c6c;
border-right: 2px solid #6c6c6c;
}
section.services-section5 .services-box5 .services-post5 span {
display: inline-block;
font-size: 40px;
width: 118px;
height: 118px;
margin-bottom: 25px;
color: #ffffff;
line-height: 120px;
transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
}
section.services-section5 .services-box5 .services-post5 h4 {
font-weight: 400;
margin-bottom: 12px;
}
section.services-section5 .services-box5 .services-post5 p {
margin-bottom: 0;
padding-right: 20px;
}
section.services-section5 .services-box5 .services-post5:hover span {
background-color: #d92828;
font-size: 30px;
}
section.services-section5 .services-box5 .services-post5:hover div.icon:before,
section.services-section5 .services-box5 .services-post5:hover div.icon:after {
width: 100%;
height: 100%;
border-color: rgba(255, 255, 255, 0.3);
}
section.services-section6 {
padding-bottom: 130px;
}
section.services-section6 .services-box6 .services-post6 {
margin-bottom: 30px;
display: flex;
align-items: center;
}
section.services-section6 .services-box6 .services-post6 div.icon {
width: 116px;
height: 116px;
background: #3d3d3d;
text-align: center;
margin-right: 30px;
position: relative;
transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
}
section.services-section6 .services-box6 .services-post6 span {
display: inline-block;
font-size: 40px;
width: 116px;
height: 116px;
margin-bottom: 25px;
color: #ffffff;
line-height: 120px;
transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
}
section.services-section6 .services-box6 .services-post6 h4 {
font-weight: 400;
margin-bottom: 12px;
}
section.services-section6 .services-box6 .services-post6 p {
margin-bottom: 0;
padding-right: 20px;
}
section.services-section6 .services-box6 .services-post6:hover div.icon {
background-color: #d92828;
}
section.services-section6 .services-box6 .services-post6:hover span {
font-size: 30px;
}
section.services-section6 .image-holder {
padding-right: 40px;
position: relative;
}
section.services-section6 .image-holder img {
width: 100%;
height: auto;
}
section.services-section6 .image-holder a.serv-link {
display: inline-block;
padding: 7px 10px 5px;
color: #ffffff;
text-transform: uppercase;
font-weight: 700;
font-family: "NSimSun", sans-serif;
border: 1px solid #2e2e2e;
position: relative;
font-size: 19px;
position: absolute;
top: 55px;
right: -56px;
transform: rotate(-90deg);
}
section.services-section6 .image-holder a.serv-link i {
margin-left: 8px;
}
section.services-section6 .image-holder a.serv-link:hover {
background-color: #d92828;
border-color: transparent;
}
section.services-section7 {
padding-bottom: 130px;
}
section.services-section7.no-padd-bottom {
padding-bottom: 0;
}
section.services-section7 .services-box7 a.services-post7 {
display: flex;
padding: 36px;
border: 1px solid #3d3d3d;
margin-bottom: 30px;
align-items: center;
position: relative;
overflow: hidden;
}
section.services-section7 .services-box7 a.services-post7 i {
color: #ffffff;
font-size: 44px;
margin-right: 16px;
}
section.services-section7 .services-box7 a.services-post7 div.serv-cont h4 {
font-size: 17px;
text-transform: uppercase;
font-weight: 600;
}
section.services-section7 .services-box7 a.services-post7 div.serv-cont p {
margin-bottom: 0 !important;
}
section.services-section7 .services-box7 a.services-post7:before {
content: "";
position: absolute;
bottom: -30px;
right: -30px;
width: 60px;
height: 60px;
background: #3d3d3d;
transform: rotate(-45deg);
transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
}
section.services-section7 .services-box7 a.services-post7:after {
content: "";
font-family: "Font Awesome 5 Free";
font-weight: 900;
color: #ffffff;
font-size: 12px;
position: absolute;
bottom: 4px;
right: 7px;
}
section.services-section7 .services-box7 a.services-post7:hover:before {
background-color: #d92828;
}
section.services-section8 {
padding: 130px 0;
}
section.services-section8 .services-post8 img {
width: 100%;
height: auto;
}
section.services-section8 .services-post8 .serv-cont {
padding: 30px;
background-color: #3d3d3d;
position: relative;
}
section.services-section8 .services-post8 .serv-cont p {
font-size: 13px;
margin-bottom: 0;
}
section.services-section8 .services-post8 .serv-cont a {
color: #ffffff;
font-size: 26px;
text-align: center;
line-height: 75px;
width: 75px;
height: 75px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
border-radius: 50%;
border-top-right-radius: 0px;
background-color: #3d3d3d;
position: absolute;
top: -37px;
right: 0;
transition: all 0.36 ease-in-out;
-moz-transition: all 0.36 ease-in-out;
-webkit-transition: all 0.36 ease-in-out;
-o-transition: all 0.36 ease-in-out;
}
section.services-section8 .services-post8:hover .serv-cont a {
right: 40px;
transform: rotate(360deg);
background-color: #d92828;
border-top-right-radius: 50%;
}
section.services-section9 {
padding: 130px 0 80px;
background-color: #242424;
}
section.services-section9 .services-box9 .services-post9 {
margin-bottom: 50px;
display: flex;
align-items: center;
}
section.services-section9 .services-box9 .services-post9 div.icon {
width: 110px;
height: 110px;
border: 10px solid rgba(255, 255, 255, 0.1);
text-align: center;
margin-right: 30px;
position: relative;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
border-radius: 50%;
transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
}
section.services-section9 .services-box9 .services-post9 span {
display: inline-block;
font-size: 40px;
width: 90px;
height: 90px;
margin-bottom: 25px;
color: #ffffff;
line-height: 90px;
transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
}
section.services-section9 .services-box9 .services-post9 h4 {
margin-bottom: 12px;
}
section.services-section9 .services-box9 .services-post9 p {
margin-bottom: 0;
padding-right: 20px;
}
section.services-section9 .services-box9 .services-post9:hover div.icon {
background: #d92828;
border-color: transparent;
}
section.services-section9 .services-box9 .services-post9:hover div.icon span {
font-size: 30px;
}
</style>原文链接：https://www.um80.com/1636.htm，转载请注明出处。
评论0