悬停时左侧边距在轮播上不起作用

【问题标题】：Left side margin not working on Carousel while hovering悬停时左侧边距在轮播上不起作用
【发布时间】：2020-01-05 17:03:19
【问题描述】：

悬停时，我希望我的图像左右移动其他图像。目前，在悬停时，它只会将所有图像向右移动。

使用此代码：

.item-img:hover {
  transform: scale(1.3);
  margin: 0 70px 0 70px;
  opacity: 1;
  z-index: 950;  
}

我原以为我会让两边的图像发生变化。但不——仍然是正确的！

所以而不是当前效果（仅向右移动）

我正试图让它双向转换，就像这样 

html {
  scroll-behavior: smooth;
}

body {
  background-color: #696969;
}

a.controls {
  position: absolute;
  color: #fff;
  text-decoration: none;
  font-size: 6em;
  background: #000;
  width: 80px;
  padding: 20px;
  text-align: center;
  z-index: 1;
}

a.controls:nth-of-type(1) {
  height: 240.625px;
  top: 120px;
  bottom: 0;
  left: 0;
  background: linear-gradient(-90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  scroll-behavior: smooth;
}

a.controls:nth-of-type(2) {
  height: 240.625px;
  top: 120px;
  bottom: 0;
  right: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  scroll-behavior: smooth;
}

.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
  display: flex;
}

.carousel-inner .carousel-item-right.active,
.carousel-inner .carousel-item-next {
  transform: translateX(25%);
}

.carousel-inner .carousel-item-left.active,
.carousel-inner .carousel-item-prev {
  transform: translateX(-25%);
}

.carousel-inner .carousel-item-right,
.carousel-inner .carousel-item-left {
  transform: translateX(0);
}

.carousel-item:not(.active) {
  display: none !important;
}

.carousel-item .active {
  display: block !important;
}

.carousel-inner {
  height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  scroll-behavior: smooth;
}

.item-img {
  object-fit: cover;
  position: relative;
  align-self: center;
  width: 200px;
  height: 200px;
  margin: 0 3px;
  transition: all 0.5s ease-in-out;
  cursor: pointer;
  z-index: 899;
}

.item-img:hover {
  transform: scale(1.3);
  margin: 0 70px 0 70px;
  opacity: 1;
  z-index: 950;
}

.item {
  height: 240.625px !important;
}

.item__details {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  font-size: 10px;
  opacity: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);
  transition: 450ms opacity;
}

.item__details:before {
  content: '▶';
  left: 0;
  width: 100%;
  font-size: 30px;
  margin-left: 7px;
  margin-top: -18px;
  text-align: center;
  z-index: 2;
}

.item__details:after {
  margin-top: -25px;
  margin-left: -25px;
  width: 50px;
  height: 50px;
  border: 3px solid #ecf0f1;
  line-height: 50px;
  text-align: center;
  border-radius: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.item_title {
  position: absolute;
  bottom: 0;
  padding: 10px;
}

.item:hover.item__details {
  opacity: 1;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">


<div class="container-fluid text-center my-3 p-0">
  <div class="row mx-auto my-auto">
    <div id="ld_Carousel" class="carousel slide w-100" data-ride="carousel">
      <div class="carousel-inner w-100" role="listbox">
        <div class="carousel-item item active">
          <img class="d-block col-2 img-fluid item-img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-1.jpg">
          <img class="d-block col-2 img-fluid item-img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-1.jpg">
          <img class="d-block col-2 img-fluid item-img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-1.jpg">
          <img class="d-block col-2 img-fluid item-img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-1.jpg">
          <img class="d-block col-2 img-fluid item-img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-1.jpg">
          <img class="d-block col-2 img-fluid item-img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-1.jpg">
        </div>
      </div>
      <a class="carousel-control-prev controls" href="#ld_Carousel" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="carousel-control-next controls" href="#ld_Carousel" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
  </div>
</div>

【问题讨论】：

  • 也许你需要看看transform-origin
  • 拜托，你能举个例子吗，因为查看文档我看不出这在这种情况下会有什么帮助？
  • 这就是当 div 展开（悬停时）时 CSS 和 div 的行为方式，它之后的 div（向右）会调整 - 而不是在它之前渲染的 div...跨度>
  • @AkberIqbal，有没有办法解决这个问题？
  • @GerryHodson，检查使用 jquery 完成此操作的答案

标签： javascript html css bootstrap-4 carousel


【解决方案1】：

您必须使用 JQuery 来获得您正在寻找的效果，因为当前行为符合 CSS 规则...我所做的是将前一个元素向左推一点，以便让位让我们的图像缩小...

工作 sn-p 如下：

$(document).ready(function() {
  $("img").mouseenter(function() {
    $(this).prev().css('margin-left', '-10px')
  });
  $("img").mouseleave(function() {
    $(this).prev().css('margin-left', '0px')
  });
});
html {
  scroll-behavior: smooth;
}

body {
  background-color: #696969;
}

a.controls {
  position: absolute;
  color: #fff;
  text-decoration: none;
  font-size: 6em;
  background: #000;
  width: 80px;
  padding: 20px;
  text-align: center;
  z-index: 1;
}

a.controls:nth-of-type(1) {
  height: 240.625px;
  top: 120px;
  bottom: 0;
  left: 0;
  background: linear-gradient(-90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  scroll-behavior: smooth;
}

a.controls:nth-of-type(2) {
  height: 240.625px;
  top: 120px;
  bottom: 0;
  right: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  scroll-behavior: smooth;
}

.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
  display: flex;
}

.carousel-inner .carousel-item-right.active,
.carousel-inner .carousel-item-next {
  transform: translateX(25%);
}

.carousel-inner .carousel-item-left.active,
.carousel-inner .carousel-item-prev {
  transform: translateX(-25%);
}

.carousel-inner .carousel-item-right,
.carousel-inner .carousel-item-left {
  transform: translateX(0);
}

.carousel-item:not(.active) {
  display: none !important;
}

.carousel-item .active {
  display: block !important;
}

.carousel-inner {
  height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  scroll-behavior: smooth;
}

.item-img {
  object-fit: cover;
  position: relative;
  align-self: center;
  width: 200px;
  height: 200px;
  margin: px;
  transition: all 0.5s ease-in-out;
  cursor: pointer;
  z-index: 899;
}

.item-img:hover {
  transform: scale(1.3);
  margin: 0;
  opacity: 1;
  z-index: 950;
}

.item {
  height: 240.625px !important;
}

.item__details {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  font-size: 10px;
  opacity: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);
  transition: 450ms opacity;
}

.item__details:before {
  content: '▶';
  left: 0;
  width: 100%;
  font-size: 30px;
  margin-left: 7px;
  margin-top: -18px;
  text-align: center;
  z-index: 2;
}

.item__details:after {
  margin-top: -25px;
  margin-left: -25px;
  width: 50px;
  height: 50px;
  border: 3px solid #ecf0f1;
  line-height: 50px;
  text-align: center;
  border-radius: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.item_title {
  position: absolute;
  bottom: 0;
  padding: 10px;
}

.item:hover.item__details {
  opacity: 1;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>


<div class="container-fluid text-center my-3 p-0">
  <div class="row mx-auto my-auto">
    <div id="ld_Carousel" class="carousel slide w-100" data-ride="carousel">
      <div class="carousel-inner w-100" role="listbox">
        <div class="carousel-item item active">
          <img class="d-block col-2 img-fluid item-img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-1.jpg">
          <img class="d-block col-2 img-fluid item-img" src="https://www.akberiqbal.com/JumboMob.jpg">
          <img class="d-block col-2 img-fluid item-img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-1.jpg">
          <img class="d-block col-2 img-fluid item-img" src="https://www.akberiqbal.com/JumboMob.jpg">
          <img class="d-block col-2 img-fluid item-img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-1.jpg">
          <img class="d-block col-2 img-fluid item-img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-1.jpg">
        </div>
      </div>
      <a class="carousel-control-prev controls" href="#ld_Carousel" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="carousel-control-next controls" href="#ld_Carousel" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
  </div>
</div>

【讨论】：

    【解决方案2】：

    只需在 CSS 下方更改/添加，它就会按预期工作-

    .item-img:hover {
  transform: scale(1.3);
  margin: 0;
  opacity: 1;
  z-index: 950;
  margin-left: -10px;
}

.item-img:hover,
.item-img:hover ~ .item-img{
  margin-left: 0px;
}


    html {
  scroll-behavior: smooth;
}

body {
  background-color: #696969;
}

a.controls {
  position: absolute;
  color: #fff;
  text-decoration: none;
  font-size: 6em;
  background: #000;
  width: 40px;
  padding: 20px;
  text-align: center;
  z-index: 1;
}

a.controls:nth-of-type(1) {
  height: 240.625px;
  top: 120px;
  bottom: 0;
  left: 0;
  background: linear-gradient(-90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  scroll-behavior: smooth;
}

a.controls:nth-of-type(2) {
  height: 240.625px;
  top: 120px;
  bottom: 0;
  right: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  scroll-behavior: smooth;
}

.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
  display: flex;
}

.carousel-inner .carousel-item-right.active,
.carousel-inner .carousel-item-next {
  transform: translateX(25%);
}

.carousel-inner .carousel-item-left.active,
.carousel-inner .carousel-item-prev {
  transform: translateX(-25%);
}

.carousel-inner .carousel-item-right,
.carousel-inner .carousel-item-left {
  transform: translateX(0);
}

.carousel-item:not(.active) {
  display: none !important;
}

.carousel-item .active {
  display: block !important;
}

.carousel-inner {
  height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  scroll-behavior: smooth;
}

.item-img {
  object-fit: cover;
  position: relative;
  align-self: center;
  width: 200px;
  height: 200px;
  margin: px;
  transition: all 0.5s ease-in-out;
  cursor: pointer;
  z-index: 899;
}

.item-img:hover {
  transform: scale(1.3);
  margin: 0;
  opacity: 1;
  z-index: 950;
  margin-left: -10px;
}

.item-img:hover,
.item-img:hover ~ .item-img{
  margin-left: 0px;
}

.item {
  height: 240.625px !important;
}

.item__details {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  font-size: 10px;
  opacity: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);
  transition: 450ms opacity;
}

.item__details:before {
  content: '▶';
  left: 0;
  width: 100%;
  font-size: 30px;
  margin-left: 7px;
  margin-top: -18px;
  text-align: center;
  z-index: 2;
}

.item__details:after {
  margin-top: -25px;
  margin-left: -25px;
  width: 50px;
  height: 50px;
  border: 3px solid #ecf0f1;
  line-height: 50px;
  text-align: center;
  border-radius: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.item_title {
  position: absolute;
  bottom: 0;
  padding: 10px;
}

.item:hover.item__details {
  opacity: 1;
}
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>


<div class="container-fluid text-center my-3 p-0">
  <div class="row mx-auto my-auto">
    <div id="ld_Carousel" class="carousel slide w-100" data-ride="carousel">
      <div class="carousel-inner w-100" role="listbox">
        <div class="carousel-item item active">
          <img class="d-block col-2 img-fluid item-img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-1.jpg">
          <img class="d-block col-2 img-fluid item-img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-1.jpg">
          <img class="d-block col-2 img-fluid item-img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-1.jpg">
          <img class="d-block col-2 img-fluid item-img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-1.jpg">
          <img class="d-block col-2 img-fluid item-img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-1.jpg">
          <img class="d-block col-2 img-fluid item-img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-1.jpg">
        </div>
      </div>
      <a class="carousel-control-prev controls" href="#ld_Carousel" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="carousel-control-next controls" href="#ld_Carousel" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
  </div>
</div>

    【讨论】：

      【解决方案3】：

      你可以喜欢这个例子。它正在下面的 sn-p 上工作：

      html {
  scroll-behavior: smooth;
}

body {
  background-color: #696969;
}

a.controls {
  position: absolute;
  color: #fff;
  text-decoration: none;
  font-size: 6em;
  background: #000;
  width: 80px;
  padding: 20px;
  text-align: center;
  z-index: 1;
}

a.controls:nth-of-type(1) {
  height: 240.625px;
  top: 120px;
  bottom: 0;
  left: 0;
  background: linear-gradient(-90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  scroll-behavior: smooth;
}

a.controls:nth-of-type(2) {
  height: 240.625px;
  top: 120px;
  bottom: 0;
  right: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  scroll-behavior: smooth;
}

.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
  display: flex;
}

.carousel-inner .carousel-item-right.active,
.carousel-inner .carousel-item-next {
  transform: translateX(25%);
}

.carousel-inner .carousel-item-left.active,
.carousel-inner .carousel-item-prev {
  transform: translateX(-25%);
}

.carousel-inner .carousel-item-right,
.carousel-inner .carousel-item-left {
  transform: translateX(0);
}

.carousel-item:not(.active) {
  display: none !important;
}

.carousel-item .active {
  display: block !important;
}

.carousel-inner {
  height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  scroll-behavior: smooth;
}

.item-img {
  object-fit: cover;
  position: relative;
  align-self: center;
  width: 200px;
  height: 200px;
  margin: 0 3px;
  transition: all 0.5s ease-in-out;
  cursor: pointer;
  z-index: 899;
}

.item-img:hover {
  transform: scale(1.3);
  opacity: 1;
  z-index: 950;
}

.item {
  height: 240.625px !important;
}

.item__details {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  font-size: 10px;
  opacity: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);
  transition: 450ms opacity;
}

.item__details:before {
  content: '▶';
  left: 0;
  width: 100%;
  font-size: 30px;
  margin-left: 7px;
  margin-top: -18px;
  text-align: center;
  z-index: 2;
}

.item__details:after {
  margin-top: -25px;
  margin-left: -25px;
  width: 50px;
  height: 50px;
  border: 3px solid #ecf0f1;
  line-height: 50px;
  text-align: center;
  border-radius: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.item_title {
  position: absolute;
  bottom: 0;
  padding: 10px;
}

.item:hover.item__details {
  opacity: 1;
}
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">


<div class="container-fluid text-center my-3 p-0">
  <div class="row mx-auto my-auto">
    <div id="ld_Carousel" class="carousel slide w-100" data-ride="carousel">
      <div class="carousel-inner w-100" role="listbox">
        <div class="carousel-item item active">
          <img class="d-block col-2 img-fluid item-img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-1.jpg">
          <img class="d-block col-2 img-fluid item-img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-1.jpg">
          <img class="d-block col-2 img-fluid item-img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-1.jpg">
          <img class="d-block col-2 img-fluid item-img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-1.jpg">
          <img class="d-block col-2 img-fluid item-img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-1.jpg">
          <img class="d-block col-2 img-fluid item-img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-1.jpg">
        </div>
      </div>
      <a class="carousel-control-prev controls" href="#ld_Carousel" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="carousel-control-next controls" href="#ld_Carousel" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
  </div>
</div>

      【讨论】：

        猜你喜欢
        • 1970-01-01
        • 2023-03-27
        • 1970-01-01
        • 2017-07-02
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2021-11-03
        相关资源
        最近更新 更多
        热门标签
        Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode