放置

放置

关注
发信
关注(28)粉丝(399)

html - 为什么部分推荐书放置不正确

Closed. This question is off-topic。它当前不接受答案。
                            
                        
                    
                
                            
                                
                
                        
                            
                        
                    
                        
                            想改善这个问题吗？ Update the question，所以它是on-topic，用于堆栈溢出。
                        
                        4个月前关闭。
                                                                                            
                
        
我正在尝试构建个人鉴定部分，但未按顺序放置，而是在服务部分中放置。这是codepen链接：
https://codepen.io/Razu381/pen/XQJVzg

这是代码：

<div   class="section-testimonial">
  <div  class="row" >
      <div  class="col-md-2">
        <h2>  What people say about me</h2>
      </div>
      <div   class="col-md-10">
        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  </p>
      </div>
  </div>
</div>

最佳答案

只需删除此CSS：

.section-services{
}
.services-overlay{
    position: absolute;
    top: 80%;
}


看看我的答案：



@import url('https://fonts.googleapis.com/css?family=Josefin+Slab:300,400|Lato:300i,400|Pacifico|Tangerine:400,700&display=swap');
body{
	font-family: lato;
	font-size: 20px;
}
.header-text{
    font-size: 30px;
    font-weight: bold;
    word-spacing: 3px;
    letter-spacing: 3px;
    font-family: Abril Fatface;
    color:#2ecc71;
}
.degrees{
	font-size: 20px;
}
.top-nav{
	font-size: 20px;
	font-family: lato;
}
.navbar-light .navbar-nav .nav-link{
	color: black;
	margin: 3px;
}
.s-icon i{
	margin:3px;
}
/*----about me section---*/
.section-about{
	background: #f8f8f8;

}
.section-about h2{
	font-family: Abril Fatface;
	font-size: 40px!important;
	letter-spacing: 3px;
	word-spacing: 4px;
}
.section-about h2{
	margin-top: 100px;
}
h2:after {
    display: block;
    width: 100px;
    height: 3px;
    background-color: #2ecc71;
    content: "";
    margin-top: 10px;
    margin-bottom: 10px;
}
.section-about p{
	margin-top: 30px;
}
/*----services section---*/

.section-services .card{
	background-color: #2ecc713d;
}
.section-services .card-header{
	background-color:#2ecc71;
	text-align: center;
	margin:5px 0;
}

.section-services h2{
	font-family: Abril Fatface;
	font-size: 40px!important;
	letter-spacing: 3px;
	word-spacing: 4px;
	position: absolute;
	top: 10%;
	right: 50%;
	text-transform: uppercase;
}
.section-services h2:after{
	width: 220px;
}
.section-services p{
	text-align: center;
}
.section-services .card-body img{
	max-width: 100%;
	text-align: center;
	display: block;
	height: 150px;
	width: 50%;
	margin: 0 auto;
}
/*------section-testimonial---*/

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>homw</title>
	<script src="https://kit.fontawesome.com/7ea1edf4c8.js"></script>
	<link href="https://fonts.googleapis.com/css?family=Josefin+Slab|Lato|Pacifico|Tangerine&display=swap" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
	<link rel="stylesheet" href="resources/css/style.css">
  <link href="https://fonts.googleapis.com/css?family=Abril+Fatface|Roboto&display=swap" rel="stylesheet">
  <script src="https://kit.fontawesome.com/367919f9b0.js"></script>
  <style>
    .carousel-item{
    height: 100vh;
}
.carousel-item img{
    height: 100vh;
    object-fit:cover;
    overflow: hidden;
}
  </style>

</head>
<body>

   <nav class="navbar navbar-expand-md navbar-light bg-light">
  <a class="navbar-brand" style="font-family:Pacifico;font-size: 30px;color: #2ecc71;" href="#">DR. S. Faruqi</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarText">
    <div class="navbar-nav mx-auto top-nav" >
      <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#">About Me</a>
      <a class="nav-item nav-link" href="#">Services</a>
      <a class="nav-item nav-link " href="#">Testimonials</a>
      <a class="nav-item nav-link " href="#">Chembers</a>
    </div>

      <span class="s-icon">
        <i class="fab fa-facebook-square fa-2x"><a href="fb.com" title=""></a></i>
        <i class="fab fa-twitter-square fa-2x"><a href="fb.com" title=""></a></i>
        <i class="fab fa-youtube-square fa-2x"><a href="fb.com" title=""></a></i>
      </span>
  </div>
</nav>




    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" style="height: 100vh;position: relative;">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://source.unsplash.com/random" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="https://source.unsplash.com/random/2" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="https://source.unsplash.com/random/3" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="https://source.unsplash.com/random/4" class="d-block w-100" alt="...">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" 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" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

<div class="section-about">
  <div class="container">
   <div class="row">
       <div class="col-md-5">
       <h2>About Me</h2>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
       tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
       quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
       consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
       cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
       proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
       tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
       quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
       consequat. </p>
    </div>
    <div class="col-md-7">
     <img src="https://source.unsplash.com/random/22" alt="" class="img-fluid">
    </div>
  </div>
 </div>
</div>


<div class="section-services "style="position:relative ;" >
  <img src="https://source.unsplash.com/random/5.png" alt="" style="width: 100%;height: 400px;">
  <h2>Services </h2>
  <div class="container">
  <div class="services-inner">
    <div class="row  services-overlay ">
     <div class="col-md-4 ">
      <div class="card">
        <div class="card-body">
          <img src="https://source.unsplash.com/random/6" alt="" class=" card-img-top " >
            <h4 class="card-header">Primary Treatment</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat.</p>
        </div>
      </div>
     </div>
     <div class="col-md-4 ">
      <div class="card">
        <div class="card-body">
          <img src="https://source.unsplash.com/random/7" alt="" class="card-img-top " >
            <h4 class="card-header">Primary Injury</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat.</p>
        </div>
      </div>
     </div>
     <div class="col-md-4 ">
      <div class="card">
        <div class="card-body">
          <img src="https://source.unsplash.com/random/8" alt="" class=" card-img-top " >
            <h4 class="card-header">Vaccination</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat.</p>
        </div>
      </div>
     </div>


     <div class="col-md-4 ">
      <div class="card">
        <div class="card-body">
          <img src="https://source.unsplash.com/random/9" alt="" class=" card-img-top " >
            <h4 class="card-header">Health Advice</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat.</p>
        </div>
      </div>
     </div>
     <div class="col-md-4 ">
      <div class="card">
        <div class="card-body">
          <img src="https://source.unsplash.com/random/10" alt="" class=" card-img-top " >
            <h4 class="card-header">Childern care</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat.</p>
        </div>
      </div>
     </div>
     <div class="col-md-4 ">
      <div class="card">
        <div class="card-body">
          <img src="https://source.unsplash.com/random/11" alt="" class=" card-img-top">
            <h4 class="card-header">Health education</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat.</p>
        </div>
      </div>
     </div>
  </div>

 <!--end of row-->
  </div>
</div>

</div>


<div   class="section-testimonial">
  <div  class="row" >
      <div  class="col-md-2">
        <h2>  What people say about me</h2>
      </div>
      <div   class="col-md-10">
        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  </p>
      </div>
  </div>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
</body>
</html>

关于html - 为什么部分推荐书放置不正确，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57530953/

10-13 03:18
Powered by LMLPHP ©2024 放置 0.024887