当前位置： 正文

图片上下左右文字排列样式

admin 03-10 其他代码 58 推广 

如果要修改图片上下位置 可以直接修改 其中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
金秋上云特惠新人专享

猜你喜欢

h5网页在苹果系统里边无法播放mp4视频
其他代码

3周前 24 0
admin 3周前
background-image图片加滤镜
其他代码

03-04 72 0
admin 03-04
网页中文繁体切换js代码
其他代码

01-16 118 0
admin 01-16
新版bootstrap弹性盒栅格布局代码
其他代码

11-30 187 0
admin 11-30
狮子鱼小程序修改数据库用户名密码
其他代码

11-19 158 0
admin 11-19
float:left使用之后 无法水平居中
其他代码

03-26 253 0
admin 03-26

评论0

取消

本站所有素材，站长均亲自测试过，可放心使用，有什么问题联系我们！18091738064（微信）
没有账号？ 注册  忘记密码？手机号登录

社交账号快速登录

Copyright   ©2017-2021  U码80  陕ICP备17013443号-1  

陕公网安备 61032402000158号