javascript - 集成 jQuery Slider 搞乱了设计

Question

我在将 ResponsiveSlider 集成到我的页面时遇到了一些麻烦，因为我集成它的每种类型的设计都一团糟。下面的 div 上升并隐藏在 slider 下，文本下降等等......实际上是所有页面。

你可以找到一个实时版本here

抱歉，我正在努力学习，但保持代码整洁并不是我的首要任务:/

HTML:

<div class="container">
    <div id="head">
      <header>
        <img src="http://html5hub.com/wp-content/uploads/2013/07/default-share1.png" alt="photo profile">
        <ul>
          <li><h1>Jack Foster</h1></li>
          <li>7 Beer Street, London</li>
          <li>Phone : 00000456789</li>
          <li>contact@youdontknowjack.com</li>
        </ul>
      </header>
      <nav>
        <ul>
          <li><a href="#">About me</a></li>
          <li><a href="#">About me</a></li>
          <li><a href="#">About me</a></li>
          <li><a href="#">About me</a></li>
        </ul>
      </nav>
       <!--Problem  down here-->
      <ul class="rslides">
          <li><img src="images/1.jpg" alt=""></li>
          <li><img src="images/2.jpg" alt=""></li>
          <li><img src="images/3.jpg" alt=""></li>
        </ul>
    </div>
      <div class="content">
      <div id="history-back">
        <div id="history">
      <h2>History & Profile</h2>
      <p>...</p>
    </div>
    </div>
    <div id="skill">
      <h2>Skillset</h2>
      <p>...</p>
    </div>
    <div id="studies-back">
    <div id="studies">
      <h2>Studies</h2>
      <p>...</p>
    </div>
    </div>
    <div id="work">
      <h2>Work</h2>
      <p>...</p>
    </div>
    <footer>
        <div>
        <ul style="list-style: none">
          <li><a href="#">About me</a></li>
          <li><a href="#">About me</a></li>
          <li><a href="#">About me</a></li>
          <li><a href="#">About me</a></li>
        </ul>
        </div>
        <div>
        <ul style="list-style: none">
          <li><a href="#">About me</a></li>
          <li><a href="#">About me</a></li>
          <li><a href="#">About me</a></li>
          <li><a href="#">About me</a></li>
        </ul>
        </div>
        <div>
        <ul style="list-style: none">
          <li><a href="#">About me</a></li>
          <li><a href="#">About me</a></li>
          <li><a href="#">About me</a></li>
          <li><a href="#">About me</a></li>
        </ul>
        </div>
      </footer>
      </div>
  <script>
  $(function() {
    $(".rslides").responsiveSlides();
  });
</script>

还有我写的糟糕的 CSS:

*{
 margin:0;
 padding:0;
}
.container {
  width: 960px;
    margin: 0 auto;
    margin-left: 15%;
  margin-right: 15%;
  background: #ffffff;
    -moz-box-shadow: 0px 0px 8px #bbbbbb;
    -webkit-box-shadow: 0px 0px 8px #bbbbbb;
    box-shadow: 0px 0px 8px #bbbbbb;
  height: 100%
}
body {
    color: black;
    background: #eacece;
    background: url(../images/tilepng.png);
}
body h2 {
  font: ;
  margin-bottom: 1em;
}
header {
    position: relative;
}
header h1 {
  font-style: ;
}
header ul {
  padding: 3px;
  float: right;
  vertical-align: middle;
  margin-right: 2em;
  margin-top: 4em;
}
header li {
  display: block;
}
nav ul {
    padding: 10px;
    background: #F9F9F9;
    }
nav li {
    display: inline;
    padding: 0px 10px 0px 10px;
}
#history-back {
      min-height: 150px;
      max-height: 200px;
      background: url(../images/tilegif.gif);
      }
#history {
      margin: 3em;
      display: inline-block;
      }
#skill {
        background: #ffffff;
      margin: 3em 3em 3em 3em;
}
#studies-back {
        min-height: 150px;
      max-height: 200px;
        background: url(../images/tilegif.gif);
}
#studies {
      height: 100%;
      margin: 3em 3em 3em 3em;
      display: inline-block;
}
#work {
        background-color: #ffffff;
      margin: 3em;
      margin-bottom: 3em;
}
footer { background: #313131; width: 960px; height: 100%}
footer div { background: #313131; width:290px; padding: 15px; float:left; text-align: center}

/* rslides styles */
.rslides {
position: relative;
list-style: none;
width: 100%;
padding: 0;
margin: 0 0 20px 0;
}

.rslides li {
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;
}

.rslides li:first-child {
position: relative;
display: block;
float: left;
}

.rslides img {
display: block;
height: auto;
float: left;
width: 100%;
border: 0;
}

远非完美，但它完成了工作，如果您有任何要添加的内容以缓解它，请随时添加。

Answer 1

您的内容类和 slider 类重叠，但 slider 的内容将内容的内容向下推。 slider 的 ul 支架的尺寸小于 slider 中的尺寸，内容 div 与其对齐，而不是 li 标签中的尺寸。

对于样式修复，您可以在内容的顶部应用填充以快速修复，或者为您的 ul 提供您要滑过的图片的适当大小。不过我不熟悉这个特定的插件，所以我不确定是否有脚本修复程序。您可以在初始化时指定容器高度。