html - 轮播上的响应式卡片覆盖

Question

我在轮播顶部制作了一张登录/注册卡。但我的利润是硬编码的，一切看起来都很复杂。它在台式机上看起来不错，但在手机/平板电脑上，它没有响应。我是 webdev 的新手，刚学了两周，所以请原谅我缺乏知识。

这是我的html代码：

<div id="carouselFinal" class="carousel slide" data-ride="carousel" data-interval="3000" data-pause="false">

  <div class="carousel-inner">
    <div class=" carousel-item active">
      <img class="d-block w-100" src="./../assets/images1.jpg" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="./../assets/images2.jpg" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="./../assets/images3.jpg" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="./../assets/images4.jpg" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="./../assets/images5.jpg" alt="Third slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="./../assets/images6.jpg" alt="Third slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="./../assets/images7.jpg" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="./../assets/images8.jpg" alt="Second slide">
    </div>
  </div>

  <div class="container">
    <div class="row">
      <div class="col-6">
        <div class="card mt-3 tab-card">
          <div class="card-header tab-card-header">
            <label style="font-size:x-large; margin-top: 10px;">Signup</label>
            <ul class="nav nav-tabs card-header-tabs" id="myTab" role="tablist" style="float: right;">
              <li>
                <a data-toggle="tab" href="#one" role="tab" aria-controls="One" aria-selected="true"
                  class="btn btn-dark" style="color:white">
                  <</a> </li> <li>
                    <a data-toggle="tab" href="#two" role="tab" aria-controls="One" aria-selected="true"
                      class="btn btn-dark" style="color:white">></a>
              </li>
            </ul>
          </div>

          <!-- Stepper without Material :p -->
          <form [formGroup]="userprofileForm" (ngSubmit)="onSubmit()" class="tab-content" id="myTabContent">
            <div class="tab-pane fade show active p-3" id="one" role="tabpanel" aria-labelledby="one-tab">
              <div class="form-group">
                <div id="imagerpager" style="float: right; margin-right: 40px;">
                  <label style="margin-left: 20px;">Choose a profile picture.</label>
                  <br><br>
                  <input style="display:none" type="file" (change)="onFileSelected($event)" #fileInput />
                  <img [src]="imgSrc" (click)="fileInput.click()" style="border-radius: 5px;" alt="your image"
                    width="200" height="200" />
                </div>
                <!-- Name -->
                <mat-form-field>
                  <mat-label>Name <span style="color: red;">*</span></mat-label>
                  <input matInput type="text" formControlName="name" id="exampleName" aria-describedby="emailHelp"
                    style="width:200px;" autocomplete="off">
                  <mat-error *ngIf="hasError('name', 'required')">Name is mandatory.</mat-error>
                </mat-form-field>
                <br><br>
                <label style="margin-right: 10px;">Gender:</label>
                <br>
                <mat-radio-group aria-label="Select an option" formControlName="gender" (change)="changeImage()">
                  <mat-radio-button [checked]='true' name="gender" style="margin-right: 10px;" value="Male">Male
                  </mat-radio-button>
                  <mat-radio-button name="gender" style="margin-right: 10px;" value="Female">Female</mat-radio-button>
                  <mat-radio-button name="gender" style="margin-right: 10px;" value="Other">Other</mat-radio-button>
                </mat-radio-group>
                <br><br>
                <mat-form-field>
                  <input matInput [max]="maxDate" [matDatepicker]="picker" placeholder="Date of Birth"
                    formControlName="dob">
                  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
                  <mat-datepicker #picker formControlName="dob" ngDefaultControl (selectedChanged)="onDate($event)">
                  </mat-datepicker>
                </mat-form-field>
              </div>
              <label>Already a member? Click </label>
              <label id="memberalready"> <a routerLink="/core/login"> here </a><label>
                  to login.</label></label>
            </div>
            <br>
            <div *ngIf="this.success">
              <div class="alert"
                style="padding-bottom:30px;width: 300px; height:20px; float: right; background-color: rgba(0, 255, 85, 0.4);"
                role="alert" id="passwordsNoMatchRegister">
                <span>
                  <p>Signup Succesful! Redirecting to login!</p>
                </span>
              </div>
              <mat-spinner style="zoom:0.2; position: absolute;top:700px; right:80px;"></mat-spinner>
            </div>
            <div *ngIf="this.failure">
              <div class="alert"
                style="padding-bottom:30px;width: 300px; height:20px; float: right; background-color: rgba(255, 0, 0, 0.4);"
                role="alert" id="passwordsNoMatchRegister">
                <span>
                  <p>Signup failed! Can't connect to server!</p>
                </span>
              </div>
            </div>

            <div class="tab-pane fade p-3" style="text-align: left;margin-top: -10px; margin-left: 30px;" id="two"
              role="tabpanel" aria-labelledby="two-tab">
              <div class="form-group">
                <mat-form-field>
                  <mat-label>Email <span style="color: red;">*</span></mat-label>
                  <input matInput type="email" formControlName="email" id="exampleInputEmail1"
                    aria-describedby="emailHelp" autocomplete="off">
                  <mat-error *ngIf="hasError('email', 'required')">Email is mandatory.</mat-error>
                  <mat-error *ngIf="hasError('email', 'email')">Enter a valid email.</mat-error>
                </mat-form-field>
                <small id="emailHelp" class="form-text text-muted">We'll never share your email
                  with
                  anyone else.</small>
              </div>
              <mat-form-field id="skeeverweever" style="margin-top:-50px;">
                <mat-label>Languages</mat-label>
                <mat-select formControlName="skills" multiple>
                  <mat-option *ngFor="let skill of skillList" [value]="skill">{{skill}}</mat-option>
                </mat-select>
              </mat-form-field>

              <div class="form-group">
                <mat-form-field>
                  <mat-label>Password <span style="color: red;">*</span></mat-label>
                  <input matInput type="password" formControlName="password" id="exampleInputPassword1">
                  <mat-error *ngIf="hasError('password', 'required')">Password is mandatory.</mat-error>
                </mat-form-field>
              </div>
              <div id="reenter" class="form-group" style="margin-top: -73px; margin-left: 220px">
                <mat-form-field>
                  <mat-label>Re-enter password <span style="color: red;">*</span></mat-label>
                  <input matInput type="password" formControlName="cnfpass" id="exampleConfirmPassword1">
                  <mat-error *ngIf="userprofileForm.get('cnfpass').invalid">Passwords don't match.
                  </mat-error>
                </mat-form-field>
              </div>
              <div class="form-group">
                <mat-form-field style="margin-top: -10px;">
                  <mat-label>Phone</mat-label>
                  <input matInput type="text" formControlName="phone" id="phone" aria-describedby="phoneHelp"
                    autocomplete="off">
                  <!-- <mat-error *ngIf="hasError('phone', 'minlength')">Phone number should be 10 digits long.</mat-error>
                  <mat-error *ngIf="hasError('phone', 'maxlength')">Phone number should be 10 digits long.</mat-error> -->
                  <mat-error *ngIf="userprofileForm.get('phone').invalid">Phone number can only contain 10 digits.
                  </mat-error>
                </mat-form-field>
              </div>
              <button type="submit"
                style="float:right; margin-top: -30px; margin-right:30px;background-color: rgb(255, 136, 0); color: whitesmoke;"
                class="btn" id="submitbtn">Submit</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>


<div class="content-main"></div>

<footer id="fh5co-footer" class="fh5co-bg" role="contentinfo">
  <div class="overlay"></div>
  <div class="container">
    <div class="row row-pb-md">
      <div class="col-md-4 fh5co-widget">
        <h3>A note with love.</h3>
        <br>
        <p style="color: rgb(172, 172, 172);">Random text.</p>
        <br>
      </div>
      <div class="col-md-8">
        <h3 style="float: right;">Reach out to us!</h3>
        <br><br><br>
        <div class="col-md-12 col-sm-12 col-xs-6 col-lg-12 text-right">
          <ul class="fh5co-footer-links" style="color: rgb(172,172,172);">
            <p>
              <span class="material-icons" style="margin-right: 10px;">
                location_on
              </span> New York, NY 10012, US</p>
            <p>
              <span class="material-icons" style="margin-right: 10px;">
                alternate_email
              </span> [e-mail]</p>
            <p>
              <span class="material-icons" style="margin-right: 10px;">
                phone_iphone
              </span> 1111111</p>
          </ul>
        </div>
      </div>
    </div>

    <br><br>
    <div class="row copyright">
      <div class="col-md-12 text-center">
        <p>
          <small class="block">&copy; 2020 | All Rights Reserved.</small>
          <small class="block">Powered by shoppingkart.com</small>
        </p>
      </div>
    </div>

  </div>
</footer>

这是我的 CSS 代码：

#logo:hover {
  cursor: pointer;
  animation: updown 1.5s ease infinite;

  @keyframes updown {
    0% {
      transform: translateY(-10%);
    }

    50% {
      transform: translateY(10%);
    }

    100% {
      transform: translateY(-10%);
    }
  }

}

#carouselFinal {
  position: relative;
  height: auto;
}

.carousel-inner {
  z-index: 0;
  height: 577px;
}

// .card {
//   width: 1000px;
//   height: 1000px;
//   z-index: 1;
//   margin-top: 130px;
//   margin-left: 150px;
//   color: black;
//   background: linear-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 1));
//   border-color: transparent;
// }

.tab-card,
.carousel-inner {
  position: absolute;
}



.tab-card {
  z-index: 1;
  height: 400px;
  width: 600px;
  top: 100px;
  left: 250px;
  color: white;
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
  border-color: transparent;
}

.tab-card-header {
  background: none;
}

/* Default mode */
.tab-card-header>.nav-tabs {
  border: none;
  margin: 0px;
}

.tab-card-header>.nav-tabs>li {
  margin-right: 2px;
}

.tab-card-header>.nav-tabs>li>a {
  border: 0;
  border-bottom: 2px solid transparent;
  margin-right: 0;
  color: #737373;
  padding: 2px 15px;
}

.tab-card-header>.nav-tabs>li>a.show {
  border-bottom: 2px solid #007bff;
  color: #007bff;
}

.tab-card-header>.nav-tabs>li>a:hover {
  color: #007bff;
}

.tab-card-header>.tab-content {
  padding-bottom: 0;
}


::ng-deep.mat-form-field-label {
  /*change color of label*/
  color: white !important;
}

::ng-deep.mat-form-field-underline {
  /*change color of underline*/
  background-color: white !important;
}

::ng-deep.mat-form-field-ripple {
  /*change color of underline when focused*/
  background-color: white !important;
}

::ng-deep.mat-select-value {
  /*change color of underline*/
  color: white !important;
}

::ng-deep.mat-select-arrow {
  color: white !important;
}

::ng-deep.mat-radio-outer-circle {
  border-color: white !important;
}


::ng-deep.mat-datepicker-toggle-default-icon {
  color: white !important;
}



.content-main {
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: -1;
}

.fh5co-bg {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
}

.fh5co-bg {
  background-size: cover;
  background-position: center center;
  position: relative;
  width: 100%;
  float: left;
}

.fh5co-bg .overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}

.fh5co-bg-section {
  background: rgba(0, 0, 0, 0.05);
}

#fh5co-footer {
  padding: 7em 0;
  clear: both;
}

@media screen and (max-width: 768px) {
  #fh5co-footer {
    padding: 3em 0;
  }
}

#fh5co-footer {
  position: relative;
}

#fh5co-footer .overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.9);
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}

#fh5co-footer h3 {
  margin-bottom: 15px;
  font-weight: bold;
  font-size: 15px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
}

#fh5co-footer .fh5co-footer-links {
  padding: 0;
  margin: 0;
}

#fh5co-footer .fh5co-footer-links li {
  padding: 0;
  margin: 0;
  list-style: none;
}

#fh5co-footer .fh5co-footer-links li a {
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
}

#fh5co-footer .fh5co-footer-links li a:hover {
  text-decoration: underline;
}

#fh5co-footer .fh5co-widget {
  margin-bottom: 30px;
}

@media screen and (max-width: 768px) {
  #fh5co-footer .fh5co-widget {
    text-align: left;
  }
}

#fh5co-footer .fh5co-widget h3 {
  margin-bottom: 15px;
  font-weight: bold;
  font-size: 15px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

#fh5co-footer .copyright .block {
  display: block;
  color: cornsilk;
}


.btn-primary {
  background: #F85A16;
  color: #fff;
  border: 2px solid #F85A16;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background: #f96c2f !important;
  border-color: #f96c2f !important;
}

.btn-primary.btn-outline {
  background: transparent;
  color: #F85A16;
  border: 1px solid #F85A16;
}

.btn-primary.btn-outline:hover,
.btn-primary.btn-outline:focus,
.btn-primary.btn-outline:active {
  background: #F85A16;
  color: #fff;
}

#memberalready {
  margin-left: 5px;
}

@media screen and (max-width: 768px) {
  .card {
    width: 100%;
    background: transparent;
    margin-left: -250px;
    // margin-top: -100px;
    // margin-top: 100px;
    // display: flex;
  }

  .tab-card-header {
    margin-top: 300px;
    margin-right: 120px;
  }

  #imagerpager {
    margin-left: 80px;
    margin-top: -320px;
    color: transparent;
    position: absolute;
    flex-wrap: wrap;
  }

  #myTab {
    position: absolute;
    top: 320px;
    right: -160px;
  }

  #memberalready {
    position: absolute;
    right: -68px;
    top: 633px;
  }

  #skeeverweever {
    margin-left: 0px;
  }

  .p-3 {
    float: left;
  }
}

我该如何做响应部分？这段代码的行为非常奇怪。

我已经在 Firebase 上部署了它：https ://shopping-cart-client-23081997.web.app/如果你想看看的话。

谢谢！

标签： htmlcsstwitter-bootstrap

Answer 1

它在台式机上看起来不错，但在移动设备或平板电脑上却不行，因为它没有响应。使您的网站响应式应该从头开始，因此，使用相对测量 (%) 而不是绝对测量 (px)，就像您使用的那样。如果有必要，那么如果它对于某些断点仍然看起来不太好，那么你可以使用你的媒体查询来增加它的趣味性。总而言之，从概念化到网站设计，都应该考虑到响应性。