Question

我正在建立一个响应式网站，但是我正为幻灯片的各个点而苦苦挣扎，如下图所示：当我切换到设备工具栏时，他们更改了位置，我已经尝试了所有想到的方法从相对单位到绝对单位，但无济于事，我需要帮助，我在Google中进行了搜索，依此类推，但没有发现任何帮助。

当我切换到设备工具栏时：

当您注意到点的位置发生变化时，我不希望这种行为。

这是我的代码：

HTML ：

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>EatManger</title>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
  <link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="query.css">

</head>

<body style="background-color:purple">


  <div class="container">

    <div class="logo-box">
      <img src="images/logo.png" class="logo" alt="logo">
    </div>
    <i class="fas fa-bars hamburger-btn"></i>
    <ul class="main-nav">
      <li class="main-nav-item"><a class="main-nav-link" href="#">services</a></li>
      <li class="main-nav-item"><a class="main-nav-link" href="#">reservation</a></li>
      <li class="main-nav-item"><a class="main-nav-link" href="#">menu</a></li>
      <li class="main-nav-item"><a class="main-nav-link" href="#">our chefs</a></li>
      <li class="main-nav-item"><a class="main-nav-link" href="#">events</a></li>
    </ul>

  </div>

  <div class="slideshow-container">
    <div class="mySlides fade-zz">
      <img src="images/food3.png" class="imgSlide">
    </div>
    <div class="mySlides fade-zz">
      <img src="images/pizza.png" class="imgSlide" >
    </div>

    <div class="mySlides fade-zz">
      <img src="images/hamburger2.png" class="imgSlide">
    </div>

    <div class="dotz">
      <span class="dot" onclick="currentSlide(1-1)"></span>
      <span class="dot" onclick="currentSlide(2-1)"></span>
      <span class="dot" onclick="currentSlide(3-1)"></span>
    </div>


  </div>





  <div class="contact-box">
    <div class="adress">
      <i class="fas fa-map-marker-alt conbox"></i>
      <h3 class="contact-title">Address</h3>
      <p class="contact-description">4579 Penn Street,Manchester<br>united kingdom</p>
    </div>
    <div class="phone">
      <i class="fas fa-phone-volume conbox"></i>
      <h3 class="contact-title">Phone</h3>
      <p class="contact-description">636-399-9776 <br> 573-225-7350</p>
    </div>
    <div class="opening-time">
      <i class="far fa-clock conbox"></i>
      <h3 class="contact-title">Opening time</h3>
      <p class="contact-description">all the days of the week <br>from 6 am to midnight</p>
    </div>
</div>

<section class="about-us">
<i class="fas fa-utensils abicon"></i>
<h1 class="title">About us</h1>
  <p class="title-description">Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un
    imprimeur
    anonyme assembla </p>
</section>

















  <script src="script.js" charset="utf-8"></script>
</body>

</html>

CSS

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.container {
  position: relative;
  height: 4rem;
  background-color: red;
  transition: height .1s;
}

.container-add{
  height: 20rem;
}

.hamburger-btn {
  position: absolute;
  margin-top: 5px;
  right: 4px;
  font-size: 40px;
  color: white;
}

.logo-box {
  display: inline-block;
}

.logo {
  width: 100px;
}

.main-nav {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 15.62rem;
  align-items: center;
visibility: hidden;
}

.main-nav-hide{
  visibility:visible;
}

.main-nav-item {
  list-style: none;
  color: white;
  font-family: Roboto;
  text-transform: uppercase;
  font-weight: 700;
  /* display: none; */
}



.main-nav-link {
  text-decoration: none;
  color: inherit;
  padding-left: 20px;
}


.slideshow-container{
  margin: auto;
  max-width: 980px;
  width: 100vw;
}

.imgSlide{
  width: 100%;
}

.imgSlide-show{
  display: block;
}

.dotz{
  text-align: center;
  position: absolute;
  top: 35%;
  left: 50vw
}

.dot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  background-color: #ddd
}

.active{
background-color: #ff9900;

}

.active:hover,.dot:hover{
  cursor: pointer;
}

.fade-zz{
  animation-name: fade;
  animation-duration: 1.4s;
  transition:.4s
}

@keyframes fade {
  from{
    opacity: .4;
  }
  to{
    opacity: 1
  }
}

.contact-box{
  background-color: red;
  position: relative;
  top: -1.39rem;
  height: 380px;
}

.conbox{
  color: white;
  display: block;
  text-align: center;
  font-size: 2rem;
  /* margin-top: .8rem; */
}


.adress{
color: white;
text-align: center;
font-family: roboto;
margin-bottom: 3rem;
position: relative;
top: .5rem;
}


.phone{
color: white;
text-align: center;
font-family: roboto;
margin-bottom: .8rem;
}


.opening-time{
  color: white;
  text-align: center;
  font-family: roboto;
  margin-top: 2rem;
}


.about-us{
  color: white;
}

.title{
  text-align: center;
  font-family: roboto;
}

.abicon{
  text-align: center;
  display: block;
padding-right: 7rem;
margin-top: 1rem;
font-size: 2rem;
position: relative;
top: 2%;
}

.title-description{
  display: block;
  margin: auto;
}

JavaScript

//HAMBURGER BUTTON

var hamBtn=document.querySelector(".hamburger-btn");

hamBtn.addEventListener("click",function(){
  document.querySelector(".main-nav").classList.toggle("main-nav-hide");
document.querySelector(".container").classList.toggle("container-add");



});


//SLIDESHOW

slideIndex=0;

function currentSlide(n){
  slideIndex=n;
  showSlide(slideIndex);
}

function showSlide(n){
  var i;
  var slides=document.getElementsByClassName("mySlides");
console.log(slides);
  var dots=document.getElementsByClassName("dot");

  for (i = 0; i < slides.length; i++) {
      slides[i].style.display="none";
  }
  slideIndex++;
if (slideIndex>slides.length) {
  slideIndex=1;
}
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }

  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
}
setTimeout(showSlide,50)

setInterval(showSlide,6000)

很抱歉，我无法提出一个更好的标题来描述我的情况，任何接受更好标题的建议都会被接受，以帮助其他在同一问题上苦苦挣扎的人们找到解决方案，并在此先感谢您。

Answer 1

只需将以下内容添加到“ .dotz”中

.dotz{
    position: absolute;
    bottom: 1rem;
    left: 0;
    right: 0;
}

要使任何块具有position:absolute居中，您只需将left, right设为0，将margin设为自动，并确保父div必须具有position:relative

响应滑块定位

1 个答案: