时间戳

首页 > 解决方案 > 物化滑块打乱了我的图像大小

javascript - 物化滑块打乱了我的图像大小

问题描述

我是新来的，也是编码方面的新手，我已经用 Visual Studio Code 练习了一个星期了，我遇到了以下问题：我正在制作一个里面有内容的滑块，所以我可以编辑它并在里面放一个按钮它带有一个模态，我设法让它工作，但是一旦我制作它，信息卡上的图像由于某种原因超出了信息卡的限制，我无法弄清楚我做错了什么。这是我的代码，如果这不是上传代码的正确方法，我深表歉意，我仍然不知道如何正确使用该网站。

<!DOCTYPE html>
<html>
<head>
<!----------------------------------------Zona de Extensiones+6------------------------------------------>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" type="text/css" href="Prueba numero2/assets/css/style3.css"> 
<link rel="stylesheet" type="text/css" href="Prueba numero2/assets/materialize/css/materialize.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<style>

.slider .indicators .indicator-item {
  background-color: #666666 !important;
  border: 3px solid #ffffff !important;
  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12) !important;
  -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12) !important;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12) !important;
}
.slider .indicators .indicator-item.active {
  background-color: #ffffff !important;
}
.slider {
  width: 900px !important;
  margin: 0 auto !important;
}
.slider .indicators {
  bottom: 60px !important;
  z-index: 100 !important;
  /* text-align: left; */
}

nav {
background-color: black !important;
border-style: outset white 100px !important;

}
.carousel-inner img {
width: 100%;
height: 100%;
}
.nav-wrapper .brand-logo .logo {
width: 64px !important;
}
html {
box-sizing: border-box !important;
}

*, *:before, *:after {
  box-sizing: inherit !important;
}

.column {
float: left !important;
width: 33.3% !important;
margin-bottom: 16px !important;
padding: 0 8px !important;
}

@media screen and (max-width: 650px) {
.column {
width: 100% !important;
display: block !important;
}
}

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2) !important;
}

.container {
  padding: 0 16px !important;
}
.card {
  border-style: outset !important;
  border-color: black 10px !important;
}

.container::after, .row::after {
  content: "" !important;
  clear: both !important;
  display: table !important;
}

.title {
  color: goldenrod !important;
}

.button {
  border: none !important;
  outline: 0 !important;
  display: inline-block !important;
  padding: 8px !important;
  color: white !important;
  background-color: #000 !important;
  text-align: center !important;
  cursor: pointer !important;
  width: 100% !important;
}

.button:hover {
  background-color: #555 !important;
}
footer div  {
   max-width: 100% !important;
}

</style>
</head>
<body>
<!----------------------------------------Scrips----------------------------------------->


<!----------------------------------------Scrips----------------------------------------->

<header>
<div class="panel">
<span style="display: inline-block; vertical-align: middle; height:100vh;"></span>
<span style="display: inline-block; vertical-align: middle; ">
<p class="title">L'excellance</p>
<p class="sub-title" style-color="goldenrod"> V.I.P Suites <a></p>
</div>
</header>

<nav>
<div class="nav-wrapper">
<a href="#" class="brand-logo right"><img class="logo" src="https://i.dlpng.com/static/png/36814_preview.png"alt="L'excellance"></a>
<ul id="nav-mobile" class="left hide-on-med-and-down">
<li><a href="sass.html">Home</a></li>
<li><a href="badges.html"></a></li>
<li><a href="collapsible.html">JavaScript</a></li>
</ul>
</div>
</nav>
 <br><br>

<section>
<p>
Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Maecenas malesuada. Praesent congue eratatmassa. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu. Phasellus accumsan cursus velit. Vestibulum anteipsumprimis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam, nisi quis porttitor congue, eliterat euismodorci, ac placerat dolor lectus quis orci. Phasellus consectetuer vestibulum elit. Aenean tellus metus,bibendum sed, posuereac, mattis non, nunc. Vestibulum fringilla pede sit amet augue. In turpis. Pellentesque posuere.Praesent turpis.
</p>
</section>

<br>
<br>
<div class="container"><div class="divider"></div></div>
<br>
<br>

<br>
<br>
<div class="w3-row-padding w3-border-light-grey w3-round w3-padding"></div>
<div class="row">
<div class="column">
<div class="card">
<img class="materialboxed" data-caption="CEO & Founder Sugma Joe " src="https://i.pinimg.com/originals/a0/65/fc/a065fcc880c5c1b0fdc38c5d42a6f1af.jpg" alt="Jane" style="width:100%">
<div class="container">
<h2>Lorem</h2>
<p class="title">CEO & Founder</p>
<p>Some text that describes me lorem ipsum ipsum lorem.</p>
<p>example@example.com</p>
<p><button class="button">Contact</button></p>
</div>
</div>
</div>

<div class="column">
<div class="card">
<img class="materialboxed" width="auto" src="https://i.pinimg.com/originals/a0/65/fc/a065fcc880c5c1b0fdc38c5d42a6f1af.jpg" alt="Mike" style="width:100%">
<div class="container">
<h2>Lorem</h2>
<p class="title">Art Director</p>
<p>Some text that describes me lorem ipsum ipsum lorem.</p>
<p>example@example.com</p>
<p><button class="button">Contact</button></p>
</div>
</div>
</div>

<div class="column">
<div class="card">
<img class="materialboxed" src="https://i.pinimg.com/originals/a0/65/fc/a065fcc880c5c1b0fdc38c5d42a6f1af.jpg" alt="John" style="width:100%">
<div class="container">
<h2>Lorem</h2>
<p class="title">Designer</p>
<p>Some text that describes me lorem ipsum ipsum lorem.</p>
<p>example@example.com</p>
<p><button class="button">Contact</button></p>
</div>
</div>
</div>
</div>
</div>
<br>
<div class="divider"></div>
<br>
<br>
<!----------------------------------------Sección 3------------------------------------------>
<div class="slider">
  <ul class="slides">
    <li>
      <img src="Prueba numero2/assets/img/Meaning-of-travelling.jpg"> <!-- random image -->
      <div class="caption center-align">
        <h3>This is our big Tagline!</h3>
        <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
      </div>
    </li>
    <li>
      <img src="Prueba numero2/assets/img/Meaning-of-travelling.jpg"> <!-- random image -->
      <div class="caption left-align">
        <h3>Left Aligned Caption</h3>
        <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
      </div>
    </li>
    <li>
      <img src="Prueba numero2/assets/img/Meaning-of-travelling.jpg"> <!-- random image -->
      <div class="caption right-align">
        <h3>Right Aligned Caption</h3>
        <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
      </div>
    </li>
    <li>
      <img src="Prueba numero2/assets/img/Meaning-of-travelling.jpg"> <!-- random image -->
      <div class="caption center-align">
        <h3>This is our big Tagline!</h3>
        <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
      </div>
    </li>
  </ul>
</div>


<!----------------------------------------Fin de Sección 3------------------------------------------>
<!----------------------------------------footer------------------------------------------>

<!----------------------------------------Zona de Scrips------------------------------------------>
<script>
  $(document).ready(function () {
      $('.slider').slider({full_width: true});
  });
</script>         


 <script>

 document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.materialboxed');
    var instances = M.Materialbox.init(elems, options);
  });

  // Or with jQuery

  $(document).ready(function(){
    $('.materialboxed').materialbox();
  });
  </script>

<script>
  // init materialize tab
  var elem = $('.tabs')
     var options = {}
     var instance = M.Tabs.init(elem, options);

  //or Without Jquery


    //var elem = document.querySelector('.tabs');
     var options = {}
     var instance = M.Tabs.init(elem, options);
</script>



</body>
</html>

标签： javascripthtmlcsstwitter-bootstrapmaterialize

解决方案

要在此处发布您的代码，只需键入您的短信，然后在消息下方粘贴您的代码，选择您的代码段落，然后按 ctrl+K，这应该会将您的消息设置为使用代码发布...发布您的代码以供他人使用能够帮助你...

推荐阅读